google charts でjsonファイルから散布図を作成する
java scriptをちゃんと理解していなかったためか、意外と苦戦したのでメモしておきます。
ソースに直接書き込むのでは無く、jsonファイルから読み取る時の方法になります。少し弄れば他のチャートを使う場合にも使い回すことが可能です。
基本はgoogle-chartsの散布図と同じで、データの取得する部分が違うだけです。
目次
ソースコード
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!doctype html> <html> <head> <meta charset="utf-8" content=""> <title>google-chart 散布図</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <!-- スクリプト部分 --> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var dataArray = [['Age','Weight']]; var df = $.Deferred(); $(function() { $.ajax({ url: 'man.json', dataType : 'json', }).done(function(data){ console.log("success"); $(data.man).each(function(){ var data_item = [this.age,this.weight]; dataArray.push(data_item); }); df.resolve(); }).fail(function(){ console.log("error"); }); }); df.done(function(){ var chartdata = google.visualization.arrayToDataTable(dataArray); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(chartdata, options); }); } </script> </head> <!-- HTML部分 --> <body> <h1>jsonファイルから散布図を表示</h1> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html> |
man.json
|
1 2 3 4 5 6 7 8 |
{"man":[ {"age":8,"weight":12}, {"age":4,"weight":5.5}, {"age":11,"weight":14}, {"age":4,"weight":5}, {"age":3,"weight":3.5}, {"age":6.5,"weight":7} ]} |
コードの解説
外部scriptの読み込み
|
7 8 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
それぞれでjqueryとgoogle-chart api を読み込んでいます。
chart のロード
|
12 13 |
google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); |
chartの種類によって異なるのでgoogle chartのページを参考に適宜変更
変数宣言
|
16 17 |
var dataArray = [['Age','Weight']]; var df = $.Deferred(); |
データ取り込み用の二次元配列とDeferred(延期)オブジェクトの宣言
特に後者が無いと、ajaxでjsonファイルを読み取り終わる前にグラフを表示しようとしてしまうため必ず必要です。
jsonファイルの読み込み
|
20 21 22 23 |
$.ajax({ url: 'man.json', dataType : 'json', }) |
urlに読み取りたいjsonファイルのurlを指定します。
またjsonファイルはデフォルトでキャッシュが有効になっているので、たびたびファイルが更新されるのであれば cache:false を追加するべきです。
読み取り成功時処理
|
23 24 25 26 27 28 29 30 |
}).done(function(data){ console.log("success"); $(data.man).each(function(){ var data_item = [this.age,this.weight]; dataArray.push(data_item); }); df.resolve(); }) |
jsonファイルが正しく読み込めた場合.doneの処理に分岐します。
dataが読み取ったjsonファイルの中身になっています。.each(function()で一行ずつデータを処理していきます。
manのageとweightを読み取るので、上記のように$(data.man).eachとした上でthis.ageとthis.weightとします。今回の例では this.age=8、this.age=12が最初に入ります。
pushで最初に変数宣言したdataArrayの末尾に配列を追加します。
df.resolve();で延期された関数に実行許可を出します。
読み取り失敗時処理
|
30 31 32 |
}).fail(function(){ console.log("error"); }); |
jsonファイルの読み取りに失敗した場合.failの処理に分岐します。
jsonファイルの構文がおかしかったり(数値の頭に0があるとかありがち.ex:”age”:01)、urlが正しくなかった場合に失敗します。
延期された関数の実行許可
|
35 36 37 38 39 40 41 42 43 44 45 46 |
df.done(function(){ var chartdata = google.visualization.arrayToDataTable(dataArray); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(chartdata, options); }); |
df.doneでdf.resolve();が実行されるまで関数の中身の実行を延期しています。これが無いとajaxが実行される前にグラフを表示してしまうため、なぜかdataArrayの中身が空っぽ且つグラフが表示されないという悲劇に見舞われます。
参考になりました