Roadmap: Display a data-connected Visio drawing in a SharePoint web part

If you need to present in-depth information quickly to many people, create a Visio diagram as a SharePoint web part that provides visual reporting. Visio 2010 allows you to pull data from external sources like Excel Services, SQL Server, SharePoint lists, or other OLEDB or ODBC databases. You can then apply data graphics to the shapes in your drawing to visualize that external data, publish the drawing to a SharePoint site, and then use a Visio Web Access web part to display the diagram on the SharePoint site.

This is ideal for creating custom dashboards for rich business intelligence solutions. Decision-makers can see a visual representation of business performance at-a-glance and act on that information swiftly. For more information about using SharePoint for business intelligence, see the article What is SharePoint business intelligence?

Download the visual guide

In this article

Requirements

Step 1: Import data into the Visio drawing

Step 2: Apply data graphics to shapes

Step 3: Display the diagram in a SharePoint web part

Optional: Add interactivity to the Visio Web Access web part

Requirements

The Visio Web Access web part is a feature of Visio Services, a service included with Microsoft SharePoint Server 2010. To use Visio Services, you must have Microsoft SharePoint Server 2010 Enterprise Client Access License (ECAL) and Visio Services must be deployed and provisioned in order to be used.

In addition, you must have Microsoft Visio Professional 2010 or Microsoft Visio Premium 2010 to save a diagram to a SharePoint site.

For more information about what you must do to enable Visio Services on a SharePoint site, see Visio Graphics Service administration.

Top of Page

Step 1: Import data into the Visio drawing

1. In Visio, on the Data tab, in the External Data group, click Link Data to Shapes.

On the first page of the Data Selector Wizard, select the data source that you want to use.

Important:  Access Services cannot be used as a data source for a Visio Services Web Drawing. Some diagram types, such as PivotDiagrams, are not refreshable when they are published to the SharePoint site. For best results, make sure that your data source is saved to the same SharePoint site as the Visio Services web part.

1. Follow the instructions in the Data Selector Wizard.

2. After you click Finish on the last page of the Data Selector Wizard, the External Data window appears with your imported data shown in a table.

3. To apply data from the external source to a shape in your drawing, drag a row from the External Data window onto the shape.

For more information about how to import data into Visio from an external data source, see Import data from Excel, SQL Server, SharePoint sites, and other external sources.

Top of Page

Step 2: Apply data graphics to shapes

To create a new data graphic, do the following:

1. In Visio, on the Data tab, in the Display Data group, click Data Graphics, and then click Create New Data Graphic.

2. In the New Item dialog box, do the following:

   1. Under Display, in the Data field list, click the Shape Data field that you want to represent visually.

   2. Also under Display, in the Displayed as list, select the graphic that best represents the data field (Text, Data Bar, Icon Set, or Color by Value.)

   3. Also under Display, in the Style list, select the style of graphic that you want. (If you select Color by Value as the graphic type, this is the Coloring method list.)

   4. Under Details, customize the graphic as you want.

   5. When you finish editing the graphic item, click OK.

3. Repeat the previous step until you have created an item for each shape data fields that you want to display.

To apply a data graphic to shapes in the drawing, do the following:

1. On the drawing page, select the shape that you want to apply the data graphic to.

Note:  To select multiple shapes on the drawing page, press and hold CTRL, and then select each shape that you want to apply the data graphic to.

1. On the Data tab, in the Display Data group, click Data Graphics, and then under Available Data Graphics, click the data graphic that you want.

For more information about how to create and apply data graphics, see Enhance your data with data graphics.

Top of Page

Step 3: Display the diagram in a SharePoint web part

1. On the SharePoint site page that you want to add the web part to, on the Page tab, in the Edit group, click Edit.

2. Under Editing Tools, on the Insert tab, in the Web Parts group, click Web Part, and then do the following:

   1. Under Categories, click Business Data.

   2. Under Web Parts, click Visio Web Access.

   3. Click Add.

3. In the Visio Web Access web part, click the link to open the tool pane.

4. In the tool pane, expand Web Drawing Display, and then in the Web Drawing URL box, browse to the Visio Web Drawing that you want to display.

Important:  Before you can use Visio Web Access to display your diagram in a web part, you have to publish the Visio file to the SharePoint site as a Web Drawing. For more information about how to publish a Visio Web Drawing to a SharePoint site, see Roadmap: Publish Visio drawings to a SharePoint site.

1. At the bottom of the tool pane, click Apply, and then click OK.

For more information about how to display a Visio Web Drawing in a web part, see View a Visio Web drawing in a Web Part.

Top of Page

Optional: Add interactivity to the Visio Web Access web part

If you can write ECMAScript, you can customize the Visio Web Access web part to include visual overlays that display additional information about the shapes in the Visio drawing.

For more information about how to program an interactive element for a Visio Drawing on a Web Parts Page, see MSDN: Create an ECMAScript Mashup Drawing in Visio 2010 to display in SharePoint Server 2010.