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).

<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="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">
                 &lt;set name=&apos;<xsl:value-of select=" @Title"/>&apos; color=&apos;1D8BD1&apos; value=&apos;<xsl:value-of select="@Cost"/>&apos;  /&gt;
      </xsl:for-each>   
  </xsl:variable>

 <xsl:variable name="varChartData">
      &lt;graph caption=&apos;Project Cost Chart&apos; xAxisName=&apos;Project Name&apos; yAxisName=&apos;Cost&apos; showNames=&apos;1&apos; decimalPrecision=&apos;0&apos; formatNumberScale=&apos;0&apos; &gt;
      <xsl:value-of select="$varDataset" />
      &lt;/graph&gt;  
      </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&amp;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="&amp;dataXML={$varChartData}&amp;chartWidth=500&amp;chartHeight=400"><param name="quality" value="high" /></param></param>  </object>
      </td>
      </tr>
 </xsl:template>

10. Finally, we got the fusion chart

10 comments:

nelson ebenDecember 31, 2011 at 1:21 PM
Wonderfully well explained Salaudeen.. Thanks a lot
AnonymousMarch 14, 2012 at 4:35 AM
NO DATA TO DISPLAY. WHY???
rishiJune 21, 2012 at 4:48 AM
Hi I am unable to render the Y axis...
It shows NAN..
Can you please tell what m i doing wrong
AnonymousJanuary 16, 2013 at 5:53 PM
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
AnonymousJanuary 16, 2013 at 7:00 PM
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
RobJanuary 21, 2013 at 5:03 PM
Thanks Sal, I hope you are able to post your solution.

Regards

Rob