その3_JSON形式のWebAPIを使ってPM2.5の測定値を自動取得させた後にグラフ化。

値を取ってきたのはいいのですが、グラフによる値の可視化で、見やすくしたい。という要望を受けまして、jQueryの「morris.js」というものを導入しました。使い方は以下。

morris.js

手順1
Getting startedにある

をheader内にコピペる

手順2
内にグラフを表示するdivを書く

手順3
body外のscriptタグ内に以下を書く。

基本これでグラフが出る。

棒グラフにしたい場合はnew Morris.Bar、
折り線グラフにしたい場合はnew Morris.Line
にする。

「data」にpm2.5の値が入っているので、foreach でぐるぐるまして1件ずつ出す。

注意事項。ChromeはOKだけどもIEでは「最後のカンマ」を外さないと
グラフの描写がされないです。ので、普通にぐるぐるまわすだけではだめ。

こうしたい。↓
{ jikoku: ‘2014-05-14-05:00’, value: 30 },
{ jikoku: ‘2014-05-14-04:00’, value: 31 },
{ jikoku: ‘2014-05-14-03:00’, value: 29 },
{ jikoku: ‘2014-05-14-02:00’, value: 30 },
{ jikoku: ‘2014-05-14-01:00’, value: 31 },←ここのカンマはいらない。
の方法。
$hに上のような文字を全部入れたとして、
<?php $h = substr($h, 0, -1); ?>
<?php echo $h; ?>
で、最後についてるカンマが外れます。

関連記事

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)