Highcharts の応用メモ

Highcharts のちょっと高度な使い方です。

Highcharts を試す と Highcharts のメモ書き で基本的なことを書きましたが、今回は下記の事をグラフで実現したいと思います。

長期間のグラフデータを表示
時には詳細な値も確認したい
1 枚のグラフ上に複数の値を描画

サーバリソースの情報をグラフ化する場合は、MRTG が一般的ですが、期間が経つと値が丸められて詳細な情報がわからなくなるといった不満があります。

で、その不満を解消したグラフがコレです。

Demo グラフ

データは適当なのですが 100 を起点としたグラフを書いています。目印として　100 のラインを赤で表示させてます。

基本的な部分は前回作成したグラフと大した変わりはないのですがこのグラフには下記の機能があります。

1ヶ月、6ヶ月、1年などの予め設定した表示期間を選択できる機能
From に “yyyy-mm-dd ? yyyy-mm-dd” と指定することで任意の範囲表示ができる機能
グラフをマウスでスライドさせる事により遡りながら表示する機能

3 つの異なるデータを表示しているのはオマケのようなものです。

今回はこのグラフを作成するために Highcharts ではなく、関連ライブラリの Highstock を利用しています。

為替、株価を表示するのに特化したファイナンス向けのライブラリですが期間の機能が優秀なので使ってみました。

使い方は Highcharts 公式サイトより Highstock の zip ファイルを Download してきます。

1 Highstock の設置方法
2 Highstock でグラフを描画するサンプルソース
- 2.1 Highstockの時間をJST表示にする方法
- 2.2 Highstockに渡すJSONデータについて

Highstock の設置方法

解凍した Highstock の中にある highstock.js を任意の場所にアップロードします。

次に html に下記のように記述します。下記は js/ にアップロードしたものと想定して記載しています。

<script src='js/jquery.min.js'></script>
<script src='js/highstock.js'></script>

Highstock でグラフを描画するサンプルソース

この記事にあるグラフはは下記のようなソースコードで書きました。

jQuery(function() {

    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
});

jQuery(function() {

    jQuery.getJSON('http://example.com/json_data/demo2.json', function(data) {

        var line1 = [];
        var line2 = [];
        var line3 = [];

        var dataLength = data.length;

        for (var i = 0; i < dataLength; i++) {

            line1.push([
                data[i][0],
                data[i][1]
            ]);

            line2.push([
                data[i][0],
                data[i][2]
            ]);

            line3.push([
                data[i][0],
                data[i][3]
            ])
        }
        window.chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'highcharts_demo2',
            },

            scrollbar: {
                enabled: false
            },

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'Multi Line'
            },

            credits: {
                text: ''
            },

            yAxis: {
                lineWidth: 0,
                offset: 10,
                labels: {
                    align: 'right',
                    x: -3,
                    y: 6
                },
                plotLines : [{
                    value : 100,
                    color : 'red',
                    dashStyle : 'shortdash',
                    width : 2
                }]
            },

            legend: {
                enabled: true,
                align: 'right',
                layout: 'vertical',
                verticalAlign: 'top',
                y: 100,
            },

            navigator : {
                enabled : false
            },

            series: [{
                name: 'line1',
                data: line1,
                type: 'spline',
                tooltip: {
                    yDecimals: 2
                }
            },{
                name: 'line2',
                data: line2,
                type: 'spline',
                tooltip: {
                    yDecimals: 2
                }
            },{
                name: 'line3',
                data: line3,
                type: 'spline',
                tooltip: {
                    yDecimals: 2
                }
            }]
        });
    });
});

Highstockの時間をJST表示にする方法

jQuery(function() {

    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
});

デフォルトは UTC で表示されてしまうので useUTC: false を忘れずに設定しましょう。

Highstockに渡すJSONデータについて

JSON データは下記のようなモノを用意しました。

[
[996418800000,101.46,101.9,101.11],
[996505200000,101.18,102.21,101.21],
[996591600000,101.81,101.93,102.16],
[996678000000,100.3,100.86,101.17],
[996764400000,100.29,101.03,100.3],
.
.
.
[1336057200000,98.217,100.08,98.925]
]

動作するイメージとしては JSON 配列を読み込んで、”日付, データ1, データ2, データ3″ の異なるデータを、”日付 + データ” の形式で配列を再作成、それを最後に Highstock に渡してあげています。

コード上の for 文の処理がそれにあたりますが、ループさせ下記のような配列を作成しています。

つまり、同じ日付 (X) 上に異なるデータ (Y) を表示させるための配列です。

line1 = [996418800000,101.46],[996505200000,101.18].....
line2 = [996418800000,101.46],[996505200000,102.21].....
line3 = [996418800000,101.11],[996505200000,101.21].....

ここで注意するのは日付のデータは 「UnixTime * 1000」の形式にしておく必要があります。

こうしないと Highstock はエラーが出て動きません。

最初から UnixTime でグラフデータを記録している場合は比較的楽に変換できますが、yyyymmdd… 形式の場合は別の変換処理が必要になります。

あと、Zoom に表示される期間は今回デフォルトの状態です。

これもカスタマイズできますが、また別の機会で説明できればと思います。