Loading data on Lazyloading

[elizabet999]

I would like to know is there a possibility to save data on lazyloading mode, since I will be able to show also the data for more last days without any difficulties.

[timocov]

Can you please provide a bit more information regard your issue? Maybe provide some examples, screenshots, etc...

[parsa-xy]

Hello,
According to the meaning of lazyloading ( Lazyloading is a way in which, the content of the web page is loaded as and when the user scrolls down the page. It is a popular technique being used by various websites. Advantages of Lazy loading: On-demand loading reduces time consumption and memory usage thereby optimizing content delivery) we wanted to know if there is any possibility or way to make this technique done on our chart and when a user see our chart after entering our website just face with a small part of database which is provided by our API and seeing the rest of information when zooming or scrolling on the chart by his default.

[timocov]

Yeah, I've knew about lazyloading, but what's problem you faced with that? It shouldn't be hard to implement it with lightweight-charts. You can 1) load the code of the library async when an user scrolls to the chart and/or 2) load your data async to insert them to the chart.

[timocov]

I'm going to close the issue. If you'll have any question or updates - feel free to re-open it.

[alexbom]

I also meet two difficultes with Lazy Loading.

1. subscribeVisibleTimeRangeChange() triggers many times while mouse moving, so api calls many unnecessary times. Could you make Time Range ChangED event, that triggers only once after mouse drag-and-drop or scroll?

2. Properties "from" & "to", generated by this subscription don't grow above getted values range, so i can't get increased range while scroll out (for load more data). I mean when i scroll out, i always get minimum and maximum date from my data scope but not real zoom range. For lazy loading data i need to know new range, that user scrolled.

[timocov]

@alexbom I'm not sure where it's related to LazyLoading itself... I'd suggest you create another issue(s) with your requests (please don't forget about providing jsfiddle-like examples 🙂)

[kirchet]

subscribeVisibleTimeRangeChange() triggers many times while mouse moving, so api calls many unnecessary times. Could you make Time Range ChangED event, that triggers only once after mouse drag-and-drop or scroll?

Yes we can do it, but there are some special cases. For example, a user can scroll chart using mouse wheel. How can we know when the user finished scrolling?

Properties "from" & "to", generated by this subscription don't grow above getted values range, so i can't get increased range while scroll out (for load more data). I mean when i scroll out, i always get minimum and maximum date from my data scope but not real zoom range. For lazy loading data i need to know new range, that user scrolled.

That's because we convert our internal info about visible range to time. We cannot determine what the time at the empty left edge of the chart without some extrapolation algorithm. But I agree that we can provide some additional information like the number of bars in the empty space or something like this.

[timothymarois]

@kirchet That can easily be dealt with by using a timer, some delay after scrolling with the mouse, so that not every single scroll pings the API, for side drag, I like that usage of only loading after the click has ended.

[kirchet]

@timothymarois now there is a possibility to implement lazy loading, look at barsInLogicalRange

function onVisibleLogicalRangeChanged(newVisibleLogicalRange) {
    const barsInfo = series.barsInLogicalRange(newVisibleLogicalRange);
    // if there less than 50 bars to the left of the visible area
    if (barsInfo !== null && barsInfo.barsBefore < 50) {
        // try to load additional historical data and prepend it to the series data
    }
}

chart.timeScale().subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged);

That can easily be dealt with by using a timer, some delay after scrolling with the mouse, so that not every single scroll pings the API, for side drag, I like that usage of only loading after the click has ended.

You can do this right now on your side inside onVisibleLogicalRangeChanged.

[renren123]

@kirchet Did you scuueed in your code? I can not update historical data with series.update method.

[kirchet]

I can not update historical data with series.update method

You should replace all data if you want to add more history bars, you need to use setData

[renren123]

@kirchet OK ,thank you very much