以前投稿したグラフ生成のJSライブラリ、
morris.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 |
上記のデータを直書きすれば下記のような感じだ。
<!doctype html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
<script src="morris.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
<link rel="stylesheet" href="morris.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="graph"></div>
<script>
var day_data = [
{"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}
];
Morris.Line({
element: 'graph',
data: day_data,
xkey: 'DateT',
ymax: '15',
ymin: '-5',
ykeys: ['MaxT', 'MinT'],
labels: ['最高気温', '最低気温'],
smooth: false,
resize: true
});
</script>
</body>
■サンプル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で切り分けた。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,follow">
<title>morrisテスト</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="morris.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
<link rel="stylesheet" href="morris.css">
</head>
<body>
<?php
$con = mysql_connect('ホスト名', 'ユーザー名', 'パスワード');
mysql_select_db("データベース名", $con);
$quryset = mysql_query('SET NAMES utf8', $con);
$quryset = mysql_query("SELECT * FROM テーブル名");
echo "<div id='graph'></div>";
echo "<script>";
echo "var day_data = [";
while ($data = mysql_fetch_array($quryset)){
echo "{'DateT': '" . $data[0] . "', 'MaxT':" .$data[1] . ", 'MinT':" .$data[2] . "},";
}
echo "];";
echo "Morris.Line({";
echo "element: 'graph',";
echo "data: day_data,";
echo "xkey: 'DateT',";
echo "ymax: '15',";
echo "ymin: '-5',";
echo "ykeys: ['MaxT', 'MinT'],";
echo "labels: ['最高気温', '最低気温'],";
echo "smooth: false,";
echo "resize: true";
echo "});";
echo "</script>";
?>
</body>
</html>
■サンプルURL
http://516.jp/sample/graph/db.php
配列$data[0]に日付、$data[1]に最高気温、
$data[2]に最低気温が入っている訳です。
morris.jsの注意点というかカスタマイズについては
下記ドキュメントを参考にした。
ピックアップとして2点、
1点目はsmoothをfalseにすると折れ線グラフの滑らかさが消える。
falseにしたほうが見やすいような気がする。
2点目はresizeをtrueにするとブラウザの幅に合わせてレスポンシブになる。
もちろんHTMLにmeta viewportの記述と、cssのmax-widthの変更は必要である。
他にも色々とカスタマイズ出来そうなので
上記ドキュメントを参考にして試してみると面白そうだ。