HighchartsとCSV

INDEX

はじめに
動作環境1
動作確認2
サンプルデータ
グラフのサンプル
必要なファイル
Highcharts
JQuery
html
mydata.js

はじめに

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);
});