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の方が良さそうです。

タグ: Highcharts

【JavaScript】Highchartsを使ってみた

Highcharts

Line-Chart

Pie-Chart

Dynamic-Update

3D-Plot