Friday, July 9, 2010

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>

You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.

Check out these SharePoint products:

No comments :

Post a Comment

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...