<!-- 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="600" Height="400" BorderThickness="1" CornerRadius="15" Theme="Theme3" View3D="False" AnimationEnabled="True" Watermark="False" Bevel="False" LightingEnabled="True" >'

+ ' <vc:Chart.AxesX>'

+ ' </vc:Chart.AxesX>'

+ ' <vc:Chart.AxesY>'

+ ' <vc:Axis Interval="50" />'

+ ' </vc:Chart.AxesY>'

 

+ ' <vc:Chart.Titles><vc:Title Text="Closed Tickets vs. New Tickets" FontSize="24" FontColor="#33CCFF" Enabled="True" FontFamily="Arial"/></vc:Chart.Titles>'

+ ' <vc:Chart.Series>'

+ ' <vc:DataSeries LegendText="Closed Tickets" RenderAs="StackedColumn" ShowInLegend="True" Bevel="True" LabelEnabled="True" LabelFontSize="14">'

+ ' <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="@ClosedHelpTickets" />

   <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:DataSeries LegendText="New Tickets" RenderAs="StackedColumn" ShowInLegend="True" Bevel="True" LabelEnabled="True" LabelFontSize="14">'

+ ' <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="@NewHelpTickets" />

   <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;,600,400);

vChart.setDataXml(xmlString);

vChart.render(&quot;VisifireChart1&quot;);

</script> </div>