リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

chartkick.js+Google ChartsでJSONを簡単にグラフ化


head

Chartkickは、Ruby on Railsと親和性の高いシンプルなグラフライブラリです。

Railsでは一行でグラフが出力できるようですが、やっていることはJSONデータを出力してJavaScript側でグラフを描画しているだけなので、PHPなどのプロジェクトでもJavaScript側だけを有効活用できそうです。

今回は試しにJavaScript側だけを使ってグラフを出力してみたいと思います。

使い方

Chartkickは、Google ChartsまたはHighchartsを使ってグラフを描画します。

今回はGoogle Chartsを使ってみます。

準備

Google ChartsとChartkickを読み込むだけですぐに使えます。

[html]
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="chartkick.js"></script>
[/html]

グラフを出力するための<div>を設置しておきます。JavaScriptからidを指定して使いますので、適当にidを付けておきましょう。

[html]
<div id="chart"></div>
[/html]

線グラフ

[js]
new Chartkick.LineChart("chart", {"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6});
[/js]

cap01

円グラフ

[js]
new Chartkick.PieChart("chart", [["Blueberry", 44],["Strawberry", 23]]);
[/js]

cap02

棒グラフ(縦)

[js]
new Chartkick.ColumnChart("chart", [["Sun", 32],["Mon", 46],["Tue", 28]]);
[/js]

cap03

棒グラフ(横)

[js]
new Chartkick.BarChart("chart", [["Work", 32],["Play", 1492]]);
[/js]

cap04

エリアグラフ

[js]
new Chartkick.AreaChart("chart", {"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6});
[/js]

cap05

線グラフ(多軸)

[js]
data = [
{"name":"Workout", "data": {"2013-02-10 00:00:00 -0800": 3, "2013-02-17 00:00:00 -0800": 4}},
{"name":"Call parents", "data": {"2013-02-10 00:00:00 -0800": 5, "2013-02-17 00:00:00 -0800": 3}}
];
new Chartkick.LineChart("chart", data);
[/js]

cap06

まとめ

このように、JSONデータを渡すだけで簡単に美しいグラフが描画できます。

JSONをテーブルに変換できるDynatable.jsなんかと組み合わせて使うとさらに捗りそうな予感がしますね。

機会があればぜひ使ってみてください。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック