グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！

グラフを描画してくれるjQueryプラグインを紹介します。

グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。

が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。

他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。

作れるグラフの種類

グラフは以下のものを使うことができます。

• 棒グラフ
• 線グラフ
• 線グラフで線の下を薄く塗れるやつ
• 円グラフ

デザインは二種類

冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。
また、背景画像やcssを自分で変更すれば、カスタマイズも簡単そうです。

便利なところ

• IE6から対応
• テーブルを作ると、そのテーブルを元に表を描いてくれる
• 設定が簡単
• 線の色を変えられる
• 線グラフのY軸の範囲を指定できる
• 線グラフで途中の値に抜けがあっても大丈夫

IE対応

このプラグインでは、html5のcanvas要素を利用してグラフを描いているのですが、同梱されているEnhanceJSというライブラリ（元はGoogleが提供しているライブラリをちょっと変えたものらしい）が、IEへの翻訳をしてくれます。

テーブルから作ってくれることの利点

Google Chartでは、http://chart.apis.google.com/chart?chs=300x300&chd=t:10,15,4,60,45|30,23,73,24,87&cht=lc&chco=ff0000,0000ffのように、URLの中に値を書きこんで渡す必要があります。

シンプルですが、作っている時に(x, y)の対応が分かりづらいです。jQuery Visualizeでは、まずテーブルを作りそのテーブルを元にグラフが作られるので便利です。

↑上のテーブルを作れば、下の図が出来る。

設定が簡単

jQueryとプラグインファイルを読み込んだあと、書きのように設定を行います。

jQuery(function(){
	jQuery('.hentry table').visualize({type: 'line', width: '700px', height: '500px', colors: ['#666699', '#be1e2d', '#92d5ea'], topValue: 70.0, bottomValue: 45.0});
});

この例では、グラフの種類を線グラフに、グラフの幅を700px,高さを500pxに、線の色を上から順に配列で指定、y軸の範囲を45から70に指定しています。

線グラフのY軸の範囲を指定する

これができるものが少ないです。Google Chartではやりかたがわかりませんでした（有りそうな気もしてる）。

普通に指定すると、Yが0から始まってしまいます。

この、上端と下端を指定するためには、js/visualize.jQuery.jsを少し書き換える必要があります。
topValueとbottomValueを定義しているところをコメントアウトして、下記と入れ替えます。
有志の方が、拡張してくれた機能です。(Add option(s) to customize the range of values that appear on each axis – Google Project Hosting)

topValue: function(){
		if (o.topValue===false) {
			var topValue = 0;
			var allData = this.allData().join(',').split(',');
			$(allData).each(function(){
				if(parseFloat(this,10)>topValue) topValue = parseFloat(this);
			});
			return topValue;
		}
		else {
			return o.topValue;
		}
},
bottomValue: function(){
		if (o.bottomValue===false) {
			var bottomValue = 0;
			var allData = this.allData().join(',').split(',');
			$(allData).each(function(){
				if(this<bottomValue) bottomValue = parseFloat(this);
			});
			return bottomValue;
		}
		else {
			return o.bottomValue;
		}
},

すると下のようになります。

線グラフで途中の値に抜けがあっても大丈夫

たとえば、毎日の体重を記録していくとして、1日、2日、3日はちゃんと記録してたけど、4日は忘れてしまって、5日からまたつけ始めた場合、Google Chartだと、4日の体重を空欄にしておくと、3日から5日の間には何も描画されません。
線が途中でブツッと切れます。

このプラグインでは、3日と5日の値を直線で結んでくれます。

使い方

マニュアルはこちらに。
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

ダウンロードは、こちら。
http://dwpe.googlecode.com/files/dwpe-code-public-latest.zip

ダウンロードしたファイルを設置したあと、下記のようにheadに書き込みます。

	<link href="css/basic.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="../_shared/EnhanceJS/enhance.js"></script>		
	<script type="text/javascript">
		// Run capabilities test
		enhance({
			loadScripts: [
				'js/excanvas.js',
				'../_shared/jquery.min.js',
				'js/visualize.jQuery.js',
				'js/example.js'
			],
			loadStyles: [
				'css/visualize.css',
				'css/visualize-light.css'
			]	
		});   
    </script>

細かい設定は、js/example.jsの中で指定します。
見た目は、css/visualize-light.cssで設定できます。

WordPressで使う場合

テーマフォルダの中に、ダウンロードしてきたファイルを入れ、下記のように指定します。
（ちょっとディレクトリ構成を変えていますので、適宜調整を。。）

	if ( is_page_template('graph.php')  ) {
		wp_enqueue_style('chartbasestyle', get_bloginfo('template_url') . '/charting/css/basic.css');
		wp_enqueue_script('enhance', get_bloginfo('template_url') . '/charting/shared/EnhanceJS/enhance.js');
		$template_url_for_chart = get_bloginfo('template_url');
		$other_files_to_load = "<script type=\"text/javascript\">
		enhance({
			loadScripts: [
				'{$template_url_for_chart}/charting/js/excanvas.js',
				'{$template_url_for_chart}/charting/js/visualize.jQuery.js',
				'{$template_url_for_chart}/charting/js/example.js'
			],
			loadStyles: [
				'{$template_url_for_chart}/charting/css/visualize.css',
				'{$template_url_for_chart}/charting/css/visualize-light.css'
			]	
		});   
    	</script>
		";
		echo $other_files_to_load;
	}

ここでは、graph.phpというページのテンプレートを利用している時だけ、各種ファイルを読み込むように設定しています。

アイディア

どんなことができそうか。。

僕の場合、子供の身長と体重の遷移を記録し、標準の成長曲線と合わせて表示することを考えています。

この他にも、体重を毎日記録するレコーディング・ダイエットアプリを作ったりできると思います。

また、表組みでしか提供されていない官公庁などのデータも、そのテーブルを読み込んでグラフにする、というのを簡単にやってくれるので、そういうサービスも作ることができるように思います。

他にもアイディアがあったら、教えて下さい！

追記：2011/10/17

色々カスタムしたら、こんな感じになったよ。

追記：2012/05/17

半年以上前の記事ですが、昨日からなぜかviewがすごく増えた。はてなブックマークのコメントで、 @kansai_takako さんがコメントしてくれていたのがこちら。

jQuery が必須じゃないなら Highcharts が最強

Highchartsは知らなかったですが、http://www.highcharts.com/のことだと思います。ご参考まで。

もう一回追記：2012/05/17

そしたら、閑歳さんがまた教えてくれました。

@shinichiN Highcharts はソーシャルインサイトで採用しているのですが、ものすごく柔軟で、デザインも思い通りにキレイに仕上がります。ご参考まで〜 admin.social.userlocal.jp

— 閑歳 孝子さん (@kansai_takako) 5月 17, 2012

さっそくソーシャルインサイトのグラフを見てみたら、すごい綺麗だった。

その他のデモは、http://www.highcharts.com/demo/で見れます。

最近買ったjQuery Mobileの本。

以前買ってよかったjQueryの本。