Create Fancy Flash Charts on SharePoint


21 February 2008

To add fancy charts to SharePoint pages driven by data from either SharePoint, BDC or some other source is actually very easy.

You will need some good Flash Charts I recommend starting with FusionFreeCharts

Chartdemo

Step 1 - Create a SharePoint Docment Library to hold the Flash SWF Files and upload them.

Step 2 - Create a Web Part to Generate the Xml Data For the Flash Chart

Using Visual Studio 2005 and the SharePoint Extensions Create a New WebPart and generate the Xml for the Chart in the Render Method.

Download ChartData.zip

Step 3 - Create a Web Page with SharePoint Designer to output the Xml Data to the Chart

This page should have next to no content i.e. no HTML Markup it would look something like this...

<%@ Page Language="C#" %>
<%@ Register Tagprefix="CD" Namespace="ChartDataProvider" Assembly="ChartData, Version=1.0.0.0, Culture=neutral, PublicKeyToken=9f4da00116c38ec5" %>
<CD:ChartDataProvider runat="server" id="ChartData1" __WebPartId="{BFE5A1BD-85F0-4E13-8756-6B223ECEBF33}" />

Step 4 - Add a Content Editor Web Part to a Page and Configure the Flash Chart.

Edit the Source of the WebPart to be something like this...

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="400" >
    <param name="movie" value="FlashCharts/FCF_MSColumn3D.swf" />
    <param name="FlashVars" value="&dataURL=ChartData.aspx&chartWidth=600&chartHeight=400">
    <param name="quality" value="high" />
    <embed src="FlashCharts/FCF_MSColumn3D.swf" width="600" height="400" flashVars="&dataURL=ChartData.aspx&chartWidth=600&chartHeight=400" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  </object>

That's it real fancy charts in SharePoint you could do the same with Silverlight but I don't know of any free good Chart Controls.