Creating a line graph with highcharts and data in an external csv

Question

I've read through the Highcharts how-to, checked the demo galleries, searched google, read the X amount of exact similar threads here on stackoverflow yet I cannot get it to work.

I'm logging data in a csv file in the form of date,value.

Here's what the date looks like

1355417598678,22.25
1355417620144,22.25
1355417625616,22.312
1355417630851,22.375
1355417633906,22.437
1355417637134,22.437
1355417641239,22.5
1355417641775,22.562
1355417662373,22.125
1355417704368,21.625

And this is how far I've managed to get the code:

http://jsfiddle.net/whz7P/

This renders a chart, but with no series or data at all. I think I'm fudging things up while formatting the data so it can be interpreted in highcharts.

Anyone able to give a helping hand?

Answer 1

So, you have the following data structure, right ?

1355417598678,22.25
1355417620144,22.25
1355417625616,22.312
1355417630851,22.375
1355417633906,22.437
1355417637134,22.437
1355417641239,22.5
1355417641775,22.562
1355417662373,22.125
1355417704368,21.625

Then you split it into an array of lines, so each array item is a line.
Then for each line you do the following.

var items = line.split(';'); // wrong, use ','

But there ins't ; into the line, you should split using ,.
The result will be a multidimencional array which each item is an array with the following structure. It will be stored in a var named data.

"1355417598678","22.25" // date in utc, value

This is the expected data for each serie, so you can pass it directly to your serie.

var serie = {
    data: data,
    name: 'serie1' // chose a name
}

The result will be a working chart.

So everything can be resumed to the following.

var lines = data.split('\n');
lines = lines.map(function(line) {
    var data = line.split(',');
    data[1] = parseFloat(data[1]);
    return data;
});

var series = {
    data: lines,
    name: 'serie1'
};
options.series.push(series);

Answer 2

Looking at your line.split part:

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

It looks like you are trying to split on a semi-colon (;) instead of a comma (,) which is what is in your sample CSV data.

Answer 3

You need to put

    $(document).ready(function() {

in the 1st line, and

     });

in the last line of the javascript to make this work.

Answer 4

Could you upload your csv file? Is it identical to what you wrote in your original post? I ran into the same problem, and it turns out there are errors in the data file.