前回は「2種類のグラフ」で「別のデータ」を表示してみました。
次は、同じデータを別の切り口(グラフ)で表現するhighchartsのサンプルを見てみましょう。

具体的なイメージは以下のようになります。

f:id:sho322:20140513074452j:plain

横グラフと縦グラフで、同じデータについて表示できているのがわかります。

これを表示するためのサンプルはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>highchartsのサンプル</title>

<style type="text/css">
.example-container {
    border: 1px solid #000;
    padding: 20px;
    float: left;
    margin: 10px;
}

.example {
    width: 300px;
    height: 300px;
    float: left;
}
.example + .example {
    margin-left: 60px;
}
</style>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/highcharts.src.js"></script>
<script src="js/highcharts-more.src.js"></script>
<script>
$(document).ready(function() {
	var barOptions;
    var columnOptions;
    var chartData = [2,3,4,5]

    barOptions = {
        chart: {
            type: bar
        },
        title: {
            text: バーグラフ
        },
        series: [{
            name: "Bar #1",
            data: chartData
        }]
    };

    columnOptions = {
        chart: {
            type: column
        },
        title: {
            text: 縦グラフ
        },
        series: [{
            name: Column #1,
            data: chartData
        }]
    }
    
    $(#example1).highcharts(barOptions);
    $(#example2).highcharts(columnOptions);

});
</script>

</head>
<body>

<div class=example-container>
    <div class=example id="example1"></div>
</div>

<div class=example-container>
    <div class=example id="example2"></div>
</div>

</body>
</html>

前にも書きましたが、highchartsはブラウザ上でグラフを描くのに非常に便利なjQuery Pluginです。
これは昨今の統計学の盛り上がりととても相性がよく、統計的に解析したデータを表現するためにとても便利です。

まだまだ便利な使い方ができると思うので、色々と見ていきたいと思います。