Creating Fusion Charts in SharePoint with SharePoint Designer – Simple way
Fusion Charts is a great free product, it helps us to create animated & interactive charts for web & enterprise applications. We can use fusion charts to display our SharePoint list data!
So, Here I’m going to show, how to use fusion charts in SharePoint with simple example.
Here are the 10 steps to Build Fusion Charts from SharePoint List Data:
1. Download the fusion charts free version from: https://www.fusioncharts.com/free/
2. Create a new document library
3. Upload the .SWF files from fusion charts into SharePoint Library.
4. Create a simple list (Here “Project Cost” with 2 columns, say: Title, Cost).
5. Open the SharePoint designer, Create a new Aspx page, Drop a Dataview webpart, Drag and Drop the Title and Cost columns into data view web part.
6. Lets do some clean up. Delete everything in between
<xsl:template name=”dvt_1.body”>
<xsl:param name=”Rows”/>
and
</xsl:template>
Now, your code should look like this:
7. Fusion Charts follows a specific format XML for the Data input. Say for example, for column charts, we need to give the input in the below format: (This format differs from one chart type to another. You can refer the fusion chart documentation or sample charts for the format).
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units'
decimalPrecision='0' formatNumberScale='0' chartRightMargin='30'>
<set name='Project A' value='1000' color='AFD8F8' />
<set name='Project B' value='2000' color='F6BD0F' />
<set name='Project C' value='3000' color='8BBA00' />
<set name='Project D' value='4000' color='FF8E46'/>
</graph>
8. So now, we are going to use two XSL variables: varDataset and varChartData to frame the XML. Insert the below code just below
<xsl:template name=”dvt_1.body”>
<xsl:param name=”Rows”/>
<xsl:variable name="varDataset">
<xsl:for-each select="$Rows">
<set name='<xsl:value-of select=" @Title"/>' color='1D8BD1' value='<xsl:value-of select="@Cost"/>' />
</xsl:for-each>
</xsl:variable>
<xsl:variable name="varChartData">
<graph caption='Project Cost Chart' xAxisName='Project Name' yAxisName='Cost' showNames='1' decimalPrecision='0' formatNumberScale='0' >
<xsl:value-of select="$varDataset" />
</graph>
</xsl:variable>
9. Now, we need the code, which renders our chart. Insert the below code.
<tr>
<td>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="400">
<param name="movie" value="https://teamsites.crescent.com/sites/saltest/Charts/FCF_Column2D.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>
So the complete XSL code would be:
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:variable name="varDataset">
<xsl:for-each select="$Rows">
<set name='<xsl:value-of select=" @Title"/>' color='1D8BD1' value='<xsl:value-of select="@Cost"/>' />
</xsl:for-each>
</xsl:variable>
<xsl:variable name="varChartData">
<graph caption='Project Cost Chart' xAxisName='Project Name' yAxisName='Cost' showNames='1' decimalPrecision='0' formatNumberScale='0' >
<xsl:value-of select="$varDataset" />
</graph>
</xsl:variable>
<tr>
<td>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="400">
<param name="movie" value="https://teamsites.crescent.com/sites/saltest/FusionCharts/Charts/FCF_Column2D.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>
10. Finally, we got the fusion chart
Related Fusion Chart Articles:
Thanks Sal, I hope you are able to post your solution.
Regards
Rob
Here is the Post you asked for: Dynamic Fusion Charts from SharePoint 2010 List Data
Hi Sal,
Thanks for your prompt reply. Your method requires that the number of sectors in the pie chart is hard coded. My pie charts have a variable number of sections and what I would like to be able to do is colour these in using a list of colours held in a variable (in my example “Colours”), do you know how this can be done?
Regards
Rob
I understand Rob! Yes, You can Dynamically set Chart Categories and Colors in XSL!
Hi,
This is brilliant and easy to use, but is there a simple way to get each column a different colour? This would be particularly useful for pi charts.
I have tried:
xsl:variable name=”Colours”>
Item>FF9966/Item>
Item>FF0000/Item>
Item>006F00/Item>
Item>0099FF/Item>
Item>CCCC00/Item>
/xsl:variable>
xsl:variable name=”varDataset”>
xsl:for-each select=”$Rows”>
set name=’xsl:value-of select=” @Source”/>’ color=’xsl:value-of select=”item[number($Colours)]”/> ‘ value=’xsl:value-of select=”count(key(‘Area’,@Source))”/>’ />
/xsl:for-each>
/xsl:variable>
This only gives the first colour in the variable, any clues on how to cycle through?
Thanks
Rob
Yes Rob,
For PIE Charts, You can cycle colors. Just follow my another article: Create Pie Chart from SharePoint Task list using Fusion Charts
Regards,
Sal
Hi I am unable to render the Y axis…
It shows NAN..
Can you please tell what m i doing wrong
Rishi,
Change the “Cost” column to Number from Currency!
NO DATA TO DISPLAY. WHY???
Wonderfully well explained Salaudeen.. Thanks a lot