Creating a Dashboard (Bar Chart) in SharePoint from a Data View

I was in need of a simple way to show some bar charts for list data in a SharePoint site. Actually the requirement was to create a page of dashboards based on various status fields that management could view at a glance. I did some looking online and found a few resources but none that exactly met my needs. The two resources I found most helpful were Customizing List Views with XSLT Transformations in SharePoint Designer 2007 and Create Bar Graphs in SharePoint.

 

Here is a sample dashboard page.

 

 

A dashboard page consists of a web part page containing a data view and a separate XSL file which formats the data view to look like a bar chart.  If the field being used for the dashboard is based off a site column, one XSL file can be used for multiple lists which contain that site column. 

 
 

Creating an XSL Formatting File

1. Download a copy of the sample XSL file from here and then change the file extension from .doc to .xsl.
2. In SharePoint Designer, create a folder called XSLT off of the root folder.
3. Copy in the XSL file you downloaded. Rename the file to match the name of the column you will be using for the dashboard.

     4. Double click on the xsl file to open it in SharePoint Designer.

     5.  Look for the section that looks like this: 

     <table width=”100%” cellspacing=”0″ cellpadding=”2″ style=”border-right: 1 solid #C0C0C0; border-bottom: 1 solid #C0C0C0; border-left-style: solid; border-left-width: 1; border-top-style: solid; border-top-width: 1;”>

         <xsl:call-template name=”showBar”>

         <xsl:with-param name=”AllTasksCount” select=”$AllTasks” />

         <xsl:with-param name=”ColumnTitle” select=”‘New Student’” />

         <xsl:with-param name=”ItemCount” select=”count(/dsQueryResponse/Rows/Row[normalize-space(@Student_x0020_Type) = 'New'])” />

         </xsl:call-template>

         <xsl:call-template name=”showBar”>

         <xsl:with-param name=”AllTasksCount” select=”$AllTasks” />

         <xsl:with-param name=”ColumnTitle” select=”‘Returning from Previous Year’” />

         <xsl:with-param name=”ItemCount” select=”count(/dsQueryResponse/Rows/Row[normalize-space(@Student_x0020_Type) = 'Returning'])” />

         </xsl:call-template>

         <xsl:call-template name=”showBar”>

         <xsl:with-param name=”AllTasksCount” select=”$AllTasks” />

         <xsl:with-param name=”ColumnTitle” select=”‘Inactive‘” />

         <xsl:with-param name=”ItemCount” select=”count(/dsQueryResponse/Rows/Row[normalize-space(@Student_x0020_Type) = 'Inactive'])” />

         </xsl:call-template>     

    </table>

 

6.       Replace Student_x0020_Type with the name of the column noting that the _x0020_ denotes a space between words.  

7.       Replace New, Returning, and Inactive with the values of the column choices from your list.

8.    Replace New Student, Returning from Previous Year, and Inactive to correspond to the labels that will be shown on the bar graph for each column choice.

9.   Save the file and close it.

 

 

 

Creating the Dashboard Page
 

 

1. From a browser, open the SharePoint site and click on Site Actions/Create.
   

    

2. Select Web Part Page under Web Pages.
   

    

3. Give the new page a name and place it in a document library.
   

    

4. In SharePoint Designer, open the newly created page for editing.
   

    

5. Place the cursor in one of the Web Part Zones and then from the top menu, click Data View/ Insert Data View.
   

    

   
   

    

6. In the Data Source Library tab, find the list you will be using for the dashboard and select it. Then click Show Data.
   

    

   
   

    

7. In the Current Data Source Details tab, select the field to display in the dashboard and click on Insert Selected Field as…/ Multiple Item View.
   

    

   
   

    

8. Click on the inserted data view and select the Data View Properties (accessed by clicking on the arrow in the upper right of the data view).
   

   
   

    

9. On the Data View Properties window, select the XLST Source tab and browse to the corresponding XSL file for formatting. Note that although it says XSLT, it is looking for an XSL file. Remember our dashboard XSL files are stored in the XSLT folder at the root of the site.  Browse and select a file.  Click Ok to save the changes. 
   

    

   
   

 

     10.  The Dashboard will now be shown in SharePoint Designer.
 

    

 

WHAT TO WATCH OUT FOR – SHAREPOINT DESIGNER “FEATURES”

 

1. When adding multiple dashboards on a single page, you may see the following errors. Before adding a new dashboard to a page with existing dashboards, you need to go into the Data View Properties (see image in step 9) and uncheck the Cache XSL Transform.
   

    

   
   

    

2. You may be prompted to save your XSL file even when it is closed and you have not made any changes. To get around this, click on Set Action. Then choose the “Don’t overwrite the existing file…” and click OK.
   

    

   
   

    

   

---

Possibly related posts: (automatically generated)

• 10 SEO Techniques All Top Web Sites Should Use