とりぷるぷぅ技術メモ: [Highcharts]2 つの csv ファイルからデータを読み込んで 1 つのグラフに表示

2013年1月26日土曜日

[Highcharts]2 つの csv ファイルからデータを読み込んで 1 つのグラフに表示

highcharts1.html

<html>
  <head>
    <title>Highcharts test 1 (2 つの csv ファイルからデータを読み込んで表示)</title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="../js/highcharts.js"></script>
    <script type="text/javascript" src="../js/modules/exporting.js"></script>
    <script type="text/javascript" src="highcharts1.js"></script>
  </head>
  <body>
    <div id="container0" style="height: 400px; margin: 0;"></div>
  </body>
</html>

highcharts1.js

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container0',
            type: 'line',
            zoomType: 'xy',
        },
        title: {
            text: 'test chart 1',
        },
        xAxis: {
            categories: []
        },
        yAxis: {
        },
        series: []
    }

    $.get('highcharts1_data2011.csv', function(data) {
        // Split the lines
         var lines = data.split('\n');

        // Iterate over the lines and add categories or series
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');

            // header line contains categories
            if (lineNo == 0) {
                $.each(items, function(itemNo, item) {
                    options.xAxis.categories.push(item);
                });
            }
            // the rest of the lines contain data with their name in the first position
            else {
                var series = {
                    name: '2011',
                    data: []
                };
                $.each(items, function(itemNo, item) {
                    series.data.push(parseFloat(item));
                });

                options.series.push(series);
            }
        });
    });

    $.get('highcharts1_data2012.csv', function(data) {
        // Split the lines
         var lines = data.split('\n');

        // Iterate over the lines and add categories or series
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');

            // header line contains categories
            if (lineNo == 0) {
                $.each(items, function(itemNo, item) {
                    options.xAxis.categories.push(item);
                });
            }
            // the rest of the lines contain data with their name in the first position
            else {
                var series = {
                    name: '2012',
                    data: []
                };
                $.each(items, function(itemNo, item) {
                    series.data.push(parseFloat(item));
                });

                options.series.push(series);
            }
        });

        // Create the chart
        var chart = new Highcharts.Chart(options)
    });
});

highcharts1_data2011.csv

Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
5.1,7.0,8.1,14.5,18.5,22.8,27.3,27.5,25.1,19.5,14.9,7.5

highcharts1_data2012.csv

Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
4.8,5.4,8.8,14.5,19.6,21.4,26.4,29.1,26.2,19.4,12.7,7.3

出力結果
sample04 (fc2 に置いてあるテストページに飛びます)

5 件のコメント:

あん2015年5月21日 17:11
はじめまして。Highchartsを使ってグラフを作るために勉強をしているものです。
参考にさせてもらいたく思います。

このサンプルは２つのcsvですが、１つのcsvﾌｧｲﾙに複数データが入っている場合でも同じように動くのでしょうか？

a,b,c,d,e,f,g ←タイトル
1,2,3,4,5,6,8　←データ
7,6,5,4,3,2,1　←データ
・・・・

ご教授のほどよろしくお願いします。
返信削除
返信

コメントを追加