Add a diagram and bind it to data
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
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"/> ...
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
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.
The XAML file is automatically imported into Dundas BI under the Diagrams folder in the EXPLORE window.
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.
A diagram visualization control appears on the canvas.
Go to the PROPERTIES window and change appearance settings for 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.
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.
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.
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.