Skip Ribbon Commands
Skip to main content
 

 Source SharePoint List Data

 
  
  
  
  
100
80
  
125
95
  
175
135
Check Out VisiFire
 

 VisiFire Stacked Column Chart

 
 

 Source Code for Chart

 
<!-- 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>