Scroll to datapoint in graph

8 posts, 0 answers
  1. Naos
    Naos avatar
    4 posts
    Member since:
    Sep 2014

    Posted 20 Nov 2014 Link to this post

    Hello,

    I'm plotting datapoints with a period of 52 weeks(x-axis), applying zoom to only show 7 weeks at once. The user can scroll through all the weeks by panning.
    Now i would like to automatically scroll to a given week in the graph, i tried using select: on the TKChart with a TKChartSelectionInfo object. This triggers the delegate but doesn't scroll to the data point in the graph.

    Is there a way to do this with the graph library or is this only possible by changing pan on the x-axis based on the points shown?

    Looking forward to hear from you.
  2. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 21 Nov 2014 Link to this post

    Hello Naos,

    Thank you for contacting us.

    TKChart
    does not support such functionality out of the box. However it is possible to achieve the described effect changing the axis pan. Here is a code snippet showing how to pan to the selected point in your scenario:
    CGFloat selectedPointValue = [(NSDate *)selectedPoint.dataXValue timeIntervalSince1970];
    CGFloat subtractValue = 60 * 60 * 24 * 7 * 3.5;
         
    CGFloat minRange = [(NSDate *)_chart.xAxis.range.minimum timeIntervalSince1970];
    CGFloat maxRange = [(NSDate *)_chart.xAxis.range.maximum timeIntervalSince1970];
    if (maxRange <= selectedPointValue + subtractValue) {
        _chart.xAxis.pan = (maxRange - 2 * subtractValue) - minRange;
    }
    else {
        _chart.xAxis.pan = (selectedPointValue - minRange) - subtractValue;
    }

    Automatic panning to a selected data point when axis' zoom is set manually seems to be a nice feature. We will consider implementing such functionality. I logged this suggestion in our feedback portal. Feel free to vote/comment there. I also updated your Telerik points for this suggestion.

    I hope this helps. Do not hesitate to contacts us in case you need assistance.

    Regards,
    Adrian
    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. Naos
    Naos avatar
    4 posts
    Member since:
    Sep 2014

    Posted 25 Nov 2014 in reply to Adrian Link to this post

    Hi Adrian,

    Thanks for the reply.
     
    I'm trying to implement your code snippet, but we use week numbers as x-axis values. So no date objects, i was wondering what the 3.5 is used for in your sample code? 
    It is now scrolling to the selected position, the end of the graph. The scrolling is not precise... adjusting 3.5 value to 3.25 makes it pan closer to the end of the graph. But not exactly, is it possible to make this precise? Or should i use NSDate values on the x-axis to make this work precise....
     
    Looking forward to hear from you.
     
    Regards,
    Eelco
     
     
  5. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 26 Nov 2014 Link to this post

    Hello Eelco,

    I assumed that the x axis is TKChartDateTime since you are displaying weeks. The 3.5 value is used to adjust the pan so that the selected data point is displayed in the middle of the plot view. The value is 3.5 because you are displaying 7 weeks. As I understand now, you are using a numeric axis to display the week's number. Here is the code snippet I have sent you before, written to work with numeric axis:
    CGFloat selectedPointValue = [(NSNumber *)selectedPoint.dataXValue floatValue];
    CGFloat subtractValue = 3.5;
         
    CGFloat minRange = [(NSNumber *)_chart.xAxis.range.minimum floatValue];
    CGFloat maxRange = [(NSNumber *)_chart.xAxis.range.maximum floatValue];
    if (maxRange <= selectedPointValue + subtractValue) {
        _chart.xAxis.pan = (maxRange - 2 * subtractValue) - minRange;
    }
    else {
        _chart.xAxis.pan = (selectedPointValue - minRange) - subtractValue;
    }

    I hope this helps. I will be glad to assist if you need further help.

    Regards,
    Adrian
    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.

     
  6. Naos
    Naos avatar
    4 posts
    Member since:
    Sep 2014

    Posted 04 Dec 2014 in reply to Adrian Link to this post

    Hi Adrian,

    Thanks for the explanation and snippet, i already adjusted the snippet for numerical axis and it works fine.
    In my case the selected data point is always the last data point in the graph, with the above snippet the panning is not precise for the latest data point. It pans to the end, but not exactly showing the data point on the edge of the graph, adjusting the 3.5 values helps to make it more precise... Would there be a better way to pan to the last data point in the graph? Or could we easily change the order of the points in the graph, by starting with the latest week and end with the first week?

    Looking forward to hear from you.
    Eelco
  7. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 04 Dec 2014 Link to this post

    Hello Eelco,

    The good news is that we implemented a panToDataPoint: method in TKChartAxis that pans to specific data point. The method will be included in our service pack release that will be available for download by the end of the week.

    Do not hesitate to contact us if you have any questions.

    Regards,
    Adrian
    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.

     
  8. suman
    suman avatar
    1 posts
    Member since:
    May 2015

    Posted 16 May 2015 in reply to Adrian Link to this post

    Hi,

    I want to scroll the TKChart xaxis data points. Data points are changing on the basis of current time. I want to enable the scroll to see the previously plotted data points as well as currently plotted data points. The method you have mentioned for numbers is working fine. But failed in case of plotting of dynamic data points. Please suggest. 

     

  9. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 20 May 2015 Link to this post

    Hello Suman,

    Thank you for contacting us.

    To be able to scroll through the previous and newly added data points you should enable the zoom and pan for the x axis. Allowing the zoom on the axis will automatically allow the pan. Please consider the code snippet below:
    _chart.xAxis.allowZoom = YES;

    I hope this helps. If you need further assistance, do not hesitate to contact us.

    Regards,
    Adrian
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner