Highcharts を試す

ちょっとした用でグラフを書きたくなったので Highcharts を試してみました。

Javascript で動くライブラリなのですがかなり綺麗なグラフが書けます。

最初は rrdtool なんかを使おうかとも思ってましたが、インストールをためらってこっちにしました。

下記は試しに家のサーバリソース使用率をグラフ化したものです。

スポンサーリンク

Highcharts Demo

マウスを乗っけるとポインタなんかも出せるので結構便利です。

リソースデータなんかは大まかな傾向を見れればそれで良いのですが、ごく稀にピンポイントな情報も見たくなるのでコレだったらバッチリです。

適当なソースですが一応貼っておきます。

パラメータのメモも残したいところですが、Wordpres で外部 js を動かすのに手こずったので、それは次回以降書きます。

var data;
var chart;
var date = new Array();
var cpu = new Array();

$(document).ready(function() {

    $.getJSON('http://example.com/js/data/cpu.json', function(data) {

        var dataLength = data.length;

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

            date.push( data[i][0] );
            cpu.push( data[i][1] );

        };

        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
            },

            title: {
                text: 'CPU History'
            },

            credits: {
                text: ''
            },

            xAxis: {
                categories: date,
                labels: {
                    step: 60,
                }
            },

            yAxis: {
                min: 0,
                title: {
                    text: '%'
                }
            },

            legend: {
                align: 'right',
                x: -100,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },

            tooltip: {
                formatter: function() {
                    return '<strong>'+ this.x +'</strong>'+
                    this.series.name +': '+ this.y +''+
                    'Total: '+ this.point.stackTotal;
                }
            },

            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: [0, 0, 0, 300],
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, 'rgba(2,0,0,0)']
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                radius: 5
                            }
                        }
                    }
                }
            },

            series: [{
                type: 'area',
                name: 'cpu',
                data: cpu
            }]

        });
    });
});