DateTimeContinous - majorStep="Minute" won't work


#1

Good afternoon,
I tried to solve the issue I explained here.
In short:
I try to display values on a chart. For every second I have a new value. I use telerik-ui-pro for nativescript and Angular

Things I got working so far:
I am able to pass the minimum/maximum value from codebehind.
I also managed to change the labels/value to a point where I can change the majorStep to “Day” which allows me to atleast display every hour visually.

But now the bad news:
As soon as I “lower” the majorStep to anything below Day (Hour, Minute, Second) the app freezes as soon as I try to display the data.
The values I tried to display where a number every Hour (I can display that with majorStep Day).
I also tried to enter fewer values and make the min/max more specific, without any result.

The version below is working, but freezes if I zoom to far in. If I change the “majorStep” to Hour, the app freezes as soon as the chart should be rendered.

My decleration for the view variables look like this:

      this._startDate = new Date(2015, 1, 11, 1);
      this._endDate = new Date(2015, 1, 11, 10);
      this._dateTimeSource = new ObservableArray(this._dataService.getDateTimeSource());

My value array like this:

@Injectable()
export class DataService {
    getDateTimeSource(): Measurement[] {
        return [
            { TimeStamp: new Date(2015, 1, 11, 1).getTime(), Value: 10 },
            { TimeStamp: new Date(2015, 1, 11, 2).getTime(), Value: 10 },
            { TimeStamp: new Date(2015, 1, 11, 3).getTime(), Value: 1 },
            { TimeStamp: new Date(2015, 1, 11, 4).getTime(), Value: 3 },
            { TimeStamp: new Date(2015, 1, 11, 5).getTime(), Value: 18 },
            { TimeStamp: new Date(2015, 1, 11, 6).getTime(), Value: 7 },
            { TimeStamp: new Date(2015, 1, 11, 7).getTime(), Value: 5 },
            { TimeStamp: new Date(2015, 1, 11, 8).getTime(), Value: 4 },
            { TimeStamp: new Date(2015, 1, 11, 9).getTime(), Value: 2 },
            { TimeStamp: new Date(2015, 1, 11, 10).getTime(), Value: 6 },
        ];
    }
}

And finally my view looks like this:

<RadCartesianChart tkExampleTitle tkToggleNavButton>
  <<DateTimeContinuousAxis tkCartesianHorizontalAxis [minimum]="_startDate" [maximum]="_endDate" majorStep="Day" dateFormat="HH:mm:ss"
      labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis>>
  <LinearAxis tkCartesianVerticalAxis></LinearAxis>

  <LineSeries tkCartesianSeries [items]="dateTimeSource" categoryProperty="TimeStamp" valueProperty="Value"></LineSeries>
</RadCartesianChart>

Did someone get this working already? I did not find examples with relativles short time ranges, but also short intervals.

Any help is greatly aprecciated. I realy want to get this working in nativescript.

Kind Regards
Tim