Tuesday, February 16, 2010

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.

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:
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.honeywell.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.honeywell.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:



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

10 comments :

  1. Wonderfully well explained Salaudeen.. Thanks a lot

    ReplyDelete
  2. NO DATA TO DISPLAY. WHY???

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

    ReplyDelete
    Replies
    1. Rishi,

      Change the "Cost" column to Number from Currency!

      Delete
  4. 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

    ReplyDelete
    Replies
    1. 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

      Delete
  5. 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

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

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

    Regards

    Rob

    ReplyDelete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...