lazy_high_chartsを使って円グラフを表示する

Rails

Highchars JSをRailsで使うlazy_high_chartsを使って円グラフを表示する。

Railsでグラフを作成するにはgruffというgemもありますがこちらはサーバサイドでグラフをごりごり作った後表示させるのに対し、
Highchars JSはデータのセットだけサーバサイドで行い描画自体はクライアントサイドでやるのが大きな違いぽいです。
必要な物はjsファイルだけなのでインストールも簡単でした。

lazy_high_chartsのgithubからインストール方法を見つけられなかったので下記参考にさせてもらいました。
グラフ生成時のオプション等についてはHighchars JSのマニュアルを見ればわかりそうです。

Install

  1. Gemfileにlazy_high_chartsを追記
  2. bundle install
  3. application.jsに下記追記
//= require highcharts

円グラフ

今回は円グラフを作成したかったのですがgithubのwikiにexampleがあったので参考にやりました。

controller

  @chart = LazyHighCharts::HighChart.new('pie') do |f|
    f.chart({defaultSeriesType: 'pie', margin: [50, 200, 60, 170]})
    f.series({
      type: 'pie',
      name: 'hoge',
      data: [
        ['hoge', 50.0],
        ['huga', 25.0],
        ['piyo', 25.0],
        ['hage', 0]
      ]
    })
  end

view

<%= high_chart("hoge", @chart) %>

こんなグラフがでます。
f:id:arcright:20130425153757p:plain