WSS Demo

Download this file http://www.visifire.com/downloads/visifire_v1.5.1_with_documentation.zip

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 SPD Code View, replace the <xsl:call-template name="dvt_1"/> line in the <xsl:template match="/"> section with the following (Note: columns in this example are @Budget and @Actual, update these if your list is different)

<script type="text/javascript" src="Visifire.js" mce_src="Visifire.js"></script>                  
<xsl:text disable-output-escaping="yes"><![CDATA[
<script type="text/javascript">
var xmlString =
' <vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts"'
+ ' Theme="Theme2" >'
+ ' <vc:Title Text="Revenue"/>'
+ ' <vc:AxisX Title="Month"/>'
+ ' <vc:AxisY Title="$ Thousands"/>'
+ ' <vc:DataSeries Name="Budget" RenderAs="Column" AxisYType="Primary">'
]]></xsl:text>
<xsl:for-each select="/dsQueryResponse/Rows/Row">
  <xsl:text disable-output-escaping="yes"><![CDATA[ + ' <vc:DataPoint AxisLabel="]]></xsl:text>
<xsl:value-of select="./@Title" />
  <xsl:text disable-output-escaping="yes"><![CDATA[" YValue="]]></xsl:text>
<xsl:value-of select="@Budget" />
  <xsl:text disable-output-escaping="yes"><![CDATA["/>']]></xsl:text>
</xsl:for-each>
<xsl:text disable-output-escaping="yes">
<![CDATA[              
+ ' </vc:DataSeries>'
+ ' <vc:DataSeries Name="Actual" RenderAs="Line" Color="Red" AxisYType="Primary">'
]]></xsl:text>
<xsl:for-each select="/dsQueryResponse/Rows/Row">
  <xsl:text disable-output-escaping="yes"><![CDATA[ + ' <vc:DataPoint AxisLabel="]]></xsl:text>
<xsl:value-of select="./@Title" />
  <xsl:text disable-output-escaping="yes"><![CDATA[" YValue="]]></xsl:text>
<xsl:value-of select="@Actual" />
  <xsl:text disable-output-escaping="yes"><![CDATA["/>']]></xsl:text>
</xsl:for-each>
<xsl:text disable-output-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. -->
<div id="myChart" style="width:500px;height:300px;">
<script language="javascript" type="text/javascript">
 var vChart2 = new Visifire(&quot;Visifire.xap&quot;);
 vChart2.setDataXml(xmlString);
 vChart2.render(&quot;myChart&quot;);
</script> </div>