Adding a diagram
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 assign data to these elements so that their appearance (such as color) will change based on data values.
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 imported into Dundas BI under the Diagrams folder in the EXPLORE window.
3.2. Drag the diagram to the canvas
Make sure you are in Edit mode.
Drag the newly imported 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. Connection 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.
4.2. Add data to the diagram
Drag the Sheet1 data connector item and drop it onto the diagram control on the canvas.
The diagram is now connected to the data from the Excel file. Each shape that is connected to data is assigned a color that corresponds to its data value. This is achieved using shape color rules, which you can configure via the Properties panel.
Select the diagram control, go to Properties panel, and 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 Analysis Panel from the toolbar. Click Visualization and go to the Shapes TOOLTIP section. Drag the Employee column from the Excel data connector in the EXPLORE window and add it to this tooltip section.
4.3. Compatible Names
In case the data you want to use has column values that cannot be matched against the names of elements from the file, Dundas BI will attempt to use alternate names. Uploaded diagrams will use groups and custom properties from the diagram file as sources of alternate names.
If the data does not match the names or the alternate names, you can manually set the Shape Compatible Name property for the shape element.
Path and symbol elements also have compatible name properties.
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 connected data values).
Note that zoom or pan changes that you make in View mode will persist even when you switch back to Edit mode.