30 December 2009

Google Visualization API でグラフ描画の省力化

HTMLファイルで、Google Visualization API を使えば、グラフを描くのにグラフィック関数を用いなくても簡単にプログラミングが出来る。

例えば、Apacheサーバのアクセスログを解析して、ブラウザ種別のグラフを描きたいとする。 Google Visualization API を使えば、こんなグラフが作れる。

20091230-googlevsapi-graph.png

HTMLに記述するソースコードはこんな感じ

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Language" content="ja" /> <title>access log query</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Google Visualization API パッケージをロードする // google.load('visualization', '1', {'packages':['piechart']}); // google.load('visualization', '1', {'packages':['barchart']}); google.load('visualization', '1', {'packages':['linechart']}); // コールバック関数を呼び出す google.setOnLoadCallback(drawChart); // コールバック関数 // グラフのデータオブジェクトの定義と、グラフの描画 function drawChart() { // データオブジェクトを定義し、値を放り込む var data_browser = new google.visualization.DataTable(); data_browser.addColumn('string', '期間'); data_browser.addColumn('number', 'MSIE 4'); data_browser.addColumn('number', 'MSIE 5'); data_browser.addColumn('number', 'MSIE 5.5'); data_browser.addColumn('number', 'MSIE 6'); data_browser.addColumn('number', 'MSIE 7'); data_browser.addColumn('number', 'MSIE 8'); data_browser.addColumn('number', 'Firefox 0.x'); data_browser.addColumn('number', 'Firefox 1.0'); data_browser.addColumn('number', 'Firefox 1.5'); data_browser.addColumn('number', 'Firefox 2.0'); data_browser.addColumn('number', 'Firefox 3.0'); data_browser.addColumn('number', 'Firefox 3.5'); data_browser.addColumn('number', 'Opera'); data_browser.addColumn('number', 'Chrome'); data_browser.addRows(12); data_browser.setValue(0, 0, '11ヶ月前'); data_browser.setValue(0, 1, 1); data_browser.setValue(0, 2, 11); data_browser.setValue(0, 3, 13); data_browser.setValue(0, 4, 1640); data_browser.setValue(0, 5, 1980); data_browser.setValue(0, 6, 49); data_browser.setValue(0, 7, 0); data_browser.setValue(0, 8, 0); data_browser.setValue(0, 9, 1); data_browser.setValue(0, 10, 81); data_browser.setValue(0, 11, 758); data_browser.setValue(0, 12, 0); data_browser.setValue(0, 13, 80); data_browser.setValue(0, 14, 85); data_browser.setValue(1, 0, '10ヶ月前'); data_browser.setValue(1, 1, 0); data_browser.setValue(1, 2, 9); data_browser.setValue(1, 3, 13); data_browser.setValue(1, 4, 1616); data_browser.setValue(1, 5, 2162); data_browser.setValue(1, 6, 62); data_browser.setValue(1, 7, 0); data_browser.setValue(1, 8, 0); data_browser.setValue(1, 9, 3); data_browser.setValue(1, 10, 51); data_browser.setValue(1, 11, 801); data_browser.setValue(1, 12, 0); data_browser.setValue(1, 13, 101); data_browser.setValue(1, 14, 78); data_browser.setValue(2, 0, '9ヶ月前'); data_browser.setValue(2, 1, 4); data_browser.setValue(2, 2, 19); data_browser.setValue(2, 3, 10); data_browser.setValue(2, 4, 1719); data_browser.setValue(2, 5, 2422); data_browser.setValue(2, 6, 52); data_browser.setValue(2, 7, 0); data_browser.setValue(2, 8, 0); data_browser.setValue(2, 9, 1); data_browser.setValue(2, 10, 50); data_browser.setValue(2, 11, 879); data_browser.setValue(2, 12, 0); data_browser.setValue(2, 13, 114); data_browser.setValue(2, 14, 105); data_browser.setValue(3, 0, '8ヶ月前'); data_browser.setValue(3, 1, 0); data_browser.setValue(3, 2, 10); data_browser.setValue(3, 3, 12); data_browser.setValue(3, 4, 1659); data_browser.setValue(3, 5, 2390); data_browser.setValue(3, 6, 48); data_browser.setValue(3, 7, 1); data_browser.setValue(3, 8, 0); data_browser.setValue(3, 9, 6); data_browser.setValue(3, 10, 36); data_browser.setValue(3, 11, 843); data_browser.setValue(3, 12, 0); data_browser.setValue(3, 13, 97); data_browser.setValue(3, 14, 118); data_browser.setValue(4, 0, '7ヶ月前'); data_browser.setValue(4, 1, 1); data_browser.setValue(4, 2, 25); data_browser.setValue(4, 3, 10); data_browser.setValue(4, 4, 1528); data_browser.setValue(4, 5, 2013); data_browser.setValue(4, 6, 118); data_browser.setValue(4, 7, 2); data_browser.setValue(4, 8, 0); data_browser.setValue(4, 9, 1); data_browser.setValue(4, 10, 32); data_browser.setValue(4, 11, 839); data_browser.setValue(4, 12, 0); data_browser.setValue(4, 13, 64); data_browser.setValue(4, 14, 110); data_browser.setValue(5, 0, '6ヶ月前'); data_browser.setValue(5, 1, 1); data_browser.setValue(5, 2, 52); data_browser.setValue(5, 3, 12); data_browser.setValue(5, 4, 1400); data_browser.setValue(5, 5, 2034); data_browser.setValue(5, 6, 222); data_browser.setValue(5, 7, 0); data_browser.setValue(5, 8, 1); data_browser.setValue(5, 9, 3); data_browser.setValue(5, 10, 29); data_browser.setValue(5, 11, 780); data_browser.setValue(5, 12, 8); data_browser.setValue(5, 13, 68); data_browser.setValue(5, 14, 90); data_browser.setValue(6, 0, '5ヶ月前'); data_browser.setValue(6, 1, 0); data_browser.setValue(6, 2, 88); data_browser.setValue(6, 3, 10); data_browser.setValue(6, 4, 1379); data_browser.setValue(6, 5, 1818); data_browser.setValue(6, 6, 286); data_browser.setValue(6, 7, 0); data_browser.setValue(6, 8, 4); data_browser.setValue(6, 9, 2); data_browser.setValue(6, 10, 25); data_browser.setValue(6, 11, 742); data_browser.setValue(6, 12, 5); data_browser.setValue(6, 13, 68); data_browser.setValue(6, 14, 118); data_browser.setValue(7, 0, '4ヶ月前'); data_browser.setValue(7, 1, 1); data_browser.setValue(7, 2, 71); data_browser.setValue(7, 3, 15); data_browser.setValue(7, 4, 1334); data_browser.setValue(7, 5, 1857); data_browser.setValue(7, 6, 271); data_browser.setValue(7, 7, 0); data_browser.setValue(7, 8, 1); data_browser.setValue(7, 9, 0); data_browser.setValue(7, 10, 15); data_browser.setValue(7, 11, 567); data_browser.setValue(7, 12, 174); data_browser.setValue(7, 13, 81); data_browser.setValue(7, 14, 129); data_browser.setValue(8, 0, '3ヶ月前'); data_browser.setValue(8, 1, 0); data_browser.setValue(8, 2, 68); data_browser.setValue(8, 3, 11); data_browser.setValue(8, 4, 1219); data_browser.setValue(8, 5, 1840); data_browser.setValue(8, 6, 321); data_browser.setValue(8, 7, 0); data_browser.setValue(8, 8, 0); data_browser.setValue(8, 9, 0); data_browser.setValue(8, 10, 20); data_browser.setValue(8, 11, 321); data_browser.setValue(8, 12, 447); data_browser.setValue(8, 13, 91); data_browser.setValue(8, 14, 125); data_browser.setValue(9, 0, '2ヶ月前'); data_browser.setValue(9, 1, 3); data_browser.setValue(9, 2, 72); data_browser.setValue(9, 3, 10); data_browser.setValue(9, 4, 1246); data_browser.setValue(9, 5, 1883); data_browser.setValue(9, 6, 398); data_browser.setValue(9, 7, 0); data_browser.setValue(9, 8, 0); data_browser.setValue(9, 9, 0); data_browser.setValue(9, 10, 19); data_browser.setValue(9, 11, 215); data_browser.setValue(9, 12, 574); data_browser.setValue(9, 13, 91); data_browser.setValue(9, 14, 121); data_browser.setValue(10, 0, '1ヶ月前'); data_browser.setValue(10, 1, 1); data_browser.setValue(10, 2, 42); data_browser.setValue(10, 3, 10); data_browser.setValue(10, 4, 1088); data_browser.setValue(10, 5, 1802); data_browser.setValue(10, 6, 379); data_browser.setValue(10, 7, 0); data_browser.setValue(10, 8, 0); data_browser.setValue(10, 9, 1); data_browser.setValue(10, 10, 18); data_browser.setValue(10, 11, 184); data_browser.setValue(10, 12, 638); data_browser.setValue(10, 13, 75); data_browser.setValue(10, 14, 139); data_browser.setValue(11, 0, '0ヶ月前'); data_browser.setValue(11, 1, 1); data_browser.setValue(11, 2, 5); data_browser.setValue(11, 3, 7); data_browser.setValue(11, 4, 917); data_browser.setValue(11, 5, 1769); data_browser.setValue(11, 6, 579); data_browser.setValue(11, 7, 0); data_browser.setValue(11, 8, 1); data_browser.setValue(11, 9, 2); data_browser.setValue(11, 10, 8); data_browser.setValue(11, 11, 134); data_browser.setValue(11, 12, 691); data_browser.setValue(11, 13, 79); data_browser.setValue(11, 14, 154); // グラフの描画 var chart_browser = new google.visualization.LineChart(document.getElementById('google_graph_browser')); chart_browser.draw(data_browser, {width: 600, height: 400, is3D: true, legendFontSize: 12, title: 'ブラウザ種別統計'}); } </script> </head> <body> <p>ブラウザ集計</p> <div id="google_graph_browser"></div> </body> </html>

■ 参考資料
Google Visualization API - Using Visualizations
Google Visualization API Gallery (利用可能なグラフの一覧)
・ IT Pro WebページにGoogle APIで簡単にきれいなグラフを描く