VisiFire Open Source Silverlight Charting in SharePoint

I was doing some research on Silverlight charting solutions for SharePoint when I stumbled across VisiFire an open source self contained charting solution built with Silverlight. If you haven’t seen VisiFire before, it’s worth checking out, their gallery page shows a number of really slick animated charts that are dead simple to use with XML data (without writing any Silverlight code).

Also, I’m not sure what rock I was under when the SharePoint Designer team posted this blog entry on integrating the Data View Web Part with VisiFire using XSLT. Their example uses the 1.0 version of VisiFire, so I decided to do a little poking around to see if I could get the 2.0.9 Beta version (hopefully my XSLT will also work when the official 2.0 version is released). Here are instructions for getting it to work in SharePoint (influenced HEAVILY by the original post by the SharePoint Designer Team:

1. Download the 2.0.9 Beta version (or whatever the latest is) from here: http://visifire.com/download_silverlight_charts.php




2. Create a page in SharePoint that will hold a Data View Web Part




3. Create a simple list with a “Title” field (which is already created by default) and a “Value” field of type Number




4. Enter a few rows of fake data into the list




5. Unzip the VisiFire package that you downloaded and grab “Visifire2.js” and “SL.Visifire.Charts.xap” and add them to the same location as the page you just created in your SharePoint site




6. Add the Data View Web Part to you page. You can use SharePoint Designer for this, with a Web Part Zone selected, from the top menu click Data View > Insert Data View. From the Data Source Library in the right hand task pane select your list and click Show Data. Then select both the Title and Value fields and add them to the Data View.




7. Next, make sure you are in Code View and replace the first xsl:template:
   
   
   
   
   <xsl:template match="/">
   
   <xsl:call-template name="dvt_1"/>
   
   </xsl:template>
   
   
   
   
   With this XSLT:
   
   
   
   
   
   <xsl:template match="/">
   
   <!-- Load the chart tools -->
   
   <script type="text/javascript" src="Visifire2.js"></script> <!-- Create the JavaScript variable that holds the data to plot. -->
   
   <!-- Note the xsl:for-each statement which loops over all the -->
   
   <!-- list items and creates the necessary DataPoint entries -->
   
   <!-- in the Chart XML. -->
   
   <xsl:text disable-output-escaping="yes"><![CDATA[
   
   <script type="text/javascript">
   
   var xmlString =
   
   ' <vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"'
   
   + ' Width="500" Height="300" Theme="Theme2" BorderBrush="Gray" BorderThickness="0" Watermark="False" >'
   
   + ' <vc:Chart.Titles><vc:Title Text="Chart Title"/></vc:Chart.Titles>'
   
   + ' <vc:Chart.Series>'
   
   + ' <vc:DataSeries RenderAs="Pie" ShowInLegend="True" Bevel="True">'
   
   + ' <vc:DataSeries.DataPoints>'
   
   ]]></xsl:text>
   
   <xsl:for-each select="/dsQueryResponse/Rows/Row">
   
   <xsl:text disable-output-escaping="yes"><![CDATA[ + ' <vc:DataPoint AxisXLabel="]]></xsl:text>
   
   <xsl:value-of select="./@Title" />
   
   <xsl:text disable-output-escaping="yes"><![CDATA[" YValue="]]></xsl:text>
   
   <xsl:value-of select="@Value" />
   
   <xsl:text disable-output-escaping="yes"><![CDATA[" LabelText="]]></xsl:text>
   
   <xsl:value-of select="@Value" />
   
   <xsl:text disable-output-escaping="yes"><![CDATA[" Exploded="True]]></xsl:text>
   
   <xsl:text disable-output-escaping="yes"><![CDATA["/>']]></xsl:text>
   
   </xsl:for-each>
   
   <xsl:text disable-output-escaping="yes">
   
   <![CDATA[
   
   + ' </vc:DataSeries.DataPoints>'
   
   + ' </vc:DataSeries>'
   
   + ' </vc:Chart.Series>'
   
   + ' </vc:Chart>';
   
   
   </script>
   
   ]]></xsl:text>
   
   <!-- Create the div to hold the chart and then run -->
   
   <!-- the JavaScript code to actually show the chart. -->
   
   <div id="VisifireChart1">
   
   <script language="javascript" type="text/javascript">
   
   var vChart = new Visifire2(&quot;SL.Visifire.Charts.xap&quot;,500,300);
   
   vChart.setDataXml(xmlString);
   
   vChart.render(&quot;VisifireChart1&quot;);
   
   </script> </div>
   
   </xsl:template>
   
   
   
   



8. Save the file and refresh the page in a browser and you should see a pie chart come to life animated. If you make any mistakes the VisiFire widget is kind enough to give you a line number and position where it blew up, so that can be a help in tracking down typos in the notoriously picky XSLT. From here you can check out the other charts and other options via the VisiFire documentation which btw is really easy to read.