asdrgil
Posts: 2
Joined: Mon Nov 29, 2021 11:53 am

CSV parsing - plotting one line for each row

I have a large CSV (~35k lines) with the following structure:

Code: Select all

x1,x2,y
0.0025270464,0.0025272834,-0.1428221947
0.0032589307,0.0032591677,-0.0197038742
0.0032834723,0.0032836611,0.0294875668
0.003311774,0.003312011,0.0888863314
I want to plot one line for each line of the CSV. The two connected points for each line would be (x1, y)-(x2, y). I believe that this could be achieve with Highcharts combining these two Fiddles: plot points, read csv. The thing is that the CSV examples that I've found plot all the data in the same graph, instead of plotting N lines. In my case, for instance, the second row would not be connected with the first row elements, as they are different functions.

I believe that this could be achieved outside the Highcharts module with some JS processing that parses the CSV and retrieves something like:

Code: Select all

[{
    data: [[0.0025270464, -0.1428221947], [0.0025272834, -0.1428221947]]
  }, {
  	data: [[0.0032589307, -0.0197038742], [0.0032591677, -0.0197038742]] 
}]

And then assign this value to the series variable. I am not sure if this is the most efficient way to approach to solve this task. Mainly, I am wondering if HC has any function to accomplish this task. Any suggestions?


PS: this csv comes from a Python script that I made that I'd rather not modifying, but if the output format does not match the Highcharts processing format, I could adjust it.
asdrgil
Posts: 2
Joined: Mon Nov 29, 2021 11:53 am

Re: CSV parsing - plotting one line for each row

Ok, so I have modified my Python script to return the data of the series and I have introduced this data inside the series data, but this completely colapses the browser. I guess I could also do this with Javascript and assign the value to series variable, but the result will probably be the same.

In the example, it is also included the snippet:

Code: Select all

boost: { useGPUTranslations: true }
but I guess that that's not enough.

My guesses are that it is crashing because I am parsing all this information outside the Highcharts module, given that it consists of a considerable amount of registers. Therefore, my questions are:

Does this neccesary have to be done within Highcharts library? And if so, how can I do this?

My current Fiddle is as follows:

https://jsfiddle.net/4kt7f8w3/

PS: now it works fine because there are only a couple of registers, but when I introduce the 35K registers, it crashes.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: CSV parsing - plotting one line for each row

Hello asdrgil,

Welcome to our forum and thanks for contacting us with your question!

Here you can find a demo showing how to parse your initial data format. To do so I have used complete and parsed callback to modify data structure.
Demo: https://jsfiddle.net/BlackLabel/pcqe62my/
API reference: https://api.highcharts.com/highcharts/data.parsed,
https://api.highcharts.com/highcharts/data.complete

35k points is actually quite a lot but it should work fine with boost module. Here you can read more about boost implementation:
https://www.highcharts.com/docs/advance ... ost-module

You don't need to parse your data with Highcharts, you can simply pass a variable, it is completely up to you as it shouldn't cause any difference in performance. As I have mentioned, you should use complete and parse callbacks to parse your csv data.

Please try to implement it with boost module (make sure that the module is imported) and let me know if it works.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”