Back
Visio

Creating custom data graphics in Visio

Visio has a rich set of built-in graphics to represent data visually. To help you get started quickly, Visio Professional 2013 provides 4 kinds of data graphics: text, data bar, icon set and color by value.

With these, you can build data graphics, create multiple data graphics with a single shape and link your data from an external data source to create compelling and up-to-date charts. You also can create custom data graphics specific to your business needs and corporate standards.

How to create custom data graphics

Let’s say you’re the project manager for a housing construction project. You track tasks in an Excel spreadsheet and also have a flowchart for the same tasks.

Construction flow chart

Construction flow chart

You use a flowchart to report project status, so you’d like to show each task’s status as On Track, Delayed, At Risk, On Hold or Completed. Then project team members and stakeholders can see at a glance how the project is progressing, and you can see the status of each of these stages reflected in the diagram in your own customized way.

After applying custom data graphics

After applying custom data graphics

Create data graphic icons

First, decide what shapes to use as data graphics icons. The example below shows an existing decorative shape. All shapes can be renamed by using the Shape Name command on the Developer tab.

Custom data graphics icons

Custom data graphics icons

Resize the data graphics according to your needs. One easy way is to drop the shape of the flowchart onto the Visio canvas and then drop one of data graphics shapes on top of the flowchart to get an idea of how it will look.

Group shapes

Now group the shapes together. You can do this on the Visio canvas by dropping the shapes on top of each other. The data graphic hides the shapes to show only the top shape, but if the shapes are spread across the page, the data graphics will not be shown to scale. So, start by laying out the shapes as shown above and then drag D on top of G, R on top of G, and so on, until you get all shapes on top of one another. Visio guides will help you achieve accuracy.

Group shapes

Group shapes

Once you get all of the shapes together, select all of the shapes and then use the group operation to group the shapes.

Grouping action on the Developer tab

Grouping action on the Developer tab

To verify that you have the shapes grouped, open the Drawing Explorer on the Developer tab and check the page where you have grouped the shapes. In the example below, 5 shapes have been grouped and a new group shape Sheet.11 has been created. Sheet.11 is the parent and this will be our master shape.

Drawing Explorer

Drawing Explorer

Insert user sections

Now let’s dive deeper into Visio’s rich extensibility with user sections. Go to the shape sheet of the master shape and define it as an Icon Set for Visio. To do this, right-click anywhere on the shapesheet to insert the user-defined cells in the shapesheet.

Insert section dialog

Insert section dialog

Insert 3 rows and then define them as shown in the example below.

User-defined section in the grouped shape

User-defined section in the grouped shape

The msvCalloutType defines this group shape as an Icon Set that can be used in creating data graphics. The msvCalloutIconCount defines the number of icons that are present in this Icon Set. The third field is dynamic, and it updates based on the shape data, which in turn controls which of the 5 icons to show.

Set NoShow properties

Now that the Icon Set is defined, we need to tell Visio when it should show the corresponding icons based on the master shape’s msvCalloutIconNumber property. At this point, decide the order in which you want the shapes to appear in the Create Data Graphic menu and note the corresponding shape’s name. You can check the shape’s name in the Drawing Explorer or use the Shape Name menu item under the Developer tab. C shape’s name is Black, O is Purple, and so on.

Shape order to appear in the Create Data Graphic window

Shape order to appear in the Create Data Graphic window

Shape Name dialog

Shape Name dialog

Now set the NoShow property of all 5 individual shapes so that they only appear when the master shape has the correct property set by the shape data. In this case, set the Geometry.NoShow property to: NOT(Sheet.11!User.msvCalloutIconNumber=4)

Geometry NoShow 1

Repeat this step for any other Geometry section that’s part of the shape. Since text is part of the shape, do the same for the HideText property under the Miscellaneous section.

Geometry NoShow 2

Miscellaneous

In addition, for every shape, lock the width and height to prevent them from varying with the shape size. To do this, check the size of the data graphic. In the example, the size of the data graphic shape is already reduced to what should appear in the final diagram. The example data graphic width is 0.5525 and the height is 0.1842.

Shape Transform

The formula here is: GUARD (0.5525 in*DropOnPageScale) for Width and GUARD (0.1842 in*DropOnPageScale)

Shape Transform width and height

Repeat the action for the other shapes:

  • For Purple: NOT(Sheet.11!User.msvCalloutIconNumber=3)
  • For Red: NOT(Sheet.11!User.msvCalloutIconNumber=2)
  • For Orange: NOT(Sheet.11!User.msvCalloutIconNumber=1)
  • For Green: NOT(Sheet.11!User.msvCalloutIconNumber=0)

Theme protection

To protect the theme of the final diagram, lock the Format, Group Format, Theme Colors and Theme Effects cells in the Protection section of the shapesheet.

Lock data graphics from theme effects and formats

Lock data graphics from theme effects and formats

Quickly test the data graphic. On the master sheet, go to the shapesheet and try different numbers between 0 and 4 in the msvCalloutIconNumber property. The canvas should show the appropriate shape.

User defined cells

Create a master stencil

To create a master stencil, it’s a good idea to create a backup of your group shape first. Once you have your backup saved, open the document stencil by browsing to More Shapes and then selecting Show Document Stencil. Drag and drop the group shape in the Document Stencil to make it a master stencil.

Show Document Stencil

Show Document Stencil

Master shape in the Document Stencil

Master shape in the Document Stencil

Now try creating a new data graphic based on the Icon Set. You should see your new custom Icon Set represented in the menu.

Custom Icon Set in the Data Graphic Creation window

Custom Icon Set in the Data Graphic Creation window

Apply the rules based on the shape data and select where the data graphic needs to appear on the shape. In the example, the top right edge is selected. Apply the data graphics to all shapes in the flow chart. The flow chart shows the data graphic on the shapes so that you can see the status of the process in the flow chart at a glance. To insert a legend for the data graphics, go to the Data tab and insert a vertical legend.

Final flowchart with custom data graphics

Final flowchart with custom data graphics

That’s it! Your flowchart with custom data graphics is ready. You can use this data graphic in other diagrams by copying the master from the Document Stencil and pasting it in the document stencil of the new diagram.

Join the conversation

1 comments

  1. This is excellent information, Randy, thanks. For those people who appreciate the details you’ve provided but want an automated way to accomplish everything you’ve described, Visio MVP David Parker created and provides free code to build icon sets automatically:
    http://blog.bvisual.net/2012/04/19/make-your-own-visio-data-graphic-icons-sets-automatically/

    I’ve used his code multiple times just in the past month while working on a Visio customization project for a client.