Zoom and Panning

[amolpatil]

I am trying to implement functionality on zoom and pan chart If user select a specific date range by drag on the area
then depends on date selection show that data in next zoom level.

[Priyanka M S]

@amolpatil,

Please refer to the documentation on zooming and panning.

We are unable to understand your requirement properly. Can you please brief us further about your requirement and share a JSFiddle depicting your requirement, so that we can understand your requirements better and help you out?

__
Priyanka M S
Team CanvasJS

[amolpatil]

I want to bind data to chart as per month. e.g data available for 1 Jan 2017 to 30 Nov 2018 then 23 month’s data will display on the chart on x-axis like Jan 17, Feb 17, March 17 ….., Jan 18, Feb 18 …., Nov 18.
Then If the user drags the selection from Jun 16 to Feb 18 then I want to display data on day wise only for selected date range not all data for 23 months. Can I get the start date and end date on drag event?

[Priyanka M S]

@amolpatil,

You can change interval and intervalType according to your requirement on rangeChanging event as shown in this JSFiddle.

__
Priyanka M S
Team CanvasJS

[amolpatil]

Hi Priyanka,
Here I have created 2 js fiddle. In my scenario, I want to bind month level data to chart and if the user drag mouse pointer for selection then need to call another API and bind day level data.
1 -> I want to bind data month wise so for each month one point as per year. Month wise data .

Then suppose a user wants to see data day wise then he can drag mouse pointer from Feb to March so depends on that event Can I get the start date and end date of that drag event. So that using that start date and end date I can to call another API and get data for that duration and bind to that chart as per day.

2-> As shown in this jsfiddle Day wise data

[Priyanka M S]

@amolpatil,

You can get viewportMinimum(start date) and viewportMaximum(end date) as event parameters of rangeChanging event, which will also allow you to filter data based on zoom level as shown in this JSFiddle.

__
Priyanka M S
Team CanvasJS