Highstockでデータを%換算して描画する

再び溝畑です。

OL2→OL2→Vim→OL3ときたので、さすがに別のことを書きます。
今回はグラフです。

JavaScriptのグラフライブラリ、沢山ありますね。
どれを選んで良いのか分からない!
そんなときは、このサイトがオススメです。
JavaScript Graphing Library Comparison

必要な条件で絞り込んで、用途に応じたライブラリが選べます。

自分が少しでも触ったことがあるものは
・Highcharts
・Highstock
・Dygraphs
・C3.js(D3.js絡みで)
その中でもHighcharts、Highstockにはお世話になってます。
今回はHighstockを使って、複数の単位のデータを1グラフに描画してみたいと思います。

Highstock

Highstockについては公式のデモを見ると大体掴めるはずです。
Highstock Demo
見ての通り、時系列のグラフを描画するのに特化しています。

個人で使う分には無料で、商用になると有料です。

グラフの描画方法なんかは、DEMOのコードを見つつ、
APIリファレンスを見ながらオプションをいじると良いと思います。
このAPIリファレンスですが、ほとんどのオプションにサンプルが用意されています。
JsFiddleへのリンクがあるので、自由にいじって変化を確認できるのがありがたいですね。

グラフの描画

手始めに、簡単なグラフの描画から。

var chart = new Highcharts.StockChart({
  chart: {
    renderTo: document.getElementById('graph')
  },
  title: {
    text: 'sample'
  },

  series: [{
    name: 'data1',
    data: [ [x, y], [x, y] ....]
  }]
});

var chart = new Highcharts.StockChart({

chart: {

renderTo: document.getElementById('graph')

title: {

text: 'sample'

series: [{

data: [ [x, y], [x, y] ....]

}]

});

APIリファレンスの通りに、ほしいオプションを書いていくだけです。
dataには[[x,y],[x,y]...]の形の配列を渡すとOKです。
このとき、XはUNIXTIMEにしてください。

すると、こんな感じのグラフが簡単に描画できます。
折れ線グラフサンプル

2軸のグラフ

さて、別の単位のデータを一緒に表示させたいよ!となったとします。
こんなときはYを2軸にしてあげると良いです。

var chart = new Highcharts.StockChart({
  // ... 省略
  yAxis: [{
      min: 0,
      max: 50,
      opposite: false
    }, {
      min: 0,
      max: 300
    }
  ],

  series: [{
      name: 'data1',
      data: [[x,y]...],
      yAxis: 0
    }, {
      name: 'data2',
      data: [[x,y]...],
      yAxis: 1
  }]
});

var chart = new Highcharts.StockChart({

// ... 省略

yAxis: [{

min: 0,

max: 50,

opposite: false

}, {

min: 0,

max: 300

}

series: [{

data: [[x,y]...],

yAxis: 0

}, {

data: [[x,y]...],

yAxis: 1

}]

});

yAxisオプションを配列で追加します。
oppositeをfalseにすると軸がグラフの左側に表示されます。
デフォルトはtrueなので、右に表示されています。

そして、seriesではどのyAxisを使うのかを指定します。
今回は、0ならレンジが0-50の軸、1なら0-300の軸となります。

2軸のグラフサンプル
2軸表示されているのが分かると思います。

もっとデータ増やしたいよ

問題は、もっとデータが増えて、それをひとつのグラフに表示したい。となった場合。。。
単位まとめてグラフを分けたら?と言われたらそれまでですが、そういうわけにもいかないときはあります。

そういうときは、全てのデータを%換算して、表示を考えるわけですが、
そうすると今度はツールチップには実値がほしい...となります。

リファレンスを見てみると、データは[[x,y]...]形式だけでなく、

data: [{
    x: x,
    y: y,
    name: name
 }, {
    x: x,
    y: y,
    name: name
 },
 ...
]

data: [{

x: x,

y: y,

}, {

x: x,

y: y,

...

]

こんな形でも可能です。

となると、ただの力技ですが、全てのデータを%換算して、xに持たせます。
そして、換算前の実値をnameに放り込んでみるとどうでしょう...?

やってみよう

データの持たせ方を変えてみても、そのままではツールチップにはxの値が表示されます。
なので、ツールチップを表示を変更していきます。
ツールチップの表示は、tooltip.formatterを書くとカスタマイズできます。

var chart = Highcharts.StockChart({
  // ...省略
  tooltip: {
    useHTML: true,
    formatter: function (e) {
      var content = '';
      this.points.forEach(function (val) {
        var series = val.series;
        content += '<span style="color:' + val.color + '">' + series.name + '</span>:';
        content += val.point.name + '<br>';
      });
      return content;
    }
  }
});

var chart = Highcharts.StockChart({

// ...省略

tooltip: {

useHTML: true,

formatter: function (e) {

var content = '';

this.points.forEach(function (val) {

var series = val.series;

content += '<span style="color:' + val.color + '">' + series.name + '</span>:';

content += val.point.name + '<br>';

});

return content;

}

});

パーセント換算したサンプル
表示は%、ツールチップは実値になりました!
data1は0-50、data2は0-300、data3は0-150をレンジとしています。
サンプルは時間の表示をサボっていますが、this.xで時間がとれるので、上手く変換すればOKです。

注意点としては、長期間のデータを表示していると、特定の期間以上ではnameが取得できなくなるので、少し考える必要があります。
そうなったときは、val.series.options.dataに、入れたデータが入っているので、そこから取得できると思います。

最後に

ただの力技でしたが、いかがでしょうか。
複数のデータを分けずに一気に表示したいという場面は、意外とあると思いますよ(ない?)

Highstockは簡単に時系列グラフが描画できるのでオススメです!
商用で使う場合はライセンス買いましょう。。。

KEYPOINT – キー・ポイント株式会社開発日誌