Visio 2007: Customizing Data Graphic Items


After spending a couple days chatting with people here at TechEd, I am amazed at how many people have already downloaded and have been playing around with Visio 2007 Beta 2. If you don’t have it yet, you can check it out here. In particular, a lot of people have seen the Data Graphics feature and have started to do really interesting things with it.


One of the most common questions I have gotten is around how to customize Data Graphic callouts. For example, people want to be able to add a thinner data bar, a new text callout that has different text or a different look from the built in ones, or a icon set that is customized for their particular domain. We’re putting together full documentation on how to do this, but while we’re waiting for that I’d like to give the more adventurous a primer to get going. For this post I’ll assume that you have some understanding of Masters in Visio and the ShapeSheet.


First, make sure to check out Eric’s post on the basics of using Data Graphics. The Data Graphic that you apply to a shape is made up of multiple graphic items, each of which are just a Visio master with some special properties. In order to create new graphic items, the easiest thing to do is copy an existing one.


To copy a graphic item, do the following:




  1. Drop a shape containing shape data (for example, a network shape) on the page.


  2. Select the shape and go to “Data>Display Data on Shapes…”


  3. In the task pane that appears, click on the Data Graphic below the “None” Data Graphic (should be called “Data Graphic 2”). You should see something like the below:
           


  4. Go to “View>Drawing Explorer Window”


  5. Expand the “Masters” section and then right click on the “Heading 3” master and select “Duplicate” from the context menu. :
           


  6. This will result in a new master, called something like “Heading3.13”. Rename that new master to something recognizable like “My Heading”.


  7. Right click on “My Heading” and select “Edit Master Shape” from the context menu.


  8. You are now in master editing mode. You can modify the shape. For example, increase the font size to 12 point and change the color to Orange from Blue.


  9. Close the window and click “Yes” to update the shape.

The new text callout type is now there and ready to use in this document. You can use it just as you do any of the built in graphic items. Just edit the Data Graphic you are using (Data Graphic 2), edit the first existing text box, then select “My Heading” from the dropdown list of available callouts: :
  


Now that you have created this graphic item, you can move it from document to document and it will then be available in both the UI and programmatically. Editing other item types (data bars and icon sets) can be accomplished in a similar way.


A couple more tips to get you started:




  • The master name for the default Data Graphic item will match up with its name in the Data Graphic dialog. Just make sure that you use the item first to make sure that it is added to that particular document.


  • Data Graphic items essentially conform to an interface for their particular item type.


  • Check out the User cells in the ShapeSheet to see what is involved.


  • Icon sets usually use multiple geometry sections to represent the various possible states.

That’s it for now. When we have more documentation I’ll update this post to point to it, but hopefully this will be enough to get people started.


Update: I’ve added some information specifically on customizing icon sets.

Comments (16)

  1. In this post, I discussed some general tips on how to work with shapes with intelligent behaviors. Today,…

  2. BigMerk says:

    I get it for headings and that sort of thing, but if I want to use different colored balloons instead of colored flags to indicate data state, do I have to edit masters on a document by document basis… you kind of lost me on that part. I guess I’m asking if I can globally edit/add icon sets.

  3. wmorein says:

    You can’t edit them globally by adding them to the defaults (at least not in a supported way). The way we recommend doing this is creating/editing the Graphic Item master once in a single document, and then taking that and copying it to the documents and templates that you will need it in.

    Does that seem like it would work with your plans?

  4. BigMerk says:

    So how would this work with custom solutions. I’m working on a solution for a customer who would like different sorts of graphic indicators on their shapes. If I use the techniques above, can I get the same programmatic access to the custom data graphic items as the stock ones? Visio’s new APIs will facilitate that?

    Thanks

  5. wmorein says:

    Yes, you can get the same programmatic access to them as you can to the built in ones. When you are programmatically dealing with the Data Graphics and Graphic Items, they are Visio.Master objects. So to add them you just need to grab the master you created — using the technique above — from somewhere (e.g. open a stencil containing it and get it from the Masters collection) and then set the DataGraphic property on the selection or add a new item to the GraphicItems collection in each Data Graphic master.

    If your solution already has a template you can just add it to that directly.

  6. Benjamin says:

    Any tutorials or quick howto’s on how to create a custom icon set ?

    When you try to edit one of the existing icon sets I can’t edit the different geomitry sections. I’ve been trying to build my own group of objects and trying to set a formula per shape that shows or hides the shapes. I tried playing around with the different user defined cells as described in Chris’s post (https://blogs.msdn.com/chcast/archive/2006/01/19/515050.aspx)

    Could anybody please give me some pointers or help me out ?

    thanx !

  7. wmorein says:

    Benjamin,

    I’ll try to get a post up today showing how to customize icon sets.

    Can you explain a little more about what you mean when you say that you “can’t edit the different geometry sections.” Are you using the ShapeSheet directly? If so, you should always be able to edit them.

  8. Benjamin Jacobs says:

    Hey !  Thanks for the reply !

    To answer your question: I am editing the shapesheets directly …

    What I ment to do is to duplicate an existing icon set and then replace each icon with my own custom made icons, but before being able to do that I should be able to edit the different geomitry sections so I can replace each icon one by one … And I guess I can’t replace a drawing using the shapesheet form right ?

    In the meantime I saw your post on icon sets, I’m gonna try this right away ! Thanx A lot !

  9. Alexander says:

    hi

    I ask myself why the "Display Data on Shapes" menu item is deactivated when I record a macro. Any suggestions or hints?

    Alexander

  10. In the previous two posts on customizing Data Graphics, I covered general customization (using a text…

  11. wmorein says:

    Alexander,

    Unfortunately the macro recorder issue is a design limitation for this version. The API programmability model for Data Graphics does not cover everything that can be done in the user interface (you can do virtually everything programmatically, but it requires working in the ShapeSheet). Since you wouldn’t get a useful macro, we decided to turn this off.

    Bill