2014/12/23以前投稿したグラフ生成のJSライブラリ、morris.jsを試してみた。グラフを描画するJSライブラリDB(MySQL)に格納されている値を参照して折れ線グラフを生成させる。morris.jsのベースはexamplesに入っているdays.htmlを使った。データサンプルとして東京の過去5日分の最高気温と最低気温を表示させるとする。-1上記のデータを直書きすれば下記のような感じだ。-1}と連続している部分をループで処理をすれば良い。私は素人なので、PHPで下記のような感じで簡単にechoで切り分けた。"</script>";?></body></html>■サンプルURLhttp://516.jp/sample/graph/db.php配列$data[0]に日付、$data[1]に最高気温、$data[2]に最低気温が入っている訳です。morris.jsの注意点というかカスタマイズについては下記ドキュメントを参考にした。Charts(円グラフ)ピックアップとして2点、1点目はsmoothをfalseにすると折れ線グラフの滑らかさが消える。falseにしたほうが見やすいような気がする。2点目はresizeをtrueにするとブラウザの幅に合わせてレスポンシブになる。viewportの記述と、cssのmax-widthの変更は必要である。他にも色々とカスタマイズ出来そうなので上記ドキュメントを参考にして試してみると面白そうだ。