感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

同じデータを2つのグラフで横並び比較

<スポンサーリンク>

前回は「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です。
これは昨今の統計学の盛り上がりととても相性がよく、統計的に解析したデータを表現するためにとても便利です。

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