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>

No comments:

Please Login and comment to get your questions answered!

Powered by Blogger.