Charting Data: Keeping it simple.

I see a lot on charting data in SharePoint, and out.

In my opinion it boils down to three things

  1. what have you got
  2. how did you get it
  3. how are you going to show it

The first two are data related and require some questions.

  • Is it flat data that can “just be charted”?
  • If not, what needs to be done?
  • Is it interactive?
  • If it is, in what way?
  • etc

The third can get complicated as it can delve into what one can only call, the aesthetics of the situation. Some people love pie charts with garish colours. Others simply cannot understand radar charts. One product that works very nicely, has lots of options, and has a nice cost at $0 under the GPL, is Visifire.

http://visifire.com/silverlight_charts_gallery.php

Visifire is a set of open source data visualization controls – powered by Microsoft® Silverlight™ & WPF. It is a multi-targeting control which can be used in both WPF & Silverlight applications. Using the same API, charts in both Silverlight & WPF environments can be created within minutes. Visifire can also be embedded in any webpage as a standalone Silverlight App. Visifire is independent of server side technology. It can be used with

  • ASP.Net
  • PHP
  • JSP
  • ColdFusion
  • Ruby on Rails
  • Simple HTML
  • Etc.
This control can be easily used to chart data in a list.

Let me show you how…

  • Upload the Visifire files to your SharePoint document library. Specifically, copy the VisiFire.xap and .js files into the document library that will hold your web part page.
  • Add a Data View web part for the list containing the data you wish to graph to the web part page using SharePoint Designer.
  • In the Code View, replace the line in the section with the following

Note:

  1. Columns in this example are @Budget and @Actual, update these if your list is different
  2. I have replaced “<" with "< " so that the code will get presented correctly in the browser

< type="text/javascript" src="Visifire.js" mce_src="Visifire.js">< /script>
< escaping="yes">< ![CDATA[ < type="text/javascript">
var xmlString =
‘ < vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" theme="Theme2">‘
+ ‘ < text="Revenue">‘
+ ‘ < title="Month">‘
+ ‘ < title="$ Thousands">‘
+ ‘ < name="Budget" renderas="Column" axisytype="Primary">‘
]]>< /xsl:text>
< select="/dsQueryResponse/Rows/Row">
< escaping="yes">< ![CDATA[ + ' < axislabel="">< /xsl:text>
< select="./@Title">
< escaping="yes">< ![CDATA[" YValue="]]>< /xsl:text>
< select="@Budget">
< escaping="yes">< ![CDATA["/>‘]]>< /xsl:text>
< /xsl:for-each>
< escaping="yes">
< ![CDATA[ + ' < /vc:DataSeries>‘
+ ‘ < name="Actual" renderas="Line" color="Red" axisytype="Primary">‘
]]>< /xsl:text>
< select="/dsQueryResponse/Rows/Row">
< escaping="yes">< ![CDATA[ + ' < axislabel="">< /xsl:text>
< select="./@Title">
< escaping="yes">< ![CDATA[" YValue="]]>< /xsl:text>
< select="@Actual">
< escaping="yes">< ![CDATA["/>‘]]>< /xsl:text>
< /xsl:for-each>
< escaping="yes">
< ![CDATA[ + ' < /vc:DataSeries>‘
+ ‘ < /vc:Chart>‘;
< /script>
]]>< /xsl:text>
< !-- Create the div to hold the chart and then run -->
< !-- the JavaScript code to actually show the chart. -->
< id="myChart" style="width:500px;height:300px;">
< language="javascript" type="text/javascript">
var vChart2 = new Visifire(“Visifire.xap”);
vChart2.setDataXml(xmlString);
vChart2.render(“myChart”);
< /script> < /div>