How to shows the minimum 6 dates in x-axis labels using TKchart CustomAnimation Line chart?

Thread is closed for posting
2 posts, 0 answers
  1. Subrahmanya Kadiyala
    Subrahmanya Kadiyala avatar
    12 posts
    Member since:
    Nov 2009

    Posted 22 Sep 2015 Link to this post


    I'm working on customAnimation Line chart,

    X-axis shows dates and Y-axis shows integer values.

    I want to shows only 5 or 6 dates by default in X-axis. After that we are applying zoom in zoom out functionality. 

    Already im giving the zoom range. but i need to show default 5 or 6 dates in x-axis.





  2. Yoanna
    Yoanna avatar
    44 posts

    Posted 24 Sep 2015 Link to this post

    Hello, Subrahmanya, 

    thank you for contacting Telerik iOS team.

    You can achieve the described scenario by following the few steps below:
    1. Set TKChart axis zoom property a value. This allows you to show part of the dates on the x-axis when TKChart is first shown. 
    2. Set zoomRange property to the x-axis. This will restrict zooming in and out. 
    3. Set TKChart handleDoubleTap property to NO so TKChart won't be able to reset its zoom and pan values.
    4. Allow panning the x-axis in order to be able to move the chart towards the rest of the dates on the axis. 

    Please consider the last 4 lines of viewDidLoad in the following code snippet:
        [super viewDidLoad];
        _chart = [[TKChart alloc] initWithFrame:self.view.frame];
        _chart.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [self.view addSubview:_chart];
        NSMutableArray *points = [[NSMutableArray alloc] init];
        for (int i = 0; i<12; i++) {
            [points addObject:[[TKChartDataPoint alloc] initWithX:[self dateWithDay:i month:i year:2015] Y:@(arc4random_uniform(400))]];
        TKChartLineSeries *lineSeries = [[TKChartLineSeries alloc] initWithItems:points]; = NO;
         = UIOffsetMake(0, -15); = [UIColor redColor]; = [UIColor redColor];
        CGFloat shapeSize = ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone) ? 14 : 17; = [[TKPredefinedShape alloc] initWithType:TKShapeTypeCircle andSize:CGSizeMake(shapeSize, shapeSize)]; = TKChartSeriesStyleShapeModeAlwaysShow;
        lineSeries.selectionMode = TKChartSeriesSelectionModeDataPoint;
        [_chart addSeries:lineSeries];
        _chart.xAxis.zoom = 4;
        _chart.xAxis.zoomRange = [[TKRange alloc] initWithMinimum:@(4) andMaximum:@(4)];
        _chart.handleDoubleTap = NO;
        _chart.xAxis.allowPan = YES;
    -(NSDate*)dateWithDay:(int)day month:(int)month year:(int)year
        NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
        NSDateComponents *components = [[NSDateComponents alloc] init];
        [components setYear:year];
        [components setMonth:month];
        [components setDay:day];
        return [calendar dateFromComponents:components];

    I hope this answers your question. If you need further assistance do not hesitate to contact us.

    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