Pan and Zoom

4 posts, 0 answers
  1. Herbert
    Herbert avatar
    1 posts
    Member since:
    Aug 2014

    Posted 21 Aug 2014 Link to this post

    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
  2. Julian Benkov
    Admin
    Julian Benkov avatar
    1135 posts

    Posted 22 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Abubaker
    Abubaker avatar
    7 posts
    Member since:
    Sep 2014

    Posted 26 Nov 2014 in reply to Julian Benkov Link to this post

    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 
  5. Jack
    Admin
    Jack avatar
    2333 posts

    Posted 26 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner