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 is the 10 steps:
1. Download the fusion charts free version from: http://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:
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).
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="http://teamsites.crescent.com/sites/saltest/Charts/FCF_Column2D.swf?chartWidth=500&chartHeight=400" >
<xsl:text xmlns:ddwrt="http://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:
10. Finally, we got the fusion chart
Related Fusion Chart Articles:
So, Here I'm going to show, how to use fusion charts in SharePoint with simple example.
Here is the 10 steps:
1. Download the fusion charts free version from: http://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:
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>
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="http://teamsites.crescent.com/sites/saltest/Charts/FCF_Column2D.swf?chartWidth=500&chartHeight=400" >
<xsl:text xmlns:ddwrt="http://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="http://teamsites.crescent.com/sites/saltest/FusionCharts/Charts/FCF_Column2D.swf?chartWidth=500&chartHeight=400" > <xsl:text xmlns:ddwrt="http://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:
Wonderfully well explained Salaudeen.. Thanks a lot
ReplyDeleteNO DATA TO DISPLAY. WHY???
ReplyDeleteHi I am unable to render the Y axis...
ReplyDeleteIt shows NAN..
Can you please tell what m i doing wrong
Rishi,
DeleteChange the "Cost" column to Number from Currency!
Hi,
ReplyDeleteThis 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,
DeleteFor PIE Charts, You can cycle colors. Just follow my another article: Create Pie Chart from SharePoint Task list using Fusion Charts
Regards,
Sal
Hi Sal,
ReplyDeleteThanks 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!
DeleteThanks Sal, I hope you are able to post your solution.
ReplyDeleteRegards
Rob
Here is the Post you asked for: Dynamic Fusion Charts from SharePoint 2010 List Data
Delete