Select which columns from CSV to graph with HighChart

Question

As I was looking at the question How do I select which columns from my CSV to chart with HighChart? I tried to apply it using a csv file but I could not get it to work!

What am I doing wrong? Thank you in advance:

$(function () {
//var data = "Year,Month,Day,Hour,Time,kWh,Savings,Total kWh\n2013,02,06,11,11:00,0,0,308135\n2013,02,06,11,11:59,15,1.875,308150\n2013,02,06,12,12:59,27,3.375,308177\n2013,02,06,13,13:59,34,4.25,308211\n2013,02,06,14,14:59,32,4,308243";
var options = {
    chart: {
        renderTo: 'EXAMPLE',
        defaultSeriesType: 'line'
    },
    title: {
        text: 'Current Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: hassayampa.csv', 
        x: -20
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis:{        
        title: {
            text: 'Temperature (\xB0C)'
        },
        //min: 0
    },
    legend:{
            layout: 'vertical',
            //backgroundColor: '#FFFFFF',
            //floating: true,
            align: 'left',
            //x: 100,
            verticalAlign: 'top',
            //y: 70,
            borderWidth: 0
         },
    series: [{
        name: 'PRIM OUT TEMP',
        data: []
    }, {
        name: 'SEC OUT TEMP',
        data: []
    }]
};

// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){   
    var lines = data.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        if(lineNo !== 0) {
           var x = + new Date(items[1]+'/'+items[2]+'/'+items[0]+' '+items[4]),
               kwh = parseFloat(items[5]),
               savings = parseFloat(items[6]);
            if(!isNaN(kwh) && !isNaN(savings)){
                options.series[0].data.push([x,kwh]);
                options.series[1].data.push([x,savings])
            }
        }

    });
});
new Highcharts.Chart(options);
});

Here is the jsfiddle:http://jsfiddle.net/tonystinge/3bQne/1223/

"but I could not get it to work" -- what exactly isn't working? Your fiddle doesn't work due to CORS restrictions, but hardcoding your data your code works fine: http://jsfiddle.net/3bQne/1224/ — Mark, Jun 19 '14 at 18:40
When I try using this [EXAMPLE.csv](http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv) it does not graph it. I understand it works using "var data ='...'" but I am trying to get it to work using an external file. Thank you for your attention. @Mark — tonystinge, Jun 19 '14 at 19:42
I see how it would not work in jsfiddle because of CORS Restrictions, but it still does not work when I am using my website server. — tonystinge, Jun 19 '14 at 19:50
my email is tony@georemco.com I appreciate all the help you have given me @Mark — tonystinge, Jun 19 '14 at 20:43
Again I ask--> "but I could not get it to work" -- what exactly isn't working? Looking at your test.php page, the first thing that jumps out is 4 easy to fix javascript errors: `Uncaught SyntaxError: Unexpected identifier monitor/SiteData/Data/Lane_Metals/GRAPH/CONTAINER.js:6 Uncaught ReferenceError: options is not defined FRUIT.js:64 Uncaught ReferenceError: options is not defined LOVELAND.js:61` Fix these errors first and see if still have a problem? Learn to check the javascript console for errors frequently. Build your code up little by little and fix things as you go... — Mark, Jun 19 '14 at 20:56
Okay sir, I've cleaned up my scripts. When I say "_I could not get it to work_" I mean that I cannot get [EXAMPLE.csv](http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv) to graph. I am trying to use this file so I can actually use the file that I'm actally going to use: [hassayampa.csv](http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/hassayampa.csv) Thank you for your patience with me. So If I can get this example to work I will be able to make the required changes myself. — tonystinge, Jun 19 '14 at 23:13

score 1 · Accepted Answer · answered Jun 20 '14 at 14:21

I got it now...

// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){   
    // parsing here...
});

new Highcharts.Chart(options);
});

Your problem is the placement of the new Highcharts.Chart(options) call. $.get (like most ajax calls) is asynchronous So the new Highcharts will be called before it completes.

Change it to this:

// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){   
    var lines = data.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        if(lineNo !== 0) {
           var x = + new Date(items[1]+'/'+items[2]+'/'+items[0]+' '+items[4]),
               kwh = parseFloat(items[5]),
               savings = parseFloat(items[6]);
            if(!isNaN(kwh) && !isNaN(savings)){
                options.series[0].data.push([x,kwh]);
                options.series[1].data.push([x,savings])
            }
        }
    });
    new Highcharts.Chart(options); // this is now in the $.get callback function
});

Select which columns from CSV to graph with HighChart

1 Answers1