CSS Style Bar Graphs using Data Views

Joncamp_1Hi everyone, Jon here again with a quick how-to on creating a simple bar graph of your data by using CSS and the Data View features of SharePoint Designer 2007. Among other things, this can give you a great KPI style view of your data without too much effort. For this example I created a basic list which had a column of number values formatted as percentages. First, I will go through the actual instructions and then I will describe what is happening.

Creating the bar graph:


1. Insert a view of your list onto a page, making sure to include the columns you want (in my case “Title” and “Evaluation”).


2. Select an item in the column of numbers you want to graph (0.20), then click the “<”. In the Common xsl:value-of Tasks popup select Number formatting options…. Then, change the Format to “Percentage (%)”. Finally, click OK.

3. Place your IP after the number (20%), then click Insert -> HTML -> <span>.

4. With the span tag selected, open the Tag Properties task pane. For the “style” attribute type in “width: {format-number(@Evaluation, '##.#%')}; background-color: blue;”. (Note: change “@Evaluation” to match your field’s name).

5. You should now have something like this:


How it works


The graph works by taking the table cell and inserting a span tag within it. The table cell’s width becomes the “100%” width for the bar graph, and we adjust the size of the span tag to be the desired width given the percentage value. By coloring the background of the span tag, we get the familiar bar graph look. With a little creativity you can get very impressive looking graphs like those displayed on the CSS For Bar Graphs entry of the Apples to Oranges Blog. You can even combine this with the ability of the Data View to output JavaScript to create JavaScript based graphs. It’s a really great way to jazz up an otherwise boring view of a list.



Comments (7)

  1. Hi Jon, for my MS Press Book (in German) "SharePoint Designer 2007 – Das Handbuch" I recorded a screencast which shows this kind of customiziation see http://www.sharepointdesignerhandbuch.de/ under screencasts "NC02 Datenvisualisierung" and some other examples

  2. Pranav says:

    this really is a great workarround… u rock

  3. Ben Schlaepfer says:

    I just worked through this today and your tutorial plus a bit of extra CSS has produced excellent results.

    One issue I have is in exporting the Webpart from the Webpart Page that I created it from and importing onto my team site homepage – the page breaks. Even exporting and importing into the same page throws the error page.

    Any ideas why this may be?

  4. Ben Schlaepfer says:

    Hi again.

    I solved my problem re: exporting and importing the web part. I had based the data view on a list view in SPD originally. When I created a new DataFormWebPart from scratch then applied the tutorial to that it worked fine.

    My teamsite now has a funky Milestone Slip Chart based on a simple SharePoint list!

    Thanks for the post.

  5. Sam says:

    Nice work around!

    I do have an issue though, did you try this with 100% complete. It seems to take the full 100% width of the column and ineviably wrap to the second line. I end up with the graph on the second line which spoils the look.

Skip to main content