ChartkickとGroupdateを併用してグラフを描画してみる

投稿者: | 2019年11月28日

こんにちは。

GMOアドマーケティングのR.S.です。

前回はChartkickというgemを使ってRailsプロジェクトでグラフを描画する方法を紹介しました。

そのブログの最後に紹介した、日時でのグルーピングを簡単にする「Groupdate」というgemを使うと更に便利だったので、今回はGroupdateの実装方法と使い方を紹介しようと思います。

(Chartkickが実装済みでない方は前回分も併せて読んでください。)

 

動作環境

  • Rails 5.2.2
  • chartkick 3.1.0
  • groupdate 4.1.2

 

実装方法

公式に沿って実装していくだけなので、とても簡単です。

今回は、使用するDBはMySQL、タイムゾーンは東京に設定します。

 

Gemのインストール

Gemfileに

gem 'groupdate' を追加して $ bundle install を実行します。

UTC時刻で問題なければ実装終了です。

 

タイムゾーンの設定

今回は東京の時刻に設定します。

まずは、DBMySQLSQLiteを使用する場合は別の設定が必要とGroupdateの公式に記載があるので、下記の呪文を唱えて設定します。

$ mysql_tzinfo_to_sql /usr/share/zoneinfo | mysql -u root mysql

(呪文の内容の詳細はMySQLの公式を参照してください)

https://dev.mysql.com/doc/refman/5.6/ja/mysql-tzinfo-to-sql.html

 

次に、アプリケーションの方の設定です。

config/initializers/groupdate.rb  にタイムゾーンの設定を追加します。

下記のように設定するとデフォルトの設定になるのですが、デフォルトにしたくない場合はグラフを描画するときに毎回変更することも可能です。

タイムゾーンの他にも、

  • 週の始まる曜日
  • 1日が始まる時間

などのデフォルトも設定できるので、必要に応じて設定したら設定終了です。

 

グラフの描画

今回は10/28〜11/6までの月を跨ぐ10日間の架空の売り上げデータをDBに保存して、

そのデータを日別、月別でグラフを出力してみようと思います。

架空のデータはこちら

 

日別のグラフ

controllerでデータを用意

viewで面グラフを表示

グラフの頂点にカーソルを合わせるとデータが表示されるので、細かい数値も確認できます。

 

月別のグラフ

データは日別のものと同じで、

月別に変更するには、group_by_dategroup_by_monthに変更するだけでOKです。

更に、面グラフから棒グラフに変更してみました。

 

日別のグラフから、月別のグラフに変更するのも簡単でした。

 

おわりに

今回は、わりとよく使うかな?と思ったので、日別と月別でDBのデータをグラフ表示してみました。

紹介した他にも、週別や時間別、分、秒など、たくさんのグループが用意されています。

SQLで時間毎にグルーピングすることも出来ますが、意外と手間がかかるしミスもあるので、Groupdateを使って簡単に時間を扱えるようになるのは便利だと感じました。グラフ描画以外でも色々なところで活用できると思います。

 

以上です。ありがとうございました。