4

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?

Sheena
  • 15,590
  • 14
  • 75
  • 113
Maxion
  • 45
  • 1
  • 4

4 Answers4

4

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);
Ricardo Alvaro Lohmann
  • 26,031
  • 7
  • 82
  • 82
  • Awesome! Thanks for actually taking the time to explain the code, you've made me much smarter. Though I've tried wrapping the new formatting code inside the jQuery.get function, but it only renders a chart without data... Am I doing it wrong when I wrap it like so? http://jsfiddle.net/Z3ZgN/ – Maxion Dec 13 '12 at 22:45
  • @Maxion It's correct, problably you have to use `data = jQuery.parseJSON(data)` before split it. – Ricardo Alvaro Lohmann Dec 14 '12 at 02:34
  • Hmm I tried adding the JSON parse but it still wouldn't render. Must be a problem with how it reads the file, as the data.csv file contains the exact same data as you used inline; which worked. http://jsfiddle.net/t9EqR/ – Maxion Dec 14 '12 at 11:39
1

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.

wergeld
  • 14,332
  • 8
  • 51
  • 81
0

You need to put

    $(document).ready(function() {

in the 1st line, and

     });

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

Ragavendra
  • 90
  • 5
0

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.

coldler
  • 3
  • 3