Vertical Bar Graph with XSLT in Data View Web Part (DVWP)

As part of a recent project, I needed to create a dashboard page for the requests for executive management. However, since the data was in a list and not a database this was easier said than done. So I started off by researching my options and I found this post on MSDN. This post explains very well how to modify the XSL of a DVWP to create a bar graph. I used this post and the code below to do as such. You will noticed that I overwrote the .ms-selected CSS class so that I could control the image as well as the colors of the chart.

Example Bar Graphs:

My second issue was that I wanted a vertical bar graph too. I was unable to find an example anywhere on the web, so I sat down and started playing with the code.

I used the code from the MSDN article, but overwrite the CSS class in order to control the color of the chart:

.ms-selected {
background-color: #6a9a21;
border-bottom: 1px solid #6a9a21;
border-top: 1px solid #FFFFFF;

Now to change the above chart into a vertical bar chart we have to replace three sections of code.

The first is the CSS:
I created a new class called .ms-selectedc and the c stands for column.

.ms-selectedc {
background-color: #6a9a21;
border-left: 0px solid #6a9a21;
border-right: 0px solid #FFFFFF;

We have to replace the main table with the following code:

Replace –

With –

Finally we have to change the XSL that creates each bar.

Replace –

With –

Depending on the length of the column titles, you may have to play with the height and width of the table where the title and percentage is created.

If anyone has any suggestions for more efficient code, please let me know. I also suggest filtering out unneeded data in the CAML so as reduce load on the client.

Vertical Graph:

And my dashboard:

2 thoughts on “Vertical Bar Graph with XSLT in Data View Web Part (DVWP)”

  1. Interesting exercise. Now, it would be easier to just render the data in a table, and append a JavaScript charting tool to your xslt (like for example the jQuery Visualize plugin).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.