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.
8 Answers, 1 is accepted
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
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.
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
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
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
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,
Please find the latest attached screenshot of showing the X-axis dates with overlapping.
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;
2. Set minimum zoom value to x-axis by using zoomRange property:
_chart.xAxis.zoomRange = [[TKRange alloc] initWithMinimum:@(4) andMaximum:@(4)];
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