リストの値をグラフ化
日曜日, 8 月 31st, 2008
リストの値を利用してグラフを作成したいってことありませんか？Excel Servicesを利用する場合は、リストの値をExcelで取得するという仕組みが必要になってなんだかしんどい感じです。で、実はSharePoint Designer Team BlogにSilverlightを利用したリストの値をグラフ化するという記事がありました。ちなみに以下の感じになります（値とか適当ですので・・・）。
ちなみに、図をクリックすると詳細がわかります。
上の図のコンポーネントはvisifireが出しているsilverlightコンポーネントです。このコンポーネントはHTMLで吐き出された値をJavascriptで加工し、グラフ化するというものになります。ですので、MOSSで利用する際は、データビューを利用して、リストの値をXMLとして吐き出し、そのデータをこのコンポーネントで利用するという形になります。
データを表示するページに、visifire.jsとvisifire.xapを同じディレクトリに配置し、その後、データビューの下記のコードを（この時点では、データビューにグラフ化したいリストをデータソースとして設定します。
<xsl:template match="/">
<xsl:call-template name="dvt_1"/>
</xsl:template>
以下のコードに置き換えます（下記例は、TitleとValueというプロパティを利用するものです）。
<xsl:template match="/">
<!-- Load the chart tools -->
<script type="text/javascript" src="Visifire.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=Visifire.Charts"' + ' Theme="Theme1" AnimationType="Type4" >' + ' <vc:Title Text="Visifire Pie Chart"/>'+' <vc:DataSeries RenderAs="Pie" ShowInLegend="False" Bevel="False">']]>
</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="@Value" />
<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("Visifire.xap");
vChart2.setDataXml(xmlString);
vChart2.render("myChart");
</script></div></xsl:template>
で、完成です。
ちなみに、visifireにはいろいろなテンプレートが用意されているので、受け渡すデータさえ、きちんと設定すれば棒グラフ折れ線などが利用できます。
