How to shows the default dates only 5 in tkchart. after that using pinch zoom range (3,5)?

9 posts, 0 answers
  1. Nandu
    Nandu avatar
    11 posts
    Member since:
    Aug 2015

    Posted 16 Sep 2015 Link to this post

    Hi,

    how to shows the default dates on x-axis 5 or 6 date values. after that we can use pinch zoom in zoom out showing next dates in x-axis.

    Every time im showing all dates at a time like below screenshot.

    I don't want that type of chart, i want to shows only 5 or 6 dates after zoom in shows next dates.

    Please help me.

     

    Thanks in advance.

     

  2. Yoanna
    Admin
    Yoanna avatar
    44 posts

    Posted 18 Sep 2015 Link to this post

    Hello, Nandu, 

    thank you for contacting us.

    There is such feature request logged in our feedback portal. The feature's purpose is to update the major tick interval unit when zoom is applied. You can check its status, vote or comment on it here. 
    At this time it is not implemented yet and you can control the count of the ticks by using TKChartAxis properties majorTicksCount and majorTickIntervalUnit .

    periodXAxis.majorTickIntervalUnit = TKChartDateTimeAxisIntervalUnitMonths;
    [periodXAxis setMajorTickCount:5]

    Should you have any questions do not hesitate to contact us.

    Regards,
    Yoanna
    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
  3. DevCraft banner
  4. Nandu
    Nandu avatar
    11 posts
    Member since:
    Aug 2015

    Posted 21 Sep 2015 Link to this post

    Thanks Yoanna,

    But im using customAnimation Line chart using TKChart. In that i was created x-axis dates and y-axis axis integer values.

    how can i show the minimum dates 5 or 6 in x-axis label. 

     

    Thanks,

    Nandu K.

     

  5. Yoanna
    Admin
    Yoanna avatar
    44 posts

    Posted 22 Sep 2015 Link to this post

    Hello, Nandu, 

    If I understand your scenario correctly, you want to show 5 dates in the x-axis of TKChart. This can be achieved by setting either the majorTickCount or majorTickSpacing properties. When zooming the displayed axis interval changes, so the number of displayed dates will change to reflect the updated interval. Currently this behavior cannot be changed. We will improve TKChart API and behavior to allow showing exactly 5 dates at any zoom level in our upcoming releases. You can track the issue status by following the link from my previous post.

    If this is not the case, please send us a sample project where this issue can be reproduced and describe in detail the expected result. We will try to find a proper solution.

    Looking forward to your reply.

    Regards,
    Yoanna
    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
  6. Subrahmanya Kadiyala
    Subrahmanya Kadiyala avatar
    12 posts
    Member since:
    Nov 2009

    Posted 22 Sep 2015 in reply to Yoanna Link to this post

    Thanks Yoanna,

    Im using TKChartLineSeries. Please find the below code of get graph details.

     

    _chart = [[TKChart alloc] initWithFrame:CGRectMake(11, 71, 555, 240)];
        _chart.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        _chart.backgroundColor = [UIColor whiteColor];
        _chart.allowAnimations = NO;
        _chart.delegate = self;
        [self.view addSubview:_chart];

        NSMutableArray *points = [[NSMutableArray alloc] init];
        for (int i = 0; i<[tankLevelArray count]; i++) {
            [points addObject:[[TKChartDataPoint alloc] initWithX:[dateArray objectAtIndex:i] Y:@([[tankLevelArray objectAtIndex:i] integerValue] % 400)]];
        }

        TKChartLineSeries *lineSeries = [[TKChartLineSeries alloc] initWithItems:points];
        lineSeries.style.pointLabelStyle.textHidden = NO;

        lineSeries.style.pointLabelStyle.labelOffset = UIOffsetMake(0, -15);
        lineSeries.style.pointLabelStyle.textColor = [UIColor redColor];
        lineSeries.xAxis.style.labelStyle.textColor = [UIColor redColor];
        CGFloat shapeSize = ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone) ? 14 : 17;
        lineSeries.style.pointShape = [[TKPredefinedShape alloc] initWithType:TKShapeTypeCircle andSize:CGSizeMake(shapeSize, shapeSize)];
        lineSeries.style.shapeMode = TKChartSeriesStyleShapeModeAlwaysShow;
        lineSeries.selectionMode = TKChartSeriesSelectionModeDataPoint;
        [_chart addSeries:lineSeries];

        _chart.xAxis.zoomRange = [[TKRange alloc] initWithMinimum:@(2) andMaximum:@(5)];

        _chart.xAxis.allowZoom = YES;
        _chart.xAxis.allowPan = YES;
        _chart.yAxis.allowZoom = YES;
        _chart.yAxis.allowPan = YES; 

     

    Thanks,

    Nandu K

  7. Yoanna
    Admin
    Yoanna avatar
    44 posts

    Posted 24 Sep 2015 Link to this post

    Hello, Nandu, 

    thank you for sharing your code.

    I am still not quite sure that I understand what exactly you are expecting from TKChart's behavior in this scenario. If I am understanding correctly you want TKChart to show only 5 dates by x-axis when your initial chart view is shown. If so then you can manage that with setting the zoom property of the axis.
    In your scenario it would be like below:

    _chart.xAxis.zoom = 2;

    With this additional line when TKChart initial view is shown you will be able to see the first few dates only and will be able to pan towards the next few. 
    If this doesn't cover your case, please, describe with few words what are you expecting to happen step by step when the chart view is shown.

    Looking forward to your reply.

    Kind regards,
    Yoanna
    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
  8. Nandu
    Nandu avatar
    11 posts
    Member since:
    Aug 2015

    Posted 24 Sep 2015 in reply to Yoanna Link to this post

    Thanks,

    Zoom functionality working, but i want to show the X-axis labels without overlapping the dates.

    Currently im using below method to shown the x-axis labels

    NSMutableArray *points = [[NSMutableArray alloc] init];
        for (int i = 0; i<[tankLevelArray count]; i++) {
            [points addObject:[[TKChartDataPoint alloc] initWithX:[dateArray objectAtIndex:i] Y:@([[tankLevelArray objectAtIndex:i] integerValue] % 400)]];
        }

     tankLevelArray is my line graph values. and X-axis label values are stored in dateArray.

    Im using TKChartLineSeries to show the values of X-axis and Y-axis.

    if [tankLevelArray count]=20, then

    the graph showing all the 20 values of x-axis label, but i don't want to show all the values at a time.

    i want to show at least 5 or 6, after that when im zooming i want show next 5 labels, if zoom out i want show previous 5 labels. 

    Actually i was implemented CustomAnimationLineChart, in That graph i have to replaced the dates of X-axis Label.

    In my current scenario, all the values are displayed at a time, then automatically the x-axis date labels are overlapping. When im using zoom it will divided with minimum values are 2 and maximum values are 5 using below method.

     _chart.xAxis.zoomRange = [[TKRange alloc] initWithMinimum:@(2) andMaximum:@(5)];

    Finally  i want to to show all the date labels are shown without overlapping in X-axis labels.

    Please find the latest attached screenshot of showing the X-axis dates with overlapping.

     Thanks,

     

     

     ​

     

  9. Nandu
    Nandu avatar
    11 posts
    Member since:
    Aug 2015

    Posted 24 Sep 2015 in reply to Nandu Link to this post

     Please find the latest attached screenshot of showing the X-axis dates with overlapping.

  10. Yoanna
    Admin
    Yoanna avatar
    44 posts

    Posted 24 Sep 2015 Link to this post

    Hi, Nandu, 

    TKChart does not support such behavior out of the box, you couldn't change the dates shown by zooming in/out. What zoom does is only showing a bigger/smaller range of the axis, but it doesn't have a functionality to change the dates position.

    What you can do in order to show maximum amount of 5-6 dates at a time with the goal of their labels to not overlap is to use the following 3 steps:

    1. Set initial zoom to x-axis :
    _chart.xAxis.zoom = 2;
    what this line does is it zooms the whole axis twice. This means you see the half of the points. If you have 10 points you see 5 of them. If you have 30 points you see 15 of them. If you have 20 date and you want to see only 5 then your zoom value should be 4.

    2. Set minimum zoom value to x-axis by using zoomRange property:
    _chart.xAxis.zoomRange = [[TKRange alloc] initWithMinimum:@(4) andMaximum:@(4)];
    With this line you will restrict the chart of showing more than a quarter of the points existing and prevent labels overlapping. If you want to allow users to zoom in even further and see for example only two dates at a time, then you may want to set the maximum parameter to a greater value.

    3. Finally set the handleDoubleTap property to false, so TKChart won't be able to reset its zoom and pan values to 0.
    _chart.handleDoubleTap = NO;

    4. Allow panning by x-axis so you can pan towards the next dates. 
    _chart.xAxis.allowPan = YES;

    This 4 steps will give you chart showing only 5 dates at a time and a possibility to pan towards the next few dates until the end of the axis is being reached. 

    I hope this helps. If you have any questions do not hesitate to contact us.

    Regards,
    Yoanna
    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