thingspeakのデータをgoogle chartで表示する2014/09/08 00:10

arduinoからthingspeakへ送ったデータをGoogle Chartで表示する。

arduinoからthingspeakへポストしているザリガニ水槽の水温、冷却装置の作動状況、CDSセンサのレベル値を取得して、1つのグラフ上に表示した図。グラフは15秒おきにリフレッシュする。100行に満たないちょっとしたJavaScriptの記述で実現できる。
htmlソース, scriptソース
thingspeakへ送ったデータは所定のリクエストをする事で取得できる。データが取得できれば、それをもとにGoogle Chart を使って好きな形へグラフ化できる。 もともとthingspeakだけでもグラフ表示はできるが、Google Chart を使えばよりリッチな表現ができる。thingspeak側でよくあるサンプルが、最新のデータをアナログメーター形式で表示してくれるものだ。

これはthingspeak上で紹介されている説明サンプルを参照して、thingspeakプラグインのソースをコピペすればすぐにできるが、今回は複数の環境値を1つのグラフ上にわかりやすく表示する事を試した。これによってthingspeakの複数のchartや複数のchannelの値を取得して1つのグラフ上に表現する事が出来るようになる。実施は以下2ステップ。

(1) thingspeakへ送ったデータをJSON形式で取得
thingspeakの説明の中にfeedのリクエスト方法の記載がある。このルールに従ってリクエストを送れば好きなデータが好きな形式で取得できる。形式はJSON、XML、CSVが選択可能だが、javascriptで処理するならJSON形式がやりやすいと思う。
例として、Channel 441の直近40個のデータをJSON形式で取得する場合、

https://api.thingspeak.com/channels/441/feed.json?results=40

と記述する。ブラウザにURLを入力してリクエストすると、生のデータが見える。


これでJSON形式のデータは表示できた。JSON形式を理解していないと、ぱっと見わかりにくい文字列に見えてしまうが、JSONを理解するのに役立つサイトがたくさんある。
  • jQueryでjsonデータを扱ってみる【入門編】

  • そしてJSONデータを取得して、個々の値に簡単にアクセスするためにJQueryを使用する。JQueryを理解するのに役立つサイトがこれまた沢山ある。
  • JQuery入門講座
  • ※その他メモ
  • JSONデータの取得はJQueryの$.getJSONを使う
  • $.getJSON() の説明
  • JQueryを使うので、当然ながらJQueryを使うための宣言が必要
  • 各データの登録日時はfeedsの"created_at"項目に自動的に格納されている。
  • feedsの"created_at"はJavascriptのdate型でdatestringとして読み込ませる事ができる。
  • 例: 先頭のfeedに格納されたデータの登録日時を変数にいれる
    var LW_a = new Date(data.feeds[j].created_at);

    (2) 取得したJSON形式データを使ってGoogle Chartで表示
    GoogleChartでグラフ表示をするには、取得したJSONデータをChart表示用のデータに入れて、あとはGoogleChartのお作法に則って表示させればよい。GoogleChart自体はそれほど難しくなく、Javascript初心者でも簡単に扱えると思った。
    作成に当たり参照したサイトを以下記載。
  • AjaxTower Google Chart API入門
  • プログラマーズ雑記帳 Google Chart Tools の使い方
  • Google Chartsで左右2つのY軸を使った折れ線グラフを描画する方法