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

はじめに

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

The Ruby Toolbox - Graphing

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

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

Lazy high charts は highcharts.js を使っていて、HTML5 の Canvas にチャートを描画できる。これ良さそう。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