こんにちは、ムックです。
今回は、php、morris.jsを使ってSQLの結果を簡単にグラフ表示してみたいと思います。

背景:統計データをグラフに表示したい

とあるソーシャルゲームの統計データをグラフ表示させたい。
例えば、各ガチャ回転数

実装方法

具体的な実装方法は以下の3つになります。
1.SQLの作成
2.結果をJSONに変換
3.morris.jsを使って任意のグラフを作成

1.SQLの作成

今回は単純に以下の様なログテーブルがあるとします。

各ガチャの回転数を出すSQL

※created_at(レコード作成日時)は入力値とします。

2.SQLの結果をJSONに変換

DBから取得した結果配列をjson形式に変換します。
※データ取得の処理は割愛します。

[{“GACHA_ID”: 1,”COUNT”: 1}, {“GACHA_ID”: 2,”COUNT”: 11}, …のような形なります。

続きを読む

3.morris.jsを使って任意のグラフを作成

やっときましたmorris.js。すごくシンプルなので使い方は公式サイト参照していただければと思います。
利用には、jquery,raphaelが必要になります。
簡単に説明しますと、
element:id名
data:json形式のデータ
xkey,ykeys:それぞれx軸、y軸となるプロパティ名
を指定することでグラフが描画されます。

ヘッダに記述

bodyに記述

棒グラフ、線、円グラフなどが出力可能

graph

棒グラフ以外にも線、円グラフなども描画出来るので加工されたデータに合ったグラフを選ぶことが出来ます。
このようにjsonさえ作ってしまえば、morris.jsで簡単にグラフが作れます。

課題

課題となるのは、今回意識していなかったシャーディングされたデータのマージや大量データによる負荷、レスポンスタイム削減でしょうか。

まとめ

毎回SQLを実行してデータ取得しているもの、またそれらのデータをエクセルに貼り付けてグラフ表示〜などしているものであれば管理画面のようなものを作ってみると結構役に立つのかなと思います。

あわせて読みたい記事