Creating a Dashboard (KPI like bar graph) view with Dataview webpart in Sharepoint 2007
I had a requirement where I had to show the values from a sharepoint custom list like a bar graph. So basically instead of plain number I wanted to show it as a bar Graph with the varying width of that column as it should appear like a progress bar. The simplest thing that I did to achieve this requirement was to use a Sharepoint Dataview webpart to show the contents of my list and then instead of showing the value of a numeric column I would convert it into a DIV tag and control the width of the column dynamically for each row.
So basic things first when I add my Dataview webpart for a custom list using Sharepoint designer, the numeric column appears like following in the code view:
<xsl:value-of />
1. Now the next thing I do is to create a simple style named graph in my Sharepoint Designer code-view. The style elements would something like following:
<style>
.graph {
position: relative;
width: 220px;
border: 1px solid blue;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: blue;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }
</style>
2. Now copy this style and dump inside the code view for that page.
3. Now replace the <xsl:value of @FieldName> with a DIV tag. Paste in the div, replacing the <xsl:value-of /> for the numeric column with the div, something like this (I am assuming that your field would be a percentage field and not pure numeric one):
<div class="graph">
<strong class="bar" style="width: {format-number(@NumericFieldName, "#,##0.%;-#,##0.%")}"><xsl:value-of select="format-number(@NumericFieldName, "#,##0.%;-#,##0.%")" /></strong>
</div>
4. That’s it save the work and you are done J. Your bar graph is now visible on the page inside a Dataview webpart something like the one available on the FAB 40 templates (Budgeting and Tracking Multiple Projects):
