jqPlotプラグインは、グラフ（チャート、図表）を生成するjQueryプラグイン。
折れ線グラフ、棒グラフ、円グラフ、ドーナツグラフ、バブルチャートなどを、簡単に描ける。
オプションも豊富だ。
導入
2012年2月6日現在の最新版は、「1.0」なので、「jquery.jqplot.1.0.0b2_r1012.zip」をダウンロード。
解凍すると、ファイルの多さに驚くかもしれないが、下記の実装例（サンプル）のような折れ線グラフを作るのに、最低限必要なファイルは、「jquery.jqplot.min.js」と、「jquery.jqplot.min.css」の２つだけ。IE9より前のバージョンのIEにも対応させる場合は、「excanvas.min.js」も必要だ。
「plugins」フォルダに入っているJavascriptファイルは、グラフの種類を変更したり、グラフをカスタマイズしたい時に必要なことがある。
実装例（サンプル）
実装例（サンプル）について
実装例（サンプル）のソースコードについては、こちら。
使い方
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
カスタマイズ時には、上記以外に、「plugins」フォルダに入っているJavascriptファイルが必要なことがある。
JavaScript
jQuery( function() {
jQuery . jqplot(
'グラフを表示する要素のID',
[
[ 系列A ],
[ 系列B ],
[ 系列C ]
],
{
オプション
}
);
} );
</script>
jqplotの１つ目の引数には、グラフを表示させる要素のIDを指定。
jqplotの２つ目の引数には、グラフにする系列データを、配列で指定。データの指定方法は、グラフの種類により異なる。
jqplotの３つ目の引数には、オプションを指定。
HTML
ここで指定した高さと幅が、グラフの大きさになる。
オプション
オプションについては、こちら。
プラグイン
よく使うプラグイン。
プラグインは、「plugins」フォルダに入っており、必要に応じて、個別に呼び出す。
- jqplot.barRenderer.js
棒グラフを作るときに必要。
- jqplot.blockRenderer.js
ブロックチャートを作るときに必要。
- jqplot.bubbleRenderer.js
バブルチャートを生成するのに必要。
- jqplot.canvasOverlay.js
グラフに線を描き加えるのに必要。
- jqplot.categoryAxisRenderer.min.js
軸をカテゴリ（区分）として扱い、グリッドをカテゴリ区切り線として表示させたいときに必要。
- jqplot.dateAxisRenderer.js
年月日や時刻など、軸を時間軸として扱う際に必要。
- jqplot.donutRenderer.js
ドーナツグラフを作るときに必要。
- jqplot.dragable.js
系列のデータポイントをドラッグで移動できるようにするときに必要。
- jqplot.enhancedLegendRenderer.js
凡例機能を拡張するときに必要。
- jqplot.highlighter.js
ツールチップなど、ハイライト表示に必要。
- jqplot.meterGaugeRenderer.js
メーターゲージを作るときに必要。
- jqplot.ohlcRenderer.js
いかり足やローソク足などのチャートを作るときに必要。
- jqplot.pieRenderer.js
円グラフ（パイチャート）を作るときに必要。
- jqplot.enhancedLegendRenderer.min.js
凡例の機能を強化する。
- jqplot.pointLabels.js
データポイントラベルを表示するのに必要。
- jqplot.trendline.js
トレンドラインを描き加えるのに必要。