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
<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>

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

Leave a Reply