jqPlotとはグラフを表示するためのライブラリです。ちょっとjqPlotを使ったコードをさわることがあったので、きちんと使い方を勉強してみることにしました。
ちなみにjqPlotを利用すると次のようなグラフを表示できます。
使い方を調べるにあたり何か参考になるサイトはないかなと検索してみると、こちらのサイトですごくわかりやすく説明されていました。今回はこのサイトを参考にしてVisualforceページでjqPlotによるグラフの表示を試しています。
jqPlotのライブラリはjqPlotのサイトからダウンロードできます。
次の画面が表示されたら、最新版のZipファイルをクリックしてダウンロードすればいいみたいです。
あとはそのZipファイルを静的リソースにアップロードすれば準備完了です。そのままアップロードしても良いのですが今回は「jquery.jqplot.1.0.8r1250」フォルダ内の「dist」フォルダを圧縮してアップロードしています。(どの階層のフォルダを圧縮したかによって静的リソースから呼び出すときのパスの長さに影響します。)
Zipファイルはこんな感じで名前を付けて静的リソースにアップロードします。
これで準備は完了です。
上記サイトに記載してあったサンプルコードを元にVisualforceページで表示できるようにしてみました。コードはこんな感じです。
jqPlot側のコードについては上記サイトに詳しく説明がありますので、Visualforceページで表示する箇所について記載しておきたいと思います。
とりあえず忘れやすい気がしたのが、jQuery自体を読み込むところです。これがないと表示されません。jQuery自体は次の方法で読み込むのが簡単だと思います。
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
jqPlot利用する際に最低でも必要なのが次の2つです。きちんとapexタグを利用して読み込みます。
<apex:stylesheet value="{!URLFOR($Resource.jqPlot, 'dist/jquery.jqplot.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jqPlot,'dist/jquery.jqplot.min.js')}" />
こちらの2つは拡張機能をPluginから読み込むためのものです。ハイライトとズームの機能を確認できます。
<apex:includeScript value="{!URLFOR($Resource.jqPlot,'dist/plugins/jqplot.cursor.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jqPlot,'dist/plugins/jqplot.highlighter.min.js')}" />
ちなみにグラフに表示するための値は次の処理でセットしています。
var graphData = [
[3,7,9,1,4,6,8,2,5],
[4,8,6,3,6,3,5,7,9]
];
実際にSalesforceのデータを表示する場合は、@RemoteActionを使用して値を取得しセットする流れになると思います。
VisualforceページでのjqPlotの基本的な使い方はこんな感じでした。あとはjqPlotで用意されたPluginを利用することでより多くの機能を追加して便利なグラフにすることが可能です。
jqPlotはとても便利でしたが、JavaScriptで実装する必要があります。JavaScriptの場合は実装時にエラーが発生した場合、個人的にですが原因を調べるとき少し大変だと思っています。
ApexでもWinter'13からapex:chartによるグラフ表示がサポートされているので高度なグラフである必要がなければapex:chartで実装した方が保守・改修がしやすいんじゃないかと思います。apex:chartもアニメーションが付いたりしていてなかなかカッコ良かったです。
