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

[Subrahmanya Kadiyala]

Hi,

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.

 

 

Thanks,

 

[Yoanna]

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:

-(void)viewDidLoad
{
    [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];
    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.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.

Regards,
Yoanna
Telerik