Initial zoom

[Florian Mihalits]

Hello.

I´ve got a chart with about 1000 datapoints and 16 series.
Using zoom one can have a good look at the data, without it´s a mess ;)

How can I set the inital zoom of a chart.

How can I set the zoom (range?) after relaoding data when a user changed the dateTime range?

Thanks for your help.

[Durga Gopalakrishnan]

Hi Florian, 

We have analysed your query. From that, we would like to let you know that, we have lazy loading support to achieve your requirement. This will load the chart based on provided points length for numeric axis and start, end range for date time axis. Please check with the below online demo link.  

https://ej2.syncfusion.com/demos/#/material/chart/lazy-loading.html 

If provided solution doesn’t meet your requirement, please revert us. 

Regards, 

Durga G 

[Florian Mihalits]

Hello.

I know about lazy loading.

The problem with lazy loading is, that I could not find a way to combine lazy loading and zoom.

Is there a way to do so?

Or at least, is there a way to combine lazy loading with a "pan" function?

And how do you use lazy loading with a remote resource?

All the best, 

Florian

[Durga Gopalakrishnan]

Hi Florian, 

We suggest you to specify zoom factor and zoom position to display zoomed chart. You can calculate the zoomFactor by number of points to be displayed/total number of points and zoomPosition by pixel position in chart/ total width of chart. 

primaryXAxis: { 

    zoomFactor: 0.2, // number of data to be displayed/ total number of data(200/1000) 

    zoomPosition: 0.4, //position to zoom in pixel/ total width of chart(400/1000) 

}, 

 

 

https://stackblitz.com/edit/ungyhv-9z7uw5 

Kindly revert us, if you have any concerns. 

Regards, 

Durga G 

[Florian Mihalits]

Works pretty well, thanks.

The only thing: the scrollbar isn´t being shown on the x axis.

All the best, 

Florian

[Durga Gopalakrishnan]

Hi Florian, 

 

Thanks for an update. Please specify isZoomed inner property as true in chart load event to display scrollbar. We have modified sample and attached for your reference. 

 

load: (args: ILoadedEventArgs) => { 

   args.chart.zoomModule.isZoomed = true; 

} 

 

 

 

https://stackblitz.com/edit/ungyhv-vvqw57 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Durga G 

[Florian Mihalits]

Perfect!!

Thanks a lot.

All the best, 

Florian

[Durga Gopalakrishnan]

Hi Florian, 

  

Most welcome. Please get back to us if you need any further assistance. 

  

Regards, 

Durga G