CODEWITHSUNDEEP
javascriptarraysjsoncsvhighcharts
Ian vh
Ian vh

Reputation: 3

Highcharts csv data loading and parse into separate array and json

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?

Upvotes: 0

Views: 985

Answers (1)

Redu
Redu

Reputation: 26161

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);

Upvotes: 1

Related Questions