nishio-dens's diary

Railsとかプログラミング関連の備忘録

RailsでHighcharts(lazy_high_charts)を使って綺麗なグラフを描画する

RalisでWebアプリケーションを作っていると、時々綺麗なグラフが描きたくなる場合があります。 例えば、在庫管理のWebシステムを作っているとして、在庫数の推移をグラフで表示したいなーなんて思う事があるわけです。

そんなときはHighchartsがオススメです。 下図のような高品質なグラフを簡単に生成することができます。

f:id:nishio-dens:20130824175911p:plain

Highcharts自体はJavascriptで作られているので、どんな言語のWebアプリケーションにも組み込めます。 Railsなプロジェクトに組み込む際も、jsを駆使して直接Highchartsを使ってもよいです。 ただ、HighchartsをRailsで簡単に使うためのGem、lazy_high_chartsを公開してくれている方がいるので、今回はありがたくそちらを使わせていただくことにします。

lazy_high_charts導入

今回はruby-2.0.0p247 と rails4 な環境で導入してみます。

Gemfileに

gem 'lazy_high_charts'

と書いて、bundle installを実行しておきます。

その後、assets/javascripts/application.js に、以下の三行を追記します。

//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock

これで準備完了です。

lazy_high_chartsを使ってみる

試しに、在庫数の推移を表示するグラフを書いてみます。 controller内には下記のコードを記述します。

  def index
    category = [1,3,5,7]
    current_quantity = [1000,5000,3000,8000]

    @graph = LazyHighCharts::HighChart.new('graph') do |f|
      f.title(text: 'ItemXXXの在庫の推移')
      f.xAxis(categories: category)
      f.series(name: '在庫数', data: current_quantity)
    end
  end

あとは、viewに以下の一行を記述すれば、Highchartsが利用できます。

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

実行結果は下図のようになります。

f:id:nishio-dens:20130824180036p:plain

グラフの種類も、f.seriesにtype指定を追加するだけで簡単に変更できます。

例えば、円グラフを表示する場合は、以下のようなコードを書けばよいです。

def index
  data = [['DataA', 45.0],['DataB', 55.0]]

  @graph = LazyHighCharts::HighChart.new('graph') do |f|
    f.title(text: '円グラフサンプル')
    f.series(name: '在庫数', data: data, type: 'pie')
  end
end

f:id:nishio-dens:20130824180048p:plain

とても簡単にグラフが描けましたね。

より詳細な使い方は、lazy_high_chartsのドキュメント を参照してください。

どんなグラフが描けるのかを知りたかったら、Highchartsのデモサイト を参照してください。

便利なグラフ描画ライブラリなのですが、Highchartsは商用のプロジェクトで使おうと思うとライセンス費がかかります。(オープンソースなプロジェクトで利用する分にはライセンス費は必要ありません) ライセンス費については、http://shop.highsoft.com/highcharts.html を参照してください。