Re-order xAxis when addSeries

10 posts, 1 answers
  1. Koldo
    Koldo avatar
    9 posts
    Member since:
    Feb 2016

    Posted 21 Apr Link to this post

    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.

  2. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 26 Apr Link to this post

    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
    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
  3. DevCraft banner
  4. Koldo
    Koldo avatar
    9 posts
    Member since:
    Feb 2016

    Posted 27 Apr in reply to Sophi Link to this post

    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.

  5. Koldo
    Koldo avatar
    9 posts
    Member since:
    Feb 2016

    Posted 28 Apr Link to this post

    This official documentation is outdated:

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

  6. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 28 Apr Link to this post

    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
    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
  7. Koldo
    Koldo avatar
    9 posts
    Member since:
    Feb 2016

    Posted 28 Apr in reply to Sophi Link to this post

    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.

  8. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 28 Apr Link to this post

    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
    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
  9. Koldo
    Koldo avatar
    9 posts
    Member since:
    Feb 2016

    Posted 28 Apr in reply to Sophi Link to this post

    Yes Sophi, I want to do this.
  10. Answer
    Bulent
    Admin
    Bulent avatar
    29 posts

    Posted 29 Apr Link to this post

    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
    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
  11. Victor
    Victor avatar
    1 posts
    Member since:
    Aug 2015

    Posted 29 Apr in reply to Bulent Link to this post

    Hi Bulent & Sophi,

     

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

Back to Top
DevCraft banner