HRForecast のデータを Highcharts で手軽に描画する

8757 ワード
HRForecast highcharts highcharts テキストリンク

みんな大好き！HRForecast

...ですが，当社でも社内ツールとして活用しています（Aimingデータ解析チーム現場だより）．

ただ，HRF の便利なデータ集約の仕組みを活用しつつ，ビューについてはガワガエしています．

グラフ描画ツールも差し替えていて，ここはHighchartsJS を採用しています．
社内運用なので商用利用となるためライセンス購入してもらいました．

HRF のデータを HighchartsJS で描画するのが割と簡単だったので書きます．

※ 画像に含まれるデータは仮のものです

HRForecast から CSV を取得する

HRF のパスに含まれる ifr を csv に置き換えると CSV データが取得できます．

http://.../csv/service/section/graph もしくは http://.../csv_complex/service/section/graph になりますね．

これを Highcharts に渡して描画してもらいます．

ちなみに，GrowthForecast からも JSON を取得し Highcharts で描画していて，同じアプリ上にグラフが同居するようにしています．

data モジュール

HRF の↑のようなグラフを Highcharts で描画します．
Highcharts のデータの指定方法は省略しますが，きちんと変換する必要があります．
ですが，面倒なので data モジュールを使用して csv データをそのまま描画してもらいましょう．

!!! 5
%html{lang: 'ja'}
  %head
    %meta{charset: 'utf-8'}
    %script{src: '//code.jquery.com/jquery-1.11.0.min.js'}
    %script{src: '//code.highcharts.com/highcharts.js'}
    %script{src: '//code.highcharts.com/modules/data.js'} # CSV などを読み込んで良い感じにしてくれるモジュール

  %body
    #graph

:coffeescript
  $.get 'http://path/to/hrf/csv_complex/service/section/graph?t=m', (data) ->
    $('#graph').highcharts
      data:
        csv: data

ということで，はい，できました．

※ ajax なので，Cross-Origin の問題は，適宜解決してください

x 軸を時刻に合わせる

ただ，よく見ると，日付が飛んでいます．
たとえば，2014/02/06 22:00 の次が 2014/02/25 10:00:00 になっています．

そこで，横軸を時刻で等間隔に合わせるように設定します．

!!! 5
%html{lang: 'ja'}
  %head
    %meta{charset: 'utf-8'}
    %script{src: '//code.jquery.com/jquery-1.11.0.min.js'}
    %script{src: '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js'}
    %script{src: '//code.highcharts.com/highcharts.js'}
    %script{src: '//code.highcharts.com/modules/data.js'}

  %body
    #graph

:coffeescript
  $.get 'http://path/to/hrf/csv_complex/service/section/graph?t=m', (data) ->
    $('#graph').highcharts
      data:
        csv: data
        parseDate: (val) -> moment(val).unix() * 1000

オプションとして data.parseDate に，変換する関数を定義します（momentjs を使いました）．

これでこのように，時系列通りのグラフになります．

HRForecast の見た目・機能をカバーする

HighchartsJS は，設定項目が多くあります．
これらを上手く設定して，グラフ種別や積み上げの設定・グラフの拡大縮小など，HRForecast から機能が落ちることがないような設定にしています．

!!! 5
%html{lang: 'ja'}
  %head
    %meta{charset: 'utf-8'}
    %script{src: '//code.jquery.com/jquery-1.11.0.min.js'}
    %script{src: '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js'}
    %script{src: '//code.highcharts.com/highcharts.js'}
    %script{src: '//code.highcharts.com/modules/data.js'}

  %body
    #graph

:coffeescript
  $.get 'http://path/to/hrf/csv_complex/service/section/graph?t=m', (data) ->
    $('#graph').highcharts
      data:
        csv: data
        parseDate: (val) -> moment(val).unix() * 1000
      chart:
        type: 'area'
        zoomType: 'x'
      rangeSelector:
        enabled: true
      plotOptions:
        series:
          stacking: true
          marker:
            radius: 0

これくらいの設定をしておくと，置き換えても不都合ない状態になると思います．

現在のオプション

png や SVG などの画像としてダウンロードしたり，CSV のダウンロードや多言語対応，また，HighstockJS の機能を使うことで，範囲を（ドラッグ以外で）柔軟に絞り込みをすることができたりします．
動的にデータを差し込んだり，クリック，マウスオーバーのイベントに対するコールバックを指定したりもできます．

現在のオプションは 100 行を軽く超えるコードに膨れて上がってしまっています．

Aiming では膨れ上がった設定ファイルを何とかしてくれるだけではなく，データ解析に興味のあるエンジニアを探しています，よ？