VisiFire Open Source Silverlight Charting in SharePoint 10

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:



    With this XSLT:

    var xmlString = ' ' + ' ' + ' ' + ' ' + ' ' ]]>

    ']]>

    ' + ' ' + ' ' + ' ';
    ]]>


  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.

10 thoughts on “VisiFire Open Source Silverlight Charting in SharePoint

  1. Reply Jan Tielens Feb 10,2009 2:06 am

    Hi,

    I’m also a Visifire fan! 🙂 I’ve actually wrapped the Visifire library in a couple of web parts that can be configured pretty easily, so you don’t have to use the SPD (of course you do need to install the web parts). More info: http://weblogs.asp.net/jan/archive/2009/01/22/new-release-of-the-smarttools-for-sharepoint-project.aspx

    Download from CodePlex: http://codeplex.com/smarttools

  2. Reply Jim Parker May 18,2009 1:52 pm

    Hello: I’m trying your instructions here but what I end up getting is the pie graph certainly, but only the first record from the list is represented (and is taking up 100% no matter what). Anything you can think of that I might be doing wrong? Thanks

  3. Reply Jim Parker May 18,2009 2:14 pm

    Problem solved! Evidently the data view was configured to only show 1 record at a time (pagination). Boy do I feel dumb 🙂

    Works great now–Thanks for the great post!

  4. Reply Dennis Jun 7,2009 7:12 pm

    I’m close. I get the chart title, and legend, but no values and pie chart is not displayed. I verified using the dataview in SP Designer prior to modifying the code.
    Any suggestions?

    Thanks
    Dennis

  5. Reply Dennis Jun 7,2009 7:22 pm

    Ok, got it.
    I originally created the list with Title and value (lower case). I modified the list, but the designer kept putting in a lower case v. I deleted the list and re-created. Problem resolved.

    thanks.
    Dennis

  6. Reply Paul Jun 24,2009 1:59 pm

    Hi there. I have a chart working fine on a web part page using the data view web aprt. The problem I having is that I am trying to add another chart on the same page using a data view web part. The end result will be mutiple charts on one page. Is this possible? The first chart I added to the data view is the only one rendered.

  7. Reply Anonymous Jun 25,2009 9:47 am

    figured it out. This section of code needed to be updated according to the number of charts I wanted on the page.

    vChart.render(“VisifireChart1”);

  8. Reply Anonymous Jun 25,2009 3:08 pm

    Many thnaks you saved me many hours.

    Has any one got this working with a SQL data view ?

  9. Reply Svendsen Aug 15,2009 11:15 pm

    Ok, I can;t seem to get this working. I get the legend and chart title but no graph. I also get no error. I am using the latest code 2.2.5

    Your help is greatly appreciated.

    I am also using Jan’s web part with success but need to add more chart functionality and don’t fully understand the XAML file he uses.

Leave a Reply