Dynamic Fusion Charts from SharePoint 2010 List Data
I said it before, and I’m saying it again: “Fusion Charts is a great product!”. In my earlier fusion chart implementations, in most cases, charts are generated with predefined categories. In some cases, I’ve also generated fusion charts for SharePoint 2010 with dynamic categories.
How to use the fusion chart in SharePoint 2010?
Here is one among them: I had a List for tracking project risks, and the requirement was to generate a Pie chart based on Risk count. Here is my “Risk Metrics” List structure. I took only the “Project Name” field among the fields and calculated its count for my requirement.
Steps to Create Dynamic Fusion Charts from SharePoint List:
Simple! Download the Fusion Chart Free version and upload the SWF files to a SharePoint Document library. Create a Web Part Page, insert an Empty Data View Web Part, Drag & Drop Relevant fields to the web part (in my case, its “Project Name”), and Change the XSL accordingly. Refer to my existing posts on Fusion Chart for SharePoint – step by step procedures.
XSL for Generating Dynamic Fusion Charts from SharePoint List Data:
After Removing everything between
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
and
</xsl:template>
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:variable name="varColorString" select="'XXXXXXAFD8F8F6BD0F8BBA00FF8E46008E8ED646468E468E588526B3AA00008ED69D080DA186BE'" />
<xsl:variable name="varChartValue">
<xsl:for-each select="$Rows[not(preceding-sibling::Row/@Project_x0020_Name = @Project_x0020_Name ) and @Project_x0020_Name!='']">
<xsl:sort select="@Project_x0020_Name"/>
<xsl:variable name="varTemp" select="@Project_x0020_Name"/>
<set name='<xsl:value-of select="translate(@Project_x0020_Name,'&','-')"/>' value='<xsl:value-of select=" count($Rows[@Project_x0020_Name = $varTemp])"/>' color='<xsl:value-of select="substring($varColorString, position()*6+1,6)" />' />
</xsl:for-each>
<br/>
</xsl:variable>
<xsl:variable name="varChartData">
<graph caption='Open risks ' xAxisName='Project Name' yAxisName='Count' showNames='1' decimalPrecision='0' formatNumberScale='0' pieYScale='45' pieRadius='70' animation='1' shadowXShift='4' shadowYShift='4' shadowAlpha='40' pieFillAlpha='95' >
<xsl:value-of select="$varChartValue" />
</graph>
</xsl:variable>
<tr>
<td>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="400">
<param name="movie" value="https://sharepoint.crescent.com/charts/FCF_Pie2D.swf?chartWidth=500&chartHeight=400" >
<xsl:text xmlns:ddwrt="https://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:whitespace-preserve="yes" xml:space="preserve">
</xsl:text>
<param name="FlashVars" value="&dataXML={$varChartData}&chartWidth=500&chartHeight=400"><param name="quality" value="high" /></param></param>
</object>
</td>
</tr>
</xsl:template>
Chart Output:
Refer to my old posts on Fusion Charts for more info:
I am facing error