Rails on Railsでグラフを描画・作成する方法〜Chatkick活用編〜

Railsでグラフを描画してえ！

Railsアプリを作っていたら、

「データベースの値をグラフで表示できたら面白いなー」

と思い立ち、ググってみたらこちらの神記事を発見。

ボクココ

 

9 users

9 pockets

Rails で グラフ描画なら、 Chartkick を利用すべし - ボクココ

https://www.bokukoko.info/entry/2015/10/23/Rails_%E3%81%A7_%E3%82%B0%E3%83%A9%E3%83%95%E6%8F%8F%E7%94%BB%E3%81%AA%E3%82%89%E3%80%81_Chartkick_%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%81%B9%E3%81%97

ども、@kimihomです。 今回は Rails でグラフの描画について。 大抵、グラフを描画するとなると、サーバーからデータをViewに渡して、そこからJavaScriptでデータをどんどん投入してようやく描画、という長いプロセスを踏む必要がある。Rails 側でデータをしっかり取って、そのままグラフ表示できたらViewのコードを書かなくてすみそうなものなのだが。 そんなことができてしまう Chartkick を紹介する。 Create beautiful Javascript charts with one line of Ruby Chartkick セットアップの方法はリンク先に全て書…

どうやら「Chartkick」というgemを使えばできる、とのことだったので早速やってみました。

※ 利用環境は以下の通りです。

ChartkickをRails使う前にやっておきたい準備

まずは準備からですね。

こちら公式ページを参考にやってみました。

chartkick.com

 

43 users

816 pockets

Chartkick - Create beautiful JavaScript charts with one line of Ruby

https://chartkick.com

まず、gemファイルに次の2行を足します。

そして上書き保存しましょう。

1つ目のchartkickは文字通り、Chartkick使うためのgem。

もう1つのgroupdateはグラフ横軸の単位を「日付ごと」で表示できるgemですね。

さらに、Railsアプリのファイルからapplication.jsを探して、このファイルに

の2行を追加して保存。

これで準備はおしまい。

Gemfileを保存したら最後に、コマンドラインで

しておきましょう。

Railsでグラフを描画・作成する方法〜Chatkick活用編〜

それではChartkickの使い方です。

詳しくはこちらの公式ページにたくさん具体例は載っているんですが、基本はこれです↓

<%= グラフの種類 モデル名.group(:カラム名.count) %>

公式ページの例を1つ見てみます。

こちらはパイチャート（pie_chart）で円グラフをかく方法。

さらにモデル名はヨーグルト（Yogurt）。

Yogurtテーブル中のflavorカラムのデータを円グラフで表示できるわけです。

そのflavorカラムを「.count」ですので、それぞれのflavorに該当する「数」を円グラフで表現できるのですね。

まさかこんな簡単にRailsでグラフを作成できるとは・・・！

僕自身、学習系サービスを作っているので、例えば、勉強時間をグラフにしたら面白そう。

横軸を日付にとって、縦軸を勉強時間にしたら日々の学習成果を可視化できるんじゃないですかね。

Railsアプリでグラフを描画したい方はChartkickを試してみてください。

それでは！

Lin

飯橋凛（いいはし りん）

おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。

ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。

質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。