Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

"Load More" button

Hi there all!
Is there any way to implement functionality, that will initially display only some portion of provided data, and then, upon clicking on some button, render more data proportionally from each series?
Thanks!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: "Load More" button

Hi there,

In Highcharts we do not have such functionality built-in, but to achieve what you need I'd suggest loading a part of your data (for example with JS Array.slice method), then in Highcharts, you can use built-in functions like Series.addPoint (to add points one by one), or Series.setData (to set the data from scratch). Add some custom JS logic to match your preferences and you have a partial loading ready!

These resources will be useful for you:
addPoint: https://api.highcharts.com/class-refere ... s#addPoint
setData: https://api.highcharts.com/class-refere ... es#setData
DEMO: https://jsfiddle.net/BlackLabel/rh3kbo8j/
https://jsfiddle.net/BlackLabel/mkedj4nz/
https://jsfiddle.net/BlackLabel/usf82h9x/

Please do not hesitate to contact us with any further questions,
Best regards!
Kamil Musiałowski
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: "Load More" button

Hi there kamil,

Thank you for your reply!
I am familiar with the solutions proposed. setData doesn't seem to be the right solution, as 'Load More' consider that you add new points to the plot without removing the existing points. So, addPoint seems to be the way to go. However it has one major drawback for me. I need to add points proportionally across series.
For example we have 1000 records among 8 series. And series doesn't have equal number of points: 4 series have 100 points per series, and 4 series have 125 points per series.
Let's assume we want to load 100 points initially, on chart load. And then add 100 more points per each 'Load More' button click.
Adding that points proportionally across series sounds like troublesome task to achieve.
Do you have any advice?
Thanks!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: "Load More" button

Thank you for the detailed explanation.

Have you thought about using loops in JS to loop through every series? On each of them call the addPoint method as many times as you want, this could also be done in a classic for loop where you can choose the number of iterations.

Take a look at this simplified example below. Of course instead of using Math.random you would need to set up a custom JS logic that fill fit your criteria in terms of adding new points.

Note that I have set the redraw property on addPoint to false, so that we call it only one time, once all of the points are added - that way it won't affect the performance.

DEMO: https://jsfiddle.net/BlackLabel/s8nf6tj5/

Best regards!
Kamil Musiałowski
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: "Load More" button

kamil,
thank you very much for your demo. That is basically the solution I implemented in my app. However it requires a lot of burdensome management of various aspects like current point index for every series and how many points added in total etc. So I was hoping that maybe there are some ways to achieve same result using some internal functions.
Anyway, many thanks!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: "Load More" button

You're welcome!

Feel free to contact us with any other questions,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”