Bar Graphs using SharePoint 2010 Data Views

This post is applicable to SharePoint 2010 Server, SharePoint Foundation, and SharePoint Online in Office 365.

The inspiration for this post comes from an old post from 2008 on MSDN called CSS Style Bar Graphs using Data Views.  I learned a lot from this old post and used it a couple of times back in SharePoint 2007.  When I decided to do the same thing in 2010, I discovered that the same syntax does not work anymore.  So I figured out a new way to do it.

The idea is that you can take a number field in a list that represents percentage, and create a bar graph.  It will show a bar across a cell, with the total width of the table cell being 100%, and the width of a blue bar being the percentage value from a field in your list.

Here are the steps to accomplish this, just based off of the percent complete field on a task list:

1. Open your task list in SharePoint Designer 2010.
2. Create a new view, or just open the All Items view, from the list of views on the right.
3. In your view, put the cursor in the far right column.  In the Table tab of the ribbon, click the Insert Right button, to insert a blank cell to the right.
4. Put the cursor in the cell (the second cell down, NOT the title row), and on the Insert tab in the ribbon, click the Picture button to insert a picture.  This is the one I used:
   
5. At the bottom of SharePoint designer, click the Split button, so you can look at the code behind the image.  Click to select the image, and you’ll see that the code behind it is automatically highlighted
   
6. The width is what we want to change.  In the code, select the current width (the numbers 856), and as soon as you type a { open curly bracket, it will prompt you with the names of all the fields in the list.
   
7. Pick the first @PercentComplete, and then type a }% after it, so it looks like this:
   

That’s it.  Save the page, and hit F12 to quickly preview it in the browser.  Now your bars are all the width of however much percent complete each task is.

Here’s a tricky one, though.  In my current project, I wanted to do the same thing, but I have no number field at all in my list.  I have a set of statuses that are just text, and I want to base this bar chart off of a text word that represents each item’s status.  For example, my statuses are Manager Approval, VP Approval, CEO Approval, Completed.  I want associate a percent with each, so that:

• Manager Approval = 25%
• VP Approval = 50%
• CEO Approval = 75%
• Completed = 100%

I don’t want to have to create a new column in my list just to put the percent in it, so instead, I wrote some XSLT code.  Yep.  This is how you create some variables in the code, so that the percent width can be based off of them.  This can all just go in the same cell with the bar graph.

<td class=”ms-vb”>
<xsl:variable name=”stage”>
<xsl:choose>
<xsl:when test=”normalize-space(@Status) = ‘Manager Approval'”><xsl:value-of select=”25″/></xsl:when>
<xsl:when test=”normalize-space(@Status) = ‘VP Approval'”><xsl:value-of select=”50″/></xsl:when>
<xsl:when test=”normalize-space(@Status) = ‘CEO Approval'”><xsl:value-of select=”75″/></xsl:when>
<xsl:when test=”normalize-space(@Status) = ‘Completed'”><xsl:value-of select=”100″/></xsl:when>

<xsl:otherwise>
<xsl:variable name=”stage” select=”100″/>
</xsl:otherwise>
</xsl:choose></xsl:variable>
<img alt=”line” src=”../Pictures/blueline.png” width=”{$stage}%” height=”43″ />
</td>

Now, based on just some text in a text field called Status, your bar graph will show the proper widths accordingly.