DBに入っている値でグラフ生成

以前投稿したグラフ生成のJSライブラリ、
morris.jsを試してみた。

グラフを描画するJSライブラリ

DB(MySQL)に格納されている値を参照して
折れ線グラフを生成させる。

 

まず、morris.jsのベースは
examplesに入っているdays.htmlを使った。

データサンプルとして東京の過去5日分の
最高気温と最低気温を表示させるとする。

DateT MaxT MinT
2014/12/22 11 3
2014/12/21 13 4
2014/12/20 8 3
2014/12/19 10 0
2014/12/18 8 -1

 

上記のデータを直書きすれば下記のような感じだ。

■サンプルURL
http://516.jp/sample/graph/days.html

 

上記データがDBに入っているとしてその値をとってくる場合には
{“DateT”: “2014-12-22″, “MaxT”: 11, “MinT”: 3},
{“DateT”: “2014-12-21″, “MaxT”: 13, “MinT”: 4},
{“DateT”: “2014-12-20″, “MaxT”: 8, “MinT”: 3},
{“DateT”: “2014-12-19″, “MaxT”: 10, “MinT”: 0},
{“DateT”: “2014-12-18″, “MaxT”: 8, “MinT”: -1}

と連続している部分をループで処理をすれば良い。

本当はもっと良い書き方があるかもしれないが、
私は素人なので、PHPで下記のような感じで簡単にechoで切り分けた。

■サンプルURL
http://516.jp/sample/graph/db.php

配列$data[0]に日付、$data[1]に最高気温、
$data[2]に最低気温が入っている訳です。

 

morris.jsの注意点というかカスタマイズについては
下記ドキュメントを参考にした。

Line & Area Charts(折れ線グラフ)

Bar Charts(棒グラフ)

Donut Charts(円グラフ)

 

ピックアップとして2点、
1点目はsmoothをfalseにすると折れ線グラフの滑らかさが消える。
falseにしたほうが見やすいような気がする。

2点目はresizeをtrueにするとブラウザの幅に合わせてレスポンシブになる。
もちろんHTMLにmeta viewportの記述と、cssのmax-widthの変更は必要である。

 

他にも色々とカスタマイズ出来そうなので
上記ドキュメントを参考にして試してみると面白そうだ。