spk
Posts: 13
Joined: Tue Sep 27, 2022 12:27 pm

Time to generate chart

My json file generally contains 2 million lines of data as below.
Below is how a line from file will look:

{"dt1":53656,"dt2":1216440,"te":7987,"item":337.91,"dt3":"WPDRILL","time":"09/27/2022 12:43:24.602","dt5":2687.14}

Takes around 12 to 15 seconds to generate chart by parsing this data. Am I missing something? How long does it take to parse and generate highchart for 2 million lines of data.

// Takes around 15 seconds to compute below and generate chart
if (data.item === undefined) {
data.item = null
}
item.push(data.item)

if (data.time === undefined) {
data.time = null
}
fulldate.push(data.time);


/* even filtering data as below takes more than 12 seconds to generate chart.
if (data.dt=== "something") {
item.push(data.item)
fulldate.push(data.time);
} */

I have attached fiddle to show my basic file which takes 12 to 15 seconds to generate data:
https://jsfiddle.net/01t23jef/3//
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Time to generate chart

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

Performance depends on the client-side machine, so if you have less computing power on the machine you are using to display the chart then you will have worse performance than on a stronger device. In general, when the density of data is higher than the pixel resolution of the chart then it is pointless to show all the points because they will overlap and will not be visible anyway - they will only consume processing power and slowing rendering down. Suggested performance tips could be found in our general documentation here: https://www.highcharts.com/docs/getting ... highcharts

Consider also using a boost module, described here: https://www.highcharts.com/blog/tutoria ... st-module/

Best regards!
Hubert Kozik
Highcharts Developer
spk
Posts: 13
Joined: Tue Sep 27, 2022 12:27 pm

Re: Time to generate chart

Hi,

I will only be plotting 20000 to 30000 points max, even though there are around 2 millions lines of data to parse (from json file).

I am not using point markers or shadows in my graph. I am using boost module already. It generates chart within seconds for 2 million data when it uses getData function. So, is it the time it takes to parse data from json adds overhead in my case?

Also, same data loads in 12 secs once, but like 20 secs next time. What could be the reason for this?

I would appreciate if you could give some insight on this.

Will lazy loading or async loading help in my scenario? If yes, can you please attach a demo of the same.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Time to generate chart

spk,

Unfortunately, we cannot do much when it comes to calculating/preparing the data. What I can suggest is to host parsed (prepared/calculated) data in the correct format to avoid calculating them in a web browser. Then you would just call API to get proper data and you won't lose time on calculations, which depends also on client machine performance.

About async lazy loading, you can find the demo here: https://www.highcharts.com/demo/stock/lazy-loading

And also a great article: https://www.highcharts.com/blog/news/48 ... ighcharts/

Regards!
Hubert Kozik
Highcharts Developer
spk
Posts: 13
Joined: Tue Sep 27, 2022 12:27 pm

Re: Time to generate chart

Thank you for the answer.

Can you please let me know how to use showLoading and hideLoading in my scenario . Have added how I receive and process my json.
Fiddle: https://jsfiddle.net/8jkqrtxo/4/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Time to generate chart

spk,
Have you attached a proper link to the demo with an online example? I don't see any showLoading/hideLoading methods inside your code.

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
spk
Posts: 13
Joined: Tue Sep 27, 2022 12:27 pm

Re: Time to generate chart

Please see the code that I had tried. But says TypeError: Cannot read properties of undefined (reading 'showLoading').
https://jsfiddle.net/35sq1j0L/1/

I am not including a working fiddle but this is how my code looks with json data retrieval (where loading need to be included). Thanks again.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Time to generate chart

spk,
That's because you are trying to use showLoading method on the variable, which is not assigned to the chart yet. You should fire showLoading after the chart constructor, on chart object, like in this demo: https://jsfiddle.net/BlackLabel/8e7wvxr2/ or using chart events, e.g. load: https://jsfiddle.net/BlackLabel/qkLx4m53/

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
spk
Posts: 13
Joined: Tue Sep 27, 2022 12:27 pm

Re: Time to generate chart

Thank you. If I am not wrong, both does not seem to help my scenario.

I tried as below by calling 'showLoading' on load and it did work. But json is already processed by this time.

var chart = Highcharts.chart('container', {

load() {
const chart = this,
series = chart.series,
chart.showLoading();
..........
setTimeout(function () {
chart.hideLoading();
}, 5000);
}

});

I want loading symbol to be shown while json is being processed. Json is processed before chart object is assigned as per my code.
I understand that chartEp was not assigned while json is processed, any suggestions on how I go about in this scenario?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Time to generate chart

spk,

I can suggest you make an empty chart instance at the start, then fire setLoading method and when your data will be received and ready use setData method to update the data of the series and in next step hide loading screen. Something similar to the demo below.

Demo: https://jsfiddle.net/BlackLabel/nw4jmur8/
API Reference: https://api.highcharts.com/class-refere ... es#setData

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”