HighchartsとCSV

Linux

はじめに

HighchartsでCSVファイルからXY軸のラベルとデータ名称を読み取るようにしました。

動作環境1

  • jQuery ver.1.7
  • Highcharts ver.2.1.9
  • jquery.csv.js ver.1.0
  • jquery.csv.js ver.1.0 改造版

動作確認2

IE以外はローカルでは動作しなかった。

  • WindowsXP Pro SP3 32bit
  • Mozila Firefox ver.9.0
  • Opera ver.11.60
  • Safari v.5.1.1
  • Google Chrome v.16.0.912.63
  • IE 8.0.6001.18702
  • IE7(IETester v.0.4.11)
  • IE6(IETester v.0.4.11)

サンプルデータ

適当に作ったものです。
highchart2.zip

グラフのサンプル

上記データをグラフ表示したもの。

必要なファイル

  • jquery-min.js(Googleで検索)
  • Highcharts(「js」ディレクトリを使う。)
  • サンプルデータ(カンマ、又はタブ区切り)(上記)
  • jquery.csv.js(Googleで検索)
  • mydata.js(下記)
  • XHTMLファイル(下記)

Highcharts

Highcharts - Interactive Charting Library for Developers
Create interactive data visualization for web and mobile projects with Highcharts core, Highcharts S...

JQuery

jQuery
jQuery: The Write Less, Do More, JavaScript Library

html

UTF-8で保存。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Graph</title>
<script src="./jquery.min.js" type="text/javascript"></script>
<script src="./js/highcharts.js" type="text/javascript"></script>
<script src="./js/modules/exporting.js" type="text/javascript"></script>
<!--
<script src="./js/themes/gray.js" type="text/javascript" ></script>
-->
<script src="./jquery.csv.js" type="text/javascript"></script>
<script src="./mydata.js" type="text/javascript"></script>
</head>
<body>
<h1>Highcharts Graph</h1>
<div id="container" style="width: 100%; height: 400px"></div>
</body>
</html>

mydata.js

UTF-8で保存。
「jquery.csv.js」は改行コードを指定出来るように改造したものを使っています。
CSVデータは4列と仮定している。
1行目はXY軸のラベル。
2行目は各データ名称。
データは3行目から始まる。
データ1は、1列目と2列目で、1列目がX軸データ、2列目がY軸データ。
データ2は、3列目と4列目で、3列目がX軸データ、4列目がY軸データ。

$.get('data.txt', function( data ) {
    var mydata1 = [];
    var mydata2 = [];
    var label_x = '';
    var label_y = '';
    var item_1  = '';
    var item_2  = '';
    var csv     = $.csv("\t", "\n")( data );  // modified jquery.csv.js
    // var csv     = $.csv("\t")( data );  // original jquery.csv.js

    // read csv file
    $( csv ).each( function( i )
    {
        // 1行目 ラベル
        if ( i == 0 && isNaN( this[0] ) )
        {
            label_x = this[0];
            label_y = this[1];
            // alert( label_x );
            // alert( label_y );
            return;
        }

        // 2行目 各アイテム名称
        if ( i == 1 && isNaN( this[1] ) )
        {
            item_1 = this[1];
            item_2 = this[2];
            return;
        }

        // 3行目以下、データ
        mydata1.push( [parseFloat( this[0] ), parseFloat( this[1] )] );
        mydata2.push( [parseFloat( this[2] ), parseFloat( this[3] )] );
    });

    // alert( mydata1[ 1 ] );
    // alert( mydata2[ 1 ] );

    // Highcharts option
    var options = {
        // CSV data
        series: [
            {
                data: mydata1,
                // data: [[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]],
                name: item_1,
                color: 'rgba(223, 83, 83, .5)'
            },
            {
                data: mydata2,
                name: item_2,
                color: 'rgba(119, 152, 191, .5)'
            }
        ],
        chart: {
            renderTo: 'container', // The same name written in HTML files
            defaultSeriesType: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'Highcharts Test'
        },
        subtitle: {
            text: 'hogehoge'
        },
        xAxis: {
            title: {
                enabled: true,
                text: label_x
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: label_y
            }
        },
        tooltip: {
            formatter: function() {
                return ''+
                this.x +' unit, '+ this.y +' ul';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 70,
            floating: true,
            borderWidth: 1
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                }
            }
        }
    }

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

Comments