Adding a diagram

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 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

2.1. SVG

The diagram visualization supports the SVG (Scalable Vector Graphics) format. Many tools can produce SVG diagrams, including Microsoft Visio and Adobe Illustrator.

An example SVG file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1296 864">
  ...
	<g>
		<g id="shape2-1" transform="translate(277.795,-680.315)">
			<title>Square</title>
			<rect x="0" y="750.614" width="113.386" height="113.386" class="st1"/>
		</g>
		<g id="shape3-3" transform="translate(85.0394,-680.315)">
			<title>Circle</title>
			<path d="M0 807.31 A56.6929 56.6929 0 0 1 113.39 807.31 A56.6929 56.6929 0 1 1 0 807.31 Z" class="st1"/>
		</g>
		<g id="shape4-5" transform="translate(198.425,-729.921)">
			<title>Dynamic connector</title>
			<path d="M0 856.91 L72.33 856.91" class="st2"/>
		</g>
	</g>
</svg>

Your diagram can name its elements using a <title> element or id attribute.

In Adobe Illustrator, you can rename the object in the Layers panel. When using Visio to create a diagram, use the right-click option Data > Define Shape Data to enter a Label titled Name or ID and a shape name as its Value. If the Developer tab is enabled, you can use the Shape Name option in the ribbon.

2.2. XAML

The diagram visualization also 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="OuterWalls" 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="Desk1" Width="17" Height="17" Canvas.Left="115" Canvas.Top="125" Stretch="Fill" Fill="#FF000000"/>
		<Rectangle x:Name="Desk2" Width="17" Height="17" Canvas.Left="139" Canvas.Top="125" Stretch="Fill" Fill="#FFFF0000"/>
		...

3. Displaying a diagram

3.1. Import a diagram

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

Locate your diagram file in Windows Explorer or Finder.

Drag the file and drop it over the Explore window in Dundas BI.

Drag diagram file to Explore window
Drag diagram file to Explore window

The diagram file is 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 the diagram to the canvas

When editing a dashboard or other view, drag a diagram from the Diagrams folder to the dashboard canvas.

Drag diagram to dashboard canvas
Drag diagram to dashboard canvas

A diagram visualization appears on the canvas.

Tip
You can also drag a diagram file from your computer directly onto the dashboard canvas when editing.

When editing a metric set full-screen, re-visualize your data to a Diagram before dragging the diagram from the Explore window.

You can 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. Add data to the diagram

When data is added to a diagram or re-visualized to a diagram, it is connected automatically to the names from one of the hierarchies you selected. A measure is assigned automatically to change the colours of diagram elements based on the values.

To change which hierarchy or measure is assigned to the diagram and where, go to the Data Analysis Panel, click Visualization, add or remove data from the visualization options.

Adding a column to the shapes' tooltips
Adding a column to the shapes' tooltips

Colors and sizes are determined using color rules and size rules, which you can configure via the Properties window.

Data added to the diagram
Data added to the diagram

For example, select the diagram, go to Properties window, and 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

Symbols can also be placed according to the coordinates from your data source if they correspond with the coordinates used in the diagram, the same way symbols can be plotted on maps with latitude and longitude coordinates. Paths can be set up to connect between pairs of symbol names that come from your data source.

For more details on changing colors and sizes of diagram elements based on data, or plotting symbols and paths from your data source, see Displaying symbols on a map.

5. 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.

Edit properties for a shape and use the Shape Compatible Name property to give it an alternate name for connecting to data
Edit properties for a shape and use the Shape Compatible Name property to give it an alternate name for connecting to data

Note
In the case of multiple rows matching a shape because of alternate names, you can use the Shape Compatible Name property to indicate which name to use. This property takes precedence over the other names.

Path and symbol elements also have compatible name properties.

6. 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.

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

7. 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