Series generation on parsing data

[CSommer]

Hi All,

I have generated a script, but it is not creating the individual series by using column 3 of my csvURL.

My script is:

Highcharts.stockChart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Stock Chart with CSV Data Source'
},
xAxis: {
type: 'datetime'
},
series: [],
data: {
csvURL: 'https://mydata.csv',
parseCSV: function (data) {
var lines = data.split('\n'),
series = [],
dateTimeFormat = /(\d{13})/;;

// Iterate over the lines of the CSV data
for (var i = 0; i < lines.length; i++) {
var line = lines.split(','),
dateTime = parseInt(line[0]),
value = parseFloat(line[1]),
seriesName = line[2],
marker = line[3];

// Find or create the series based on the seriesName
var series = seriesData.find(function (s) {
return s.name === seriesName;
});
if (!series) {
series = {
name: seriesName,
data: [],
marker: {
enabled: marker === 'true'
}
};
seriesData.push(series);
}

// Add the point to the series
series.data.push([dateTime, value]);
}

// Set the parsed series data to the chart
this.update({
series: seriesData
});
}
}
});

my data format is :

1487716365000,26,Oranges,main
1487716365000,27,Apples,main
1487716365000,29,Bananas,main
1487716365000,26,Oranges,secondary
1487716365000,27,Apples,secondary
1487716365000,29,Bananas,secondary


column 1 is the date time, coulumn 2 is the value, column3 is the series, coulmn 4 would apply a marker based on this variable

currently the script above is generating only one series with all the data

This should generate 3 series Oranges, Apples, Bananas

[jakub.j]

Thanks for contacting us!

It will be better to use data.parsed and data.seriesMapping to place the data in the arrays, and than on load event, I set the series data to the correct series.

Demo: https://jsfiddle.net/BlackLabel/zf1aj2b9/

Feel free to ask any further questions!
Best regards
Jakub

[CSommer]

what if the series are undefined until the data is parsed. In the data example the Oranges etc are only examples, what if in the next data set that is returned there is pears. The series are defined by column 3 for each chart.

Regards

CSommer

[jakub.j]

Hey!

I changed the solution so that it's fully dynamic, no matter what the data is. If there is a data with a new name, a new series will be added.

Demo: https://jsfiddle.net/BlackLabel/tcq71p90/

I hope you will find it useful
Kind regards
Jakub

[CSommer]

When I change the data source to a csvURL this code falls over and does not produce series.

[jakub.j]

Hey!

Could you please send a demo where the problem occurs?

Best regards
Jakub

[CSommer]

Hi Jakub,

I simply replaced the csv reference in the code with a csvURL of my data.

csvURL: 'mydatasource.csv'


When I console log the columnName I can see that it has the correct data set and is accessing the data. When the chart is loaded the data series are not loaded and all the data is applied to a single series with a name of the first value (column 2) in the data set.

Regards

CSommer

[CSommer]

In addition to this it appears tha the series are not made as the code also stalls on:

chart.series[0].remove

When I console log the seriesData on the innerHTML data set there are headers in the data set and then the arrays are listed below.

{oranges: Array(2), apples: Array(2), bananas: Array(20, pears: Array(2)}
apples: (2) [{...},{...}]
bananas: (2) [{...},{...}]
oranges: ((2) [{...},{...}]
pears?: (2) [{...},{...}]

When I load the data by csvURL this header is empty, but the arrays of the data are correct below this.
{}
apples: (2) [{...},{...}]
bananas: (2) [{...},{...}]
oranges: ((2) [{...},{...}]
pears?: (2) [{...},{...}]

[CSommer]

So I have been trying a few things...

When I load all my data (18000 lines) into a <pre> in the html the code will work as intended.

When I load the data using a csvURL refernce, all the data is parsed into the arrays as intended, but the chart is loading all the data into a single series. This series does not appear to be removed by chart.series[0].remove. and subsequently:

const chart = this;
chart.series[0].remove;
chart.series[0].setData(seriesData.apples, false),
chart.series[1].setData(seriesData.oranges, false),
chart.series[2].setData(seriesData.bananas, false),
chart.redraw();

or

const chart = this
chart.series[0].remove()

for (const name in seriesData) {
chart.addSeries({
data: seriesData[name],
name: name
}, false);
}

chart.redraw();

does not add these arrays into the series as they do not show in the legend, only the reference for the entire data set array.

Is the issue the size of the initial array being loaded, which seems unlikely seeing the same data set loaded via the <pre> is working as intended.

Regards

CSommer

[jakub.j]

Hey!

I created a Google Spreadsheet to simulate your csvUrl and I faced the same problems, even without a lot of data. I created a demo where I made it work. The only thing is that you need to add a dummy data column without a header to your data, like here in column D: https://docs.google.com/spreadsheets/d/ ... edit#gid=0.

I changed the load event to render and tweaked the logic so that it removes the series when needed and creates new series.

Demo: https://jsfiddle.net/BlackLabel/p47mwaoj/

Let me know if that was what you were looking for!
Best regards
Jakub