Add a diagram and bind it to data

Contents[Hide]

1. Overview

A diagram is similar to a map visualization. You use it to display spatial information in the form of shape, path, and symbol elements.

Then you bind these elements to data so that their appearance (such as color) will change based on data values.

You can use a diagram to display a floor plan, or an office layout.

Related video: Introduction to Diagrams

2. Supported formats

2.1. XAML

The diagram visualization supports Microsoft's XAML file format. There are some free tools available for viewing and editing XAML markup such as Kaxaml.

An example XAML file looks like this:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="floorplan" Width="800" Height="600" Clip="F1 M 0,0L 800,0L 800,600L 0,600L 0,0">
	<Canvas x:Name="Layer_1" Width="800" Height="600" Canvas.Left="0" Canvas.Top="0">
		<Path x:Name="Path" Width="457.932" Height="461.235" Canvas.Left="72.4715" Canvas.Top="93.5018" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 529.904,141.916L 481.918,94.0018L 120.078,94.0019L 72.9715,141.108C 72.9715,141.108 72.9715,499.975 72.9715,506.173C 72.9715,512.371 121.036,554.237 121.036,554.237L 486.085,554.237L 529.725,510.598L 529.904,141.916 Z "/>
		<Rectangle x:Name="Rectangle" Width="17" Height="17" Canvas.Left="115" Canvas.Top="125" Stretch="Fill" Fill="#FF000000"/>
		<Rectangle x:Name="Rectangle_0" Width="17" Height="17" Canvas.Left="139" Canvas.Top="125" Stretch="Fill" Fill="#FFFF0000"/>
		...

2.2. SVG

The diagram visualization also supports the SVG (Scalable Vector Graphics) format.

An example SVG file looks like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100%" width="100%" viewBox="0 0 200 200">
  <defs>
    <clipPath id="def_fLQzAQ==_1">
      <path d="M20,112A12,12,0,0,1,8,100A92,92,0,0,1,192,100A12,12,0,0,1,180,112L116.970562748477,116.970562748477A24,24,0,0,1,83.0294372515229,116.970562748477z"/>
    </clipPath>
    ...

3. Displaying a diagram

3.1. Drag a XAML file to EXPLORE

For this example, create a new dashboard from the main menu, and use the blank dashboard template.

Locate your XAML file in Windows Explorer.

Drag the XAML file from Windows Explorer and drop it over the EXPLORE window in Dundas BI.

Drag XAML file to EXPLORE window (Chrome browser)
Drag XAML file to EXPLORE window (Chrome browser)

The XAML file is automatically imported into Dundas BI under the Diagrams folder in the EXPLORE window.

XAML file is added to the Diagrams folder
XAML file is added to the Diagrams folder

3.2. Drag diagram to the canvas

Next, make sure you are in Edit mode.

Drag the newly added diagram from the Diagrams folder to the dashboard canvas.

Drag diagram to dashboard canvas
Drag diagram to dashboard canvas

A diagram visualization control appears on the canvas.

Go to the PROPERTIES window and change appearance settings for the diagram.

Change the appearance of the diagram
Change the appearance of the diagram

4. Binding a diagram to data

4.1. Drag an Excel file to EXPLORE

Consider an Excel file which contains two columns of data:

  • a column of text values which can be joined with the names of graphical elements from the XAML file
  • a column of numeric values which can be used as a measure

Drag this Excel file from Windows Explorer and drop it onto the EXPLORE window. This will automatically create a data connector for the Excel file.

Go to the EXPLORE window and expand the Data Connectors folder. Further expand the auto-generated data connector to see the column structure of the Excel sheet.

Drag the Sheet1 data connector item and drop it onto the diagram control on the canvas.

The diagram is now bound to the data from the Excel file. Each shape that is bound to data is assigned a color which corresponds to its data value. This is achieved using shape color rules which you can configure via the PROPERTIES window.

Drag Sheet1 to the diagram control
Drag Sheet1 to the diagram control

Select the diagram control, go to PROPERTIES, and then modify the shape color rule in order to change the colors of the shapes in the diagram.

Changing the auto color rule for shapes
Changing the auto color rule for shapes

Finally, select the diagram control and click Data Binding Panel from the toolbar. Click Bindings and go to the SHAPE TOOLTIP TEXT section. Drag the Employee column from the Excel data connector in the EXPLORE window and add it to this tooltip section.

Add the Employee column to the tooltip on each shape
Add the Employee column to the tooltip on each shape

5. Using a diagram

Once your design is complete, go to the toolbar and click View.

In View mode, you can:

  • Zoom in or zoom out on the diagram by using the mouse wheel.
  • Pan across the diagram by clicking and dragging it in any direction.
  • Hover over a shape on the diagram to view its corresponding tooltip (which shows the bound data values).

Note that zoom or pan changes that you make in View mode will persist even when you switch back to Edit mode.

Using a diagram in View mode
Using a diagram in View mode

6. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri