読者です 読者をやめる 読者になる 読者になる

Rails で Lazy high charts を使ってチャートを実装してみた

はじめに

Rails アプリでチャートを実装したくて、The Ruby Toolbox で Rails プラグインを探してみた。

上記のページによると、Lazy high charts、Googlecharts、Open flash chart、Gruff の4強みたいだ。

Gruff はサーバー側でチャートを描画しないといけないからパス。Googlecharts は Google Chart API に依存するからパス。Open flash chart はチャートをブラウザ側で描画できるけど、 Flash なのでパス。

Lazy high charts は highcharts.js を使っていて、HTML5Canvas にチャートを描画できる。これ良さそう。Lazy high charts プラグインを使ってみよう。

LazyHighCharts をインストール

Gemfile に

gem 'lazy_high_charts'

を追加し、

bundle

を実行してインストールする。あとは、

bundle exec rails g lazy_high_charts:install

を実行すると、highchart.js がダウンロードされて、assets/javascripts に配置される。

カラムチャートを表示してみる

コントローラーでチャートオブジェクトを作成。

class ChartController < ApplicationController
  def index
    @end_at = Date.today
    @start_at = @end_at - 6
    @categories = @start_at.upto(@end_at).to_a
    @data = [5, 6, 3, 1, 2, 4, 7]

    @h = LazyHighCharts::HighChart.new("graph") do |f|
      f.chart(:type => "column")
      f.title(:text => "Sample graph")
      f.xAxis(:categories => @categories)
      f.series(:name => "sample",
               :data => @data)
    end
  end
end

チャートの種類や、指定できるオプションは、Highcharts.js のドキュメントを参考にした。

コントローラーで作成したチャートオブジェクトは、専用のヘルパーを使ってビューに出力する。

<%= high_chart("sample", @h) %>

以上。たったこれだけ。実行結果がこちら。

カッコイイ!

まとめ

Lazy high charts プラグインを使った場合、サーバー側で生成するのはデータだけで、負荷の高そうなチャート描画はクライアント側で行っている。

チャートで表示するデータを保存するテーブルに、きちんとインデックスを作成しておけば、シャーディングが必要になるくらいデータが増えるまでは、パフォーマンスを維持できそうだな。