Pan and Zoom

[Herbert]

Hey Telerik,

i couldn't found a functionality for Pan and Zoom in the UI-Kit. 
I also take a look at the Documentation, but there are no References if
this function is also available for iOS not only windows phone. 

Maybe you can give me an alternative way to display 
a Chart with huge amounts of Datapoints. Because, if i
add the data points to my TKChart, you couldn't recognice anything. There are
to many points inside, so the user should be able to interact with the Chart, by zooming in
or scroll right or left for getting a better resolution of the current Chart.

Thanks for your help!

Herbert

[Julian Benkov]

Hello Herbert,

Thank you for your interest in our controls.

Here is an example of how to enable the pan and zoom functionality of TKChart for iOS:

- (void)demo_PanZoom
{
    [_chart removeAllData];

    _chart.xAxis = [[TKChartNumericAxis alloc] initWithMinimum:@(0) andMaximum:@(2000) position:TKChartAxisPositionBottom];
    ((TKChartNumericAxis*)_chart.xAxis).majorTickInterval = @(10);
    _chart.yAxis = [[TKChartNumericAxis alloc] initWithMinimum:@(0) andMaximum:@(100) position:TKChartAxisPositionLeft];
    ((TKChartNumericAxis*)_chart.yAxis).majorTickInterval = @(10);

    NSMutableArray *items = [[NSMutableArray alloc] init];
    for (int i = 0; i <= 2000; i++) {
        [items addObject:[[TKChartDataPoint alloc] initWithX:@(i) Y:@(arc4random() % 100)]];
    }

    TKChartLineSeries *lineSeries = [[TKChartLineSeries alloc] initWithItems:items];
    lineSeries.title = @"Series 1";
    [_chart addSeries:lineSeries];

    _chart.xAxis.allowZoom = YES;
    _chart.yAxis.allowZoom = YES;
    _chart.xAxis.zoom = 30;
    _chart.xAxis.pan = 550;
}

The missing documentation article is logged in our feedback portal and you can use this link to track the status of the task.

I hope this helps. Do not hesitate to contact us if you have any further questions.

Regards,
Julian Benkov
Telerik

 

 

[Abubaker]

Can you please explain what these pan and zoom options do. I am confused. My problem is that if i have a very small value for yaxis then the chart shows very small bars. my values are like 0.00065 or less. So i allowzoom on yaxis. then i have charts in which i have a lot of bars. then i allowzoom for xaxis. but what is pan. there is pan for xaxis and yaxis. When to use zoom and when to use pan. 

Need more information 

[Jack]

Hi Abubaker,

The pan option allows you to move the starting point of the axis. It should be used in conjunction with the zoom option. For example when the zoom is set to a big value you will be able to see only part of the data. You can change the pan value for the axis to see another part of the data keeping the same zoom ratio. You can see the pan/zoom interaction in our demo application. The Chart >> Pan/Zoom example demonstrates exactly this. Just zoom with your fingers and then pan to move the chart.

Another option that will fit in your scenario is to change the axis range and the majorTickInterval property. Send us your code and we will be glad to assist you further.

Looking forward to your reply.

Regards,
Jack
Telerik