load multiple csv files (correct order) in one chart

问题

I want to load x csv files and render the data to a line chart. Loading 1 csv file and create a line chart works already fine.

My csv file:

Date,PV,Energy
1355100420,0.000,0.851
1355100480,0.000,0.841
1355100540,0.000,1.000
1355100600,0.000,0.984
1355100660,0.000,1.006
1355100720,0.000,2.769
1355100780,0.000,2.791

My problems: the number of csv files is various and the correct order is important, because the x axis is my time axis and I have the dates/times in the 1st column of my csv.

Read a single csv:

$.get(csv_file, function(data) {
    var series = [];
    // Split lines
    var lines = data.toString().split('\n');
    // For each line, split the record into seperate attributes
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');
        // first line contains the series names
        if (lineNo === 0) {
            for (var i = 1; i < items.length; i++) {
                series.push({
                    name : items[i],
                    data : [],
                    dataGrouping : {
                        enabled : false
                    }
                });
            }
        } else {
            for (var i = 1; i < items.length; i++) {
                // get the serie
                var serie = series[i - 1];
                serie.data.push([parseFloat(items[0] * 1000), parseFloat(items[i])]);
            }
        }
    });
    chart = new Highcharts.StockChart({
        chart : {
            renderTo : container_id,
            type : 'line',
            reflow : true,
        },
        xAxis : {
            type : 'datetime'
        },
        series : series
    });
});

But how can I read multiple csv files in the correct order?

Thanks a lot!

回答1:

You can use a few get() functions and push data in correct order.

Example with using 2 data csv.

var options = {
    chart: {
        renderTo: 'container',
        zoomType: 'xy',
    },
    title: {
        text: ''
    },
    series: []
};
$.get('data1.csv', function (data) {
    // Split the lines
    options.series.push({
        name: 'aaa',
        data: []
    });

    var lines = data.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        options.series[0].data.push([
        parseFloat(items[0]),
        parseFloat(items[1])]);
    });
});

$.get('data2.csv', function (data) {
    // Split the lines
    options.series.push({
        data: []
    });
    var lines = data.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        options.series[1].data.push([
        parseFloat(items[0]),
        parseFloat(items[1])]);
    });
    var chart = new Highcharts.Chart(options);
});

CSV1

    16.40803,22.670
16.40772,20.840
16.40740,20.327
16.40709,21.532
16.40678,24.302
16.40646,26.108

CSV2

    16.43353,  -19.142
16.43322 , -18.813
16.43290  ,-19.157
16.43259  ,-19.417
16.43228  ,-19.428
16.43196  ,-19.747

回答2:

Her you can find example how to load multiple files: http://www.highcharts.com/stock/demo/compare

Difference is that, you need to first parse that values (as you are doing in first post), and push them into one array. Next step is simply to sort that array ( simple data.sort(function(a,b){ return a[0] - b[0]; }) should be enough ) and put sorted data into series.data.

来源：https://stackoverflow.com/questions/15918532/load-multiple-csv-files-correct-order-in-one-chart

标签

jquery

ajax

csv

Highcharts