Highcharts csv data loading and parse into separate array and json

Question

First post here, and I am quite new to javascript so hopefully explaining my question correct. I am trying to process data from a csv file into JSON and create a Highcharts chart with this data, but don’t know where to start. I looked into a lot of answers but they do not fully seem to address my question. My goal is to produce a Highcharts stacked area chart from a csv file located on the same server.

The Highcart code I now have uses a single array for the x-axis named categories (years in this example): var categories = [ '1850', '1900', '1950', '2000']; and a JSON for the dataseries: var data = [{ name: 'Line1', data: [116, 127, 131, 143] }, { name: 'Line2', data: [206, 217, 221, 233] }, { name: 'Line3', data: [303, 313, 326, 338] }]

Most datasets and charts used in previous answers use a csv file with vertical representation of time series where the second column is used for the data. For instance the daily stockprice of last year.

But the data.csv file I am planning to use looks like this:

Lines, ‘1850’, ‘1900’, ‘1950’, ‘2000’
Line1, 116, 127, 131, 143
Line2, 206, 217, 221, 233
Line3, 303, 313, 326, 338

I was thinking about using a $.get function like this:$.get(‘data.csv’, function (csvfile) { //existing code for creating the chart… } and create a function for parsing the csv data into the variable Data and the variable Categories. But I have no clue how to do this..

The basic code (with hardcoded data) in this: JSfiddle

Does someone have an idea which javascript code I need to parse CSV data into the json/data of the Highcharts graph ?

EDIT: I use this code to read the csv data through an ajax call and an process the received data:

  $(document).ready(function() {
$.ajax({
    type: "GET",
    url: "data.csv",
    dataType: "text",
    success: function(data) {processData(data);}
});
});

function processData(data) {
var table = data.split("\n").map(line => line.split(","));
var categories = table[0].slice(1);
var data = table.slice(1).map(a => ({"name": a[0], "data": a.slice(1)}));
console.log(data);
console.log(categories);};

The data is received correct but the array consists of strings instead of numbers. Which part do i need to modify in the processData function to get number datatype?

Redu · Accepted Answer · 2016-05-21T11:40:32.157

1

Assuming that your csv data arrives in the form of "Lines,1850,1900,1950,2000\nLine1,116,127,131,143\nLine2,206,217,221,233\nLine3,303,313,326,338" then in order to construct your categories and data arrays you might do as follows;

var csvData = "Lines,1850,1900,1950,2000\nLine1,116,127,131,143\nLine2,206,217,221,233\nLine3,303,313,326,338",
      table = csvData.split("\n").map(line => line.split(",")),
 categories = table[0].slice(1),
       data = table.slice(1).map(a => ({"name": a[0], "data": a.slice(1)}));

console.log(categories);
console.log(data);

And if you would like to receive the array contents as number type instead of string you may do as follows;

var csvData = "Lines,1850,1900,1950,2000\nLine1,116,127,131,143\nLine2,206,217,221,233\nLine3,303,313,326,338" ,
      table = csvData.split("\n").map(line => line.split(",")),
 categories = table[0].slice(1).map(e=>e*1),
       data = table.slice(1).map(a => ({"name": a[0], "data": a.slice(1).slice(1).map(e=>e*1)}));

console.log(categories);
console.log(data);

edited May 21 '16 at 11:40

answered May 20 '16 at 18:18

Redu

25,060
6
56
76

Thanks for your reply Redu. I do not yet totally undertsand. I now have $.get(‘data.csv’, function (csvFile) { var csvData = "Lines,1850,1900,1950,2000\nLine1,116,127,131,143\nLine2,206,217,221,233\nLine3,303,313,326,338" – Ian vh May 20 '16 at 20:25
@Ian vh : Ian first you have to read your csv data successfully. Since i think you are doing this with jQuery i would recommend you to read http://stackoverflow.com/a/7431565/4543207 in which he is getting the csv data through an ajax call. Try to use the snippet above in the processData function in that answer to process your received data. If the data you receive is different than my assumption post it here and i can modify my answer accordingly. – Redu May 20 '16 at 20:41
Thanks already, your answer helped in receiving and processing the data, only thing left is that the arrays consists of strings instead of numbers. (See my edit in the question). do you have an idea how to fix this? – Ian vh May 21 '16 at 11:21
@Ian vh .. You can check the modified 2nd version of the code for number type items in the arrays. – Redu May 21 '16 at 11:42
Highcharts plots the graph with the three lines so number type items is working but there is an extra datalabel in the graph called "Series 4". This is because the variable data consist of an array with 4 objects with the last object empty for "data" and "name". I added this code before the console.log in your 2nd version of the code: var lengthdata = data.length - 1; var datachart = data.splice(0, lengthdata); This does the trick but is a little bit a workaround maybe, is there any other nicer way? – Ian vh May 21 '16 at 16:21

Highcharts csv data loading and parse into separate array and json

1 Answers1

Linked