Bar Chart to Show Progress with XSL-CSS Trick

We can generate the simple Bar chart based on SharePoint list data.

Here is how: Just create a list with desired fields, then drop a dataview webpart with the list. Here is the code to generate bar charts. Place them inside the Dataview webpart in appropriate place.

Bar Chart - Progress in SharePoint with CSS
<td>
<span style="width:{format-number(@Completed, '##.#%')}; background-color:blue;"></span></td><td>
<DIV style="position:relative;"><DIV style="background-color:green; width:{format-number(@Completed,'##.#%')}"></DIV>
<DIV style='position:absolute; top:0px;'><xsl:value-of
select="format-number(@Completed, '##.#%')"/></DIV>
</DIV></td>

Salaudeen Rajack

Information Technology Professional with Two decades of SharePoint Experience.

Leave a Reply