This is a migrated thread and some comments may be shown as answers.

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

8 Answers 31 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Nandu
Top achievements
Rank 1
Nandu asked on 16 Sep 2015, 05:08 PM

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

Sort by
0
Yoanna
Telerik team
answered on 18 Sep 2015, 11:13 AM
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
0
Nandu
Top achievements
Rank 1
answered on 21 Sep 2015, 05:41 AM

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.

 

0
Yoanna
Telerik team
answered on 22 Sep 2015, 10:39 AM
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
0
Subrahmanya Kadiyala
Top achievements
Rank 1
answered on 22 Sep 2015, 10:46 AM

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

0
Yoanna
Telerik team
answered on 24 Sep 2015, 12:02 PM
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
0
Nandu
Top achievements
Rank 1
answered on 24 Sep 2015, 12:27 PM

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,

 

 

 ​

 

0
Nandu
Top achievements
Rank 1
answered on 24 Sep 2015, 12:30 PM

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

0
Yoanna
Telerik team
answered on 24 Sep 2015, 01:43 PM
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
Tags
Chart
Asked by
Nandu
Top achievements
Rank 1
Answers by
Yoanna
Telerik team
Nandu
Top achievements
Rank 1
Subrahmanya Kadiyala
Top achievements
Rank 1
Share this question
or