読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:jqPlotの使い方を勉強してみました

jqPlotとはグラフを表示するためのライブラリです。ちょっとjqPlotを使ったコードをさわることがあったので、きちんと使い方を勉強してみることにしました。


ちなみにjqPlotを利用すると次のようなグラフを表示できます。

f:id:tyoshikawa1106:20131214220102p:plain


使い方を調べるにあたり何か参考になるサイトはないかなと検索してみると、こちらのサイトですごくわかりやすく説明されていました。今回はこのサイトを参考にしてVisualforceページでjqPlotによるグラフの表示を試しています。

jqPlotで簡単でリッチなグラフを作成 - Taste of Tech Topics


jqPlotのライブラリはjqPlotのサイトからダウンロードできます。

jqPlot Charts and Graphs for jQuery

f:id:tyoshikawa1106:20131214220812p:plain


次の画面が表示されたら、最新版のZipファイルをクリックしてダウンロードすればいいみたいです。

f:id:tyoshikawa1106:20131214221139p:plain


あとはそのZipファイルを静的リソースにアップロードすれば準備完了です。そのままアップロードしても良いのですが今回は「jquery.jqplot.1.0.8r1250」フォルダ内の「dist」フォルダを圧縮してアップロードしています。(どの階層のフォルダを圧縮したかによって静的リソースから呼び出すときのパスの長さに影響します。)

f:id:tyoshikawa1106:20131214221459p:plain


Zipファイルはこんな感じで名前を付けて静的リソースにアップロードします。

f:id:tyoshikawa1106:20131214222025p:plain


これで準備は完了です。


上記サイトに記載してあったサンプルコードを元に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もアニメーションが付いたりしていてなかなかカッコ良かったです。

tyoshikawa1106/Visualforce_JqPlotChart · GitHub