google charts でjsonファイルから散布図を作成する

   2015/09/29

java scriptをちゃんと理解していなかったためか、意外と苦戦したのでメモしておきます。

ソースに直接書き込むのでは無く、jsonファイルから読み取る時の方法になります。少し弄れば他のチャートを使う場合にも使い回すことが可能です。

基本はgoogle-chartsの散布図と同じで、データの取得する部分が違うだけです。

ソースコード

デモ

index.html

man.json

コードの解説

外部scriptの読み込み

それぞれでjqueryとgoogle-chart api を読み込んでいます。

chart のロード

chartの種類によって異なるのでgoogle chartのページを参考に適宜変更

変数宣言

データ取り込み用の二次元配列とDeferred(延期)オブジェクトの宣言

特に後者が無いと、ajaxでjsonファイルを読み取り終わる前にグラフを表示しようとしてしまうため必ず必要です。

jsonファイルの読み込み

urlに読み取りたいjsonファイルのurlを指定します。

またjsonファイルはデフォルトでキャッシュが有効になっているので、たびたびファイルが更新されるのであれば cache:false を追加するべきです。

読み取り成功時処理

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();で延期された関数に実行許可を出します。

読み取り失敗時処理

jsonファイルの読み取りに失敗した場合.failの処理に分岐します。

jsonファイルの構文がおかしかったり(数値の頭に0があるとかありがち.ex:”age”:01)、urlが正しくなかった場合に失敗します。

延期された関数の実行許可

df.doneでdf.resolve();が実行されるまで関数の中身の実行を延期しています。これが無いとajaxが実行される前にグラフを表示してしまうため、なぜかdataArrayの中身が空っぽ且つグラフが表示されないという悲劇に見舞われます。

コメント一覧

  1. 匿名 より:

    参考になりました

  2. 匿名 より:

    大変参考になりました。こちらの散布図にツールチップで名称を表示させたい時、どの様にしたらよいのかご教授頂けたら助かります。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください