Geek Answers Handbook

Creating a line graph with high charts and data in an external csv

I read the Highcharts manual, checked the demo galleries, searched google, read the X number of exact similar streams here on stackoverflow, but I can't get it to work.

I register the data in the csv file as a date, value.

Here is 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 here is how I managed to get the code:

http://jsfiddle.net/whz7P/

This displays a chart, but without any series or data. I think I fake things during data formatting so that they can be interpreted in tall charts.

Anyone who can give a helping hand?

+4
source share
4 answers

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 break it into an array of strings, so each element of the array is a string.
Then for each line you do the following.

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

But not there ; in the line, you must split using,.
The result will be a multi-disk array, each element of which is an array with the following structure. It will be stored in var named data .

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

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

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

The result is a working char t.

So, everything can be renewed until the next.

 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);
+4
source

Looking at your part of line.split:

 $.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 it with a comma (;) instead of a comma (,), which is what your CSV data samples have.

+1
source

You need to put

  $(document).ready(function() {

in the first line and

  });

in the last line of javascript to make this work.

0
source

Failed to load csv file? Is this identical to what you wrote in your original post? I ran into the same problem and it turned out that there were errors in the data file.

0
source

More articles:


All Articles