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: http://www.fusioncharts.com/free/
2. Create a new document library
3. Upload the .SWF files from fusion charts into SharePoint Library.

fusion chart for sharepoint 2010

4. Create a simple list (Here “Project Cost” with 2 columns, say: Title, Cost).

fusion chart sharepoint list

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.

fusion chart sharepoint designer
use fusion chart sharepoint

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:

fusion chart sharepoint 2007

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">
                 &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>

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&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> 

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

fusion chart sharepoint 2007

Related Fusion Chart Articles:

Salaudeen Rajack

Information Technology Professional with Two decades of SharePoint Experience.

10 thoughts on “Creating Fusion Charts in SharePoint with SharePoint Designer – Simple way

  • January 21, 2013 at 11:33 AM

    Thanks Sal, I hope you are able to post your solution.

    Regards

    Rob

    Reply
  • January 16, 2013 at 1:30 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

    Reply
    • January 20, 2013 at 12:29 PM

      I understand Rob! Yes, You can Dynamically set Chart Categories and Colors in XSL!

      Reply
  • January 16, 2013 at 12:23 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

    Reply
  • June 21, 2012 at 12:18 AM

    Hi I am unable to render the Y axis…
    It shows NAN..
    Can you please tell what m i doing wrong

    Reply
    • June 21, 2012 at 8:44 AM

      Rishi,

      Change the “Cost” column to Number from Currency!

      Reply
  • March 13, 2012 at 11:05 PM

    NO DATA TO DISPLAY. WHY???

    Reply
  • December 31, 2011 at 7:51 AM

    Wonderfully well explained Salaudeen.. Thanks a lot

    Reply

Leave a Reply