UPDATED: I have updated this post with a little more information on how to achieve this, since on my original post I was being a bit...well, lazy :-)
Okay, so @jpowell490 was asking on the
VisiFire forums about how to create a stacked column/bar chart with VisiFire, but pulling the data from a SharePoint list instead of hard-coded XML. So I quickly threw together a demo which illustrated his exact needs, and provided source code, but I failed to show
how to implement the code. It's funny how I can remember reading posts where someone had dumped a bit of code on there, and feeling very frustrated because they didn't specifically tell me where in the heck to put the code. How easy we forget :-)
So anyway, let me try to step through this for folks who are interested.
Step 1: I'm assuming you already know how to create a SharePoint list with the necessary fields
highlighted in this demo, so I won't cover that.
Step 2: Open SharePoint designer and create a new web part page (or do it through SharePoint and then open designer to edit it).
Step 3: Add a data view to any web part zone, and base it off the custom list you created. Add at least one field to the data view.
Step 4: Look at the code view through SPD of your page, and find the code related to the data view web part you just created. In that section of code you need to find and highlight the following code…and DELETE IT!
<xsl:template match="/">
<xsl:call-template name="dvt_1"/>
</xsl:template>
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">Table</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<table border="0" width="100%" cellpadding="2" cellspacing="0">
<tr valign="top">
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<th class="ms-vh" width="1%" nowrap="nowrap"></th>
</xsl:if>
<th class="ms-vh" nowrap="nowrap">Month</th>
<th class="ms-vh" nowrap="nowrap">New Help Tickets</th>
<th class="ms-vh" nowrap="nowrap">Closed Help Tickets</th>
</tr>
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
</xsl:call-template>
</table>
</xsl:template>
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:for-each select="$Rows">
<xsl:call-template name="dvt_1.rowview"/>
</xsl:for-each>
</xsl:template>
<xsl:template name="dvt_1.rowview">
<tr>
<xsl:if test="position() mod 2 = 1">
<xsl:attribute name="class">ms-alternating</xsl:attribute>
</xsl:if>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<td class="ms-vb" width="1%" nowrap="nowrap">
<span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
</td>
</xsl:if>
<td class="ms-vb">
<xsl:value-of select="@Title"/>
</td>
<td class="ms-vb">
<xsl:value-of select="format-number(@NewHelpTickets, '#,##0.00;-#,##0.00')"/>
</td>
<td class="ms-vb">
<xsl:value-of select="format-number(@ClosedHelpTickets, '#,##0.00;-#,##0.00')"/>
</td>
</tr>
</xsl:template>
Yes, delete it! Don't worry--we're going to add some other code instead.
Step 5: Paste the following code into the section you just deleted--naturally, placement is key, so make sure you put it in the right spot:
<!-- 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("SL.Visifire.Charts.xap",600,400);
vChart.setDataXml(xmlString);
vChart.render("VisifireChart1");
</script> </div>
</xsl:template>
Step 6: The code I have provided refers to specific list fields which I created in my custom list. If your fields are different, then obviously replace those within the code. @Title refers to the "Month" column, and the other two columns (@NewHelpTickets and @ClosedHelpTickets) are self-explanatory.
Step 7: Fire away! You're done.
So here's is a live example for you to view as well, which implements the exact code mentioned above. I hope this helps--enjoy!