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

lazy_high_charts + Railsで簡単にグラフを出力!

アドウェイズエンジニアのイシマルです。

朝夕冷え込む季節になりましたが、お元気でしょうか・・・、と慣れない挨拶文はさておき。。。

前回の9月の記事ではchartkickについて紹介させていただきましたが、今回は、もう少し高度なグラフが描けるhighchartsについて紹介したいと思います。

■必要な環境

Ruby on Rails(推奨)
Railsが無くても、highcharts.jsを読み込めば可能です。
※highchartsは商用で利用する場合はライセンスが必要です。  

■HighChartsで描けるグラフ

以下のグラフが描けます。

●棒グラフ(column chart)
折れ線グラフ (line chart)
エリアグラフ (area chart)
円グラフ (pie chart)
散布図 (scatter chart)

他にも時計が描けたり、速度計を描けたりと、実に様々なグラフを描くことができます。




■lazy_high_chartsのインストール(Rails)

gemを追加し、application.jsで読み込むだけです。簡単ですね。
$ cd [Rails.root]
$ vi Gemfile
 gem 'lazy_high_charts'
$ bundle install


$ cd [Rails.root]/app/assets/javascript
$ vi application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock


グラフの書き方

controllerでhighcharts用のインスタンス変数を作ります。

      xAxis_categories = ['2013-11-09', '2013-11-10', '2013-11-11', '2013-11-12']
      tickInterval     = 2
      data             = [120, 80, 90, 150]
      @graph_data = LazyHighCharts::HighChart.new('graph') do |f|
        f.title(text: 'グラフのタイトル')
        f.xAxis(categories: xAxis_categories, tickInterval: tickInterval)
        f.series(name: 'データの名前', data: data, type: 'spline')
      end


あとは、sample.html.erbファイルで以下のように書くだけです。

<%= high_chart("chart-1", @graph_data) %>
■出力結果

以下のようにグラフが出力されます。
blog7_1


複数タイプのグラフを混在させる場合

controllerで以下のようにf.seriesを複数指定します。

      xAxis_categories = ['2013-11-09', '2013-11-10', '2013-11-11', '2013-11-12']
      tickInterval     = 2
      data1            = [120, 80, 90, 150]
      data2            = [1000, 800, 750, 1200]
      @graph_data = LazyHighCharts::HighChart.new('graph') do |f|
        f.title(text: 'グラフのタイトル')
        f.xAxis(categories: xAxis_categories, tickInterval: tickInterval)
        f.options[:yAxis] = [{ title: { text: 'y軸1のタイトル' }}, { title: { text: 'y軸2のタイトル'}, opposite: true}]
        f.series(name: '棒グラフの名前',     data: data1, type: 'column', yAxis: 1)
        f.series(name: '折れ線グラフの名前', data: data2, type: 'spline')
      end

■出力結果

以下のようにグラフが出力されます。
blog7_2
詳しくは、HighchartsのデモAPIリファレンスで!

lazy_high_chartsのgithubこちらです。