Page data in and out while panning

[[email protected]]

Hi,

Highcharts is awesome! Been digging into it over the last few weeks and have replaced all my chart.js charts with it! I'm struggling with something though and I was hoping someone could help out.

I have lots of candles but don't always want to view all of them. Today when I view an asset my chart loads everything. Instead, I would like it to load the latest 500 candles and show the latest 300 candles (or something like that). Then when I pan, load 500 more (and page out the ones that were previously loaded).

I've seen an infinite panning example so I know panning beyond the extremes is possible. https://jsfiddle.net/nqu8evms/2/.

But i'm not sure how to load/ unload data from my api on a pan. Anyone have an example of that?

Thanks!

[jedrzej.r]

Hi!

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

I'm really glad to hear that you find Highcharts useful!

As per loading data dynamically upon selected extremes (e.g. panning), you could refer to this demo from Highcharts demo pages: https://www.highcharts.com/demo/stock/lazy-loading. Based on that code you should be able to combine it into your customized solution.

Let me know if you have any more questions!
Best regards!

[[email protected]]

I've studied that example and something is missing from it. The endpoint you're calling does something smart which is not explained. For example, the demo fiddle made the following calls when I played with it:

This is the initial call it makes:
"https://demo-live-data.highcharts.com/a ... rical.json"
This returns monthly candles from Wed Dec 31 1997 to Fri Sep 30 2011.


When I zoomed around it made calls like this:
"https://demo-live-data.highcharts.com/a ... 7194710112"
"https://demo-live-data.highcharts.com/a ... 8515177528"
"https://demo-live-data.highcharts.com/a ... 5895995506"
"https://demo-live-data.highcharts.com/a ... 5892800000"
"https://demo-live-data.highcharts.com/a ... 7379929143"

Looking at the last one, I see it requested data from Fri Sep 30 2011 09:52:09 to Fri Sep 30 2011 10:52:09 and it returned minute candles.

There is logic on the server side that intelligently grouping candles and returning reasonable quantities. What's the logic so i can implement that on my side.

Thanks,
Brett

[dawid.d]

Hello,

You're right, there is a simple logic that performs grouping similarly to grouping on the front end, depending on the range of extremes. You can try to imitate it on the backend. See: https://api.highcharts.com/highstock/se ... taGrouping

The grouping logic depends of course on the approximation type, which you can read about here:
https://api.highcharts.com/highstock/se ... roximation

Best regards