How to fetch data from API in paginated manner using visibleRangeChanged event?

[guts868]

I'm trying to fetch data from an API in a paginated manner. I've noticed that the visibleRangeChanged event is triggered when the user scrolls or navigates through the chart. I'd like to use this event to fetch the next batch of data from the API.

However, I'm not sure how to implement this correctly. Can someone please provide an example or guidance on how to use the visibleRangeChanged event to fetch data from an API in a paginated manner?

[romfrancois]

I'd like to use this event to fetch the next batch of data from the API.

That's not how the library works. As documented here the library is "linked" to the datafeed that could itself be linked to some data providers.
It's up to the library based on already known data and users' actions to decide when a data request should be triggered and its range.

[guts868]

I think there might be some misunderstanding. I've seen examples of charts that fetch data in batches according to date, just like the one on moneycontrol.com. When the user first enters the chart, it shows the current day's data, and as they scroll down to previous dates, it fetches the data for those dates.

https://www.moneycontrol.com/india/stockpricequote/finance-housing/idfc/IDF

[romfrancois]

The link above does not seem to display a chart.

I'll try to make it clearer. Let me know if that helps.

onVisibleRangeChanged will indeed trigger whenever the chart is moved around. But that does not necessarily mean that the chart will require data. But if it does then the chart will indicate to the datafeed the range of data expected.
If you dont want to provide it in full you could only satisfy it partially and play with the nextTime property.
Another scenario would be to only return data by chunks say 100 and from there the library will make successive requests until the full initial range is satisfied.

[guts868]

onVisibleRangeChanged will indeed trigger whenever the chart is moved around. But that does not necessarily mean that the chart will require data. But if it does then the chart will indicate to the datafeed the range of data expected.

how would i get the range in datafeed.js?

[guts868]

I wanna do this making subsequent requests bases on visible range, so that i can i provide data in paginated manner from the api.
but i don't think i am good at explaining my problem haha (sorry)

https://groww.in/charts/stocks/vodafone-idea-ltd
how the hell they are doing it

[guts868]

ok so i might have figured out the issue.

it says Series has no more data on server: NSE:NSE/AXISBANK even though it does, i checked the api it does have data for previous days, it worked for 6 days, i was able to fetch data in paginated manner, but then this happened, what i am doing wrong?

[romfrancois]

how would i get the range in datafeed.js?

The requested range should be "visible" within the getBars function with periodParams. It's not necessarily equal to the visible range though; it's the range the library believes it makes more sense. Data will always be cached to make the application smoother.

https://groww.in/charts/stocks/vodafone-idea-ltd how the hell they are doing it

If you pay close attention to their app it's very similar to the one found on our demo website. They are doing an initial request that's way bigger than the visible range. It can easily be verified with the console where you don't see additional requests made past the initial load, until you go back in time. At some point the application will request data that will then be loaded and cached until the next time.

Series has no more data on serve

From the small logs, you can see that some data where requested by the library to the datafeed which was apparently not able to provide those data. Therefore the library is answering that it didn't get anything.

[guts868]

Can you help me understand the error?

FEED [NSE/AXISBANK|1]: Receiving bars: barset is empty, requested range: [2024-06-28T01:12:00.000Z ... 2024-06-28T03:45:00.000Z, 153 bars]

what does it means that barset is empty? the api is returning candles. maybe the issue is it's returning less candle than the library wants? i don't know

i am having imposter syndrome rn xD

[romfrancois]

Without the full logs it's hard to properly assess the situation but essentially it says that:

• A range was requested from 28/06/2024 @ 01:12:00 to 28/06/2024 @ 03:45:00
• That range equals to 153 bars

But the library didn't received any data or at least the datafeed returned an empty array.

[guts868]

i tried with different stocks and i am getting same error on the same date, the weird part is there's data available on the api, it's not making any api call after 2024-06-28.

[arshadshaheen]

As library doesn't support paginated data as you may need due to limits of data from backed
You can do it with custom code , this way you have to add candles manually to the chart
See example here https://github.com/arshadshaheen/chart-project
In this project custom data is requested in streaming for last candle of the interval if socket fails of not consistent