Highcharts
Highchartsはデータのビジュアライズライブラリです。
棒グラフ、線グラフ、円グラフ、散布図、箱ひげ図、レーダー図などに対応しており、見た目も記述方法もシンプルなのが特徴です。
loadの方法は基本的にはCDNだと思いますが,複数あります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
Line-Chart
線グラフの基本的なコードはdemo/line-basicをご参照ください。
seriesにデータを入れていくのですが、UTCTimeを使う場合は[x,y] 、具体的には [[1418943600000, 0], [1418943600000, 2], …] のような形でseriesに入れる必要があります。
jqueryプラグインのためajaxでサーバからデータを取得するのも簡潔に書けます。
$.getJSON('/api/timeseries',function(json) {
// highcharts用にデータ整形
...
$('#container-line').highcharts({
...
})
)}
取得したデータが以下の構造だとします。(自分が作っているTODO管理サービスのAPIで試しました)
"timeseries": [
{
"web": 0,
"shopping": 1,
"createTask": 0,
"personal": 0,
"remainTask": 8,
"work": 1,
"book": 0,
"health": 0,
"movie": 1,
"date": "2014/12/21-12:00:00",
"doneTask": 0
},
{
"web": 0,
"shopping": 0,
"createTask": 0,
"personal": 0,
"remainTask": 8,
"work": 0,
"book": 1,
"health": 0,
"movie": 0,
"date": "2014/12/21-11:00:00",
"doneTask": 0
},
...
X-Axisの設定で注意するのは上記のようにloadしたデータが降順の場合は昇順に並び替えないといけません。
またUTCTimeを使った場合は時刻が連続になっていなければなりません。
var doneTask = []
for (var i = timeseries.length-1; i > 0; i--) {
var d = new Date(timeseries[i]['date'].replace('-',' '))
var utc = getUTCTime(d)
doneTask.push([utc, timeseries[i]['doneTask']])// => [x,y]
...
}
以下のようなグラフになります。
Pie-Chart
円グラフの基本的なコードはdemo/pie-basicをご参照ください。
plotOptionsのformatで {point.percentage:.1f} と書いておきます。
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
}
データ加工で以下のようにsumだけ計算。
for (var i = t.length-1; i > 0; i--) {
ratio.personal += timeseries[i]['personal']
ratio.web += timeseries[i]['web']
ratio.book += timeseries[i]['book']
ratio.movie += timeseries[i]['movie']
ratio.shopping += timeseries[i]['shopping']
ratio.health += timeseries[i]['health']
ratio.work += timeseries[i]['work']
};
パーセントに変換しなくてもそのままseriesに入れると以下のように変換されパーセント表示されます。
Dynamic-Update
チャートを動的に更新する設定はeventsで行います。
以下例ではsetIntervalを使って1秒ごとにseries.addPoint()で更新しています。
センシングデータの可視化に使いたい。
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
全てのコードはdemo/dynamic-updateをご参照ください。
3D-Plot
以下を追加することで3次元化もできます。
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
draggableなのが素晴らしい。
全てのコードはdemo/3d-scatter-draggableをご参照ください。
慣れるとExcelより高速にきれいなグラフが書けそう。
他には,株価のグラフ化に特化したhighstockも本格的な感じです。
多様なデータフォーマットに対応している点においてD3.jsの方が優位だと思うけど、可視化のみに焦点を当てた学習コストの低さではHighchartsの方が良さそうです。