QLOOKアクセス解析
ホーム   »  スポンサー広告  »  スポンサーサイト   »  ruby/rails  »  Google Chart Toolでグラフ作成

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google Chart Toolでグラフ作成

redminのプラグイン作成中で、グラフ描画に何を使おうかと
思っていたのですが、Google Chart Toolが良さそうなので採用。
●グラフの種類が豊富で奇麗。
●特にインストール不要でシンプル。
●日本語も問題なし。
●AJAXを使ってインタラクティブな図が作成可能
弱点はgoogleとの通信が必要。googleの事なのでいつ仕様が変わるか不明。

こんなグラフが作成出来ます。
Charts Gallery – Google Chart Tools – Google Code

こっちはGoogle Chart Toolのデバッグが出来るのですが、
様々なサンプルがあり、参考になります。かなり奇麗で色々なグラフが作成出来ます。
Google Code Playground

リクエストパラメータで指定するやり方、JSを使って作成するやり方がありますが
JSを使ったやり方の簡単なメモ。

railsで使う場合、普通にやるとViewで色々コードを埋め込んで
JSにパラメータを渡さないと行けなくなるので、今回は gon というgemを使います。
このgemを使うとシンプルにControllerからデータを受け渡す事が可能になります。

gonについて詳しくは以下を参照。
https://github.com/gazay/gon
https://github.com/gazay/gon/wiki

まずはgemのインストール。
Gemfileに以下を追加。
gem 'gon', '3.0.5'
インストール実行。
$ bundle


app/views/layouts/application.html.erbにインクルードの追加。
<head>
<title>some title</title>
<%= include_gon %>
<!-- include your action js code -->

これで gon が使えるようになります。

簡単なグラフの作成。コントローラ側でデータを準備。
格納する変数名は任意でOK。
gon.graph_dataにサンプルデータを格納。
# データテーブルの作成
gon.graph_data = [
['年度', '売上', '費用'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 2000]
]
表示するerbファイルに以下を記載。
<!-- AJAX API のロード -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

// Visualization API と折れ線グラフ用のパッケージのロード
google.load("visualization", "1", {packages:["corechart"]});

// Google Visualization API ロード時のコールバック関数の設定
google.setOnLoadCallback(drawChart);

// グラフ作成用のコールバック関数
function drawChart() {

// データテーブルの作成
var data = google.visualization.arrayToDataTable(gon.graph_data)

// グラフのオプションを設定
var options = {
title: '会社業績'
};

// LineChart のオブジェクトの作成
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// データテーブルとオプションを渡して、グラフを描画
chart.draw(data, options);

}
</script>


これだけで奇麗がグラフが出力されます。
Comment
Trackback
Trackback URL
Comment Form
管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。