Re-order xAxis when addSeries

[Koldo]

Hi,

I have a TKChart in a View, and user with some buttons adds series to a chart. I use the method "addSeries", and series added.

The problem is: The chart is not order by xAxis hours. Please, see attached file.

 

King regards.

[Sophi]

Hello Koldo,

What type of axis are you using to implement the chart? 
In order to to provide you with solution in short terms, could please send us a sample project with a simple example demonstrating the issue. 
Thank you for your understanding.
Looking forward to hearing from you.

Regards,
Sophi
Telerik

[Koldo]

Hi Sophi,

This zip link: https://www.dropbox.com/s/0uzr24f84k1fnbk/ChartTest.zip?dl=0 has a simple iOS project with my issue.
I think the issue is on xAxis because chart does not know order by hours.

I attached you the result image.
Thanks in advance.

[Koldo]

This official documentation is outdated:

http://docs.telerik.com/devtools/ios/Chart/Axes/datetime-categoric

[Sophi]

Hi Koldo,

The chart does not arrange your series by time because you are setting the hours as strings, therefore the chart does not know that these values are applying to time and it treats them like regular strings.
In order to accomplish proper arrangement you should use TKChartDateTimeAxis as xAxis.

TKChartDateTimeAxis *periodXAxis = [[TKChartDateTimeAxis alloc] init];
periodXAxis.majorTickIntervalUnit=TKChartDateTimeAxisIntervalUnitMinutes;
_chart.xAxis = periodXAxis;

Then your x values should be actual NSDate values not strings. Consider the following snippet.

- (IBAction)btnAddSerie3_Tap:(id)sender {
    NSArray *hours = @[@"8:38", @"8.26", @"8:49", @"10:10", @"11:15", @"12:00"];
    NSArray *values = @[@2, @32, @127, @150, @176, @4];
    NSMutableArray *array = [NSMutableArray new];
    for (int i = 0; i<hours.count; i++) {
        [array addObject:[[TKChartDataPoint alloc] initWithX:[self dateWithYear:2016 month:1 day:1 hour:8 minutes:38+i] Y:values[i]]];
    }
    TKChartSplineSeries *series = [[TKChartSplineSeries alloc] initWithItems:array];
    series.title = @"serie3";
    series.style.pointShape = [[TKPredefinedShape alloc] initWithType:TKShapeTypeCircle andSize:CGSizeMake(10, 10)];
    [_chart addSeries:series];
    [_chart reloadData];
}

- (NSDate *)dateWithYear:(NSInteger)year month:(NSInteger)month day:(NSInteger)day hour:(NSInteger)hour minutes:(NSInteger)minutes {
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
    NSDateComponents *components = [[NSDateComponents alloc] init];
    [components setYear:year];
    [components setMonth:month];
    [components setDay:day];
    [components setHour:hour];
    [components setMinute:minutes];
    return [calendar dateFromComponents:components];
}

Regards,
Sophi
Telerik

[Koldo]

Hi Sophi,

Thank you for your Help, but I want to compare information for different days.

For example about "today" with "tomorrow". In xAxis I want to show different hour: "0-24" of the selected days.

I send you this zip link with your implementation but It is commented, my example with different days is runs in actually project:

https://www.dropbox.com/s/1vi85cgpgehhmxw/ChartTest1.zip?dl=0

 

Again, thank you.

 

Kind regards.

[Sophi]

Hi Koldo,

I am not sure that I completely understand your case.
Please confirm that this is the situation,  a xAxis which is showing the hours between 0-24 and the three series, each for different day rendered on it.

Regards,
Sophi
Telerik

[Koldo]

Yes Sophi, I want to do this.

[Bulent]

Hello Koldo,

I've read the discussion with Sophi and would like to suggest you a solution.
Since your xAxis should show hours form 0 to 24 and you want to use these values for any day preparing a series with hour:minute values you need to setup TKChartDateTimeAxis to show  hours as major tick interval and minutes as minor thicks. Here is an example that I think you could reuse for your case:

TKChart *chart = [[TKChart alloc] initWithFrame:self.view.bounds];
chart.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:chart];

//use date time component without day/month/year
NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
NSDateComponents *dateTimeComponents = [[NSDateComponents alloc] init];

//configure the xAxis
dateTimeComponents.hour = 0;
NSDate *minDate = [calendar dateFromComponents:dateTimeComponents];
dateTimeComponents.hour = 23;
NSDate *maxDate = [calendar dateFromComponents:dateTimeComponents];

TKChartDateTimeAxis *xAxis = [[TKChartDateTimeAxis alloc] initWithMinimumDate:minDate andMaximumDate:maxDate];
xAxis.majorTickIntervalUnit = TKChartDateTimeAxisIntervalUnitHours;
xAxis.majorTickInterval = 1;
xAxis.minorTickIntervalUnit = TKChartDateTimeAxisIntervalUnitMinutes;
xAxis.style.labelStyle.fitMode = TKChartAxisLabelFitModeRotate;
xAxis.style.labelStyle.rotationAngle = M_PI_4;
chart.xAxis = xAxis;

//create new series with random values
NSMutableArray *array = [[NSMutableArray alloc] init];
for (int i = 0; i <= 23; i++) {
    dateTimeComponents.hour = i;        //set here the real hour
    dateTimeComponents.minute = i * 2;  //set here the real minutes
    [array addObject:[[TKChartDataPoint alloc] initWithX:[calendar dateFromComponents:dateTimeComponents] Y:@(arc4random_uniform(15))]];
}

TKChartSplineSeries *series = [[TKChartSplineSeries alloc] initWithItems:array];
series.selectionMode = TKChartSeriesSelectionModeSeries;
series.style.pointShape = [[TKPredefinedShape alloc] initWithType:TKShapeTypeCircle andSize:CGSizeMake(10, 10)];


[chart addSeries:series]; // you can create any number of series

You can see the chart in the attached screenshot file.

Of course, you can achieve this behavior using numeric axis setting its major/minor tick intervals as it is described in documentation. In this case you need to normalize minutes to be plotted in range [0:100].

I hope this code snipped solves your issues.

Regards,
Bulent
Telerik

[Victor]

Hi Bulent & Sophi,

 

It is Ok... this way fixes my issue. Thank you :)