Quantcast
Viewing all articles
Browse latest Browse all 1058

Dynamic Fusion Charts from SharePoint 2010 List Data

I said it before, and I'm saying it again: "Fusion Charts is a great product!" .In my earlier fusion chart implementations, most of the cases, charts are generated with predefined category. In some cases, I've fusion charts generated for SharePoint 2010 with dynamic categories as well.

Here is one among them: Had a List for tracking project risks and the requirement is to generate a Pie chart based on Risk count. Here is my "Risk Metrics" List structure. Among bunch of fields, I took only "Project Name" field and calculate its count for my requirement.

Steps to Create Dynamic Fusion Charts from SharePoint List
Simple! just download the Fusion Chart Free version and upload the SWF files to a SharePoint Document library. Create a Web Part Page, Insert a Empty Data View Web Part, Drag & Drop Relevant fields to the web part (in my case its "Project Name"), Change the XSL accordingly. Refer my existing posts on Fusion Chart for SharePoint - step by step procedures.

XSL for Generating Dynamic Fusion Charts from SharePoint List Data:
After Removing everything between
<xsl:template name="dvt_1.body"><xsl:param name="Rows"/>
and
</xsl:template>

<xsl:template name="dvt_1.body"><xsl:param name="Rows"/><xsl:variable name="varColorString" select="'XXXXXXAFD8F8F6BD0F8BBA00FF8E46008E8ED646468E468E588526B3AA00008ED69D080DA186BE'" /><xsl:variable name="varChartValue"><xsl:for-each select="$Rows[not(preceding-sibling::Row/@Project_x0020_Name = @Project_x0020_Name ) and @Project_x0020_Name!='']"><xsl:sort select="@Project_x0020_Name"/> <xsl:variable name="varTemp" select="@Project_x0020_Name"/>&lt;set name=&apos;<xsl:value-of select="translate(@Project_x0020_Name,'&amp;','-')"/>&apos; value=&apos;<xsl:value-of select=" count($Rows[@Project_x0020_Name = $varTemp])"/>&apos; color=&apos;<xsl:value-of select="substring($varColorString, position()*6+1,6)" />&apos; /&gt; </xsl:for-each><br/></xsl:variable><xsl:variable name="varChartData">&lt;graph caption=&apos;Open risks &apos; xAxisName=&apos;Project Name&apos; yAxisName=&apos;Count&apos; showNames=&apos;1&apos; decimalPrecision=&apos;0&apos; formatNumberScale=&apos;0&apos; pieYScale=&apos;45&apos; pieRadius=&apos;70&apos; animation=&apos;1&apos; shadowXShift=&apos;4&apos; shadowYShift=&apos;4&apos; shadowAlpha=&apos;40&apos; pieFillAlpha=&apos;95&apos; &gt;<xsl:value-of select="$varChartValue" />&lt;/graph&gt;   </xsl:variable><tr><td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="400"><param name="movie" value="http://sharepoint.crescent.com/charts/FCF_Pie2D.swf?chartWidth=500&amp;chartHeight=400" ><xsl:text xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:whitespace-preserve="yes" xml:space="preserve"></xsl:text><param name="FlashVars" value="&amp;dataXML={$varChartData}&amp;chartWidth=500&amp;chartHeight=400"><param name="quality" value="high" /></param></param></object></td></tr> </xsl:template>

Chart Output:


Image may be NSFW.
Clik here to view.

Viewing all articles
Browse latest Browse all 1058

Trending Articles