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:
- Open your task list in SharePoint Designer 2010.
- Create a new view, or just open the All Items view, from the list of views on the right.
- 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.
- 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:
- 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
![ch5[124]](https://i0.wp.com/wonderlaura.com/wp-content/uploads/2016/03/127-ch5124_4a417fc7.png?resize=587%2C261 "ch5[124]")
- 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.
- Pick the first @PercentComplete, and then type a }% after it, so it looks like this:
![ch5[126]](https://i0.wp.com/wonderlaura.com/wp-content/uploads/2016/03/127-ch5126_4a417fc7.png?resize=301%2C40 "ch5[126]")
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.
This technique is so simple and yet borderline genius! I wish I had come up with it. 😀
Thanks Laura for Wonderful Article..
Hi Laura – I added the new cell to the right on my list and was able to add the image. However, there was no default width or height. I was able to add a value for height but when trying to do so for width, the value for “%PercentComplete” was not present. Nor were the other list field values (i.e. Priority, Title…etc). Is there some other config that I have to do? Thanks, Mark –
I don’t see a Percent Complete either – I can fumble around through the XPath Expression Builder to get one – but the bar doesn’t display right. I’m using Enterprise edition, does that make a difference?
I just happened to use a sharepoint task list in this demo, which happens to have a field called percent complete. This solution can be used in any type of list or library, though, with any number field at all.
Hi Laura – I am having the same problem as Mark and Amy Gibbs above. I add the column and insert the image, but there’s no default width or height. When I add a width and height, “%PercentComplete” is not an option. Thoughts?
I don’t understand you guys’ questions about PercentComplete. Your list has to have a column called Percent Complete, and if it doesn’t, then you won’t see that as an option.
I also didn’t have the @PercentComplete as an option from the popup after typing “{“, although I was to go into the XPath Expression Builder and select that formula manually. Unfortunately that didn’t work for me either. I was left with a blue sliver toward the absolute right of the row no matter what the % complete of the item was. Here is what did work: If you replace the width=”{PercentComplete}%” with width=”{$thisNode/@*[name()=current()/@Name]}%” you should be all set. Also, I had a hard time inserting the blue bar image properly in the first step; it should look like Laura’s post where the numerical value for the % is still visible and the blue bar is directly to the right. I hope this helps.
I have the same issue, the @ shows only some fields and not all i also tried $thisnode and didn’t work. please advice
Jon, Cool, thanks for the further troubleshooting. I can’t get mine to not work correctly, so I can’t see what some people are seeing as far as it not working.
I think I’ve discovered why the %Complete field isn’t available for selection. Make sure that when you insert the image, your cursor is in the first DATA row cell, NOT the Title bar cell. I think you’ll find you get a different selection of fields depending on which cell the image is placed in. Even after that, the width/height parameters did not appear for me. I had to add them. And when I neglected to add the height parameter it seemed to take on the size percentage of the width. I added it with a fixed size and everything worked fine. Thanks Laura!
Carolyn, THANKS, I’ve added that tidbit to the original post, so hopefully no one else will use the incorrect cell.
Laura Rogers you are Genius 😀 keep it up .
I am trying to add the bar chart to a Status List. I successfully added it in SharePoint Designer but when I view the page in the Browser, the bar chart does not show. I tried both editing the default list view aspx page and creating a new view but neither method works. Any suggestions?
Cynthia,
Status lists are stuctured really weird, and behave differently than all other types of lists… so I really don’t have an answer for that one.
Although @PercentComplete does not appear in the drop down list, you can type it and it will work. Inserting the image is real prolem though. Thanks Laua
Thanks for the feedback Varun.