DateTimeContinuousAxis - Display value for every second

[Tim]

Hello,

I am currently building an application with nativescript and angular. Now I have to build a chart, that displays incoming data. For every 1 or 5 seconds (depends on the data) there is a new value. 

Im trying to use the DateTimeContinuousAxis to achieve that. 

Im setting up my dummy data like this:

this.categoricalSource = new ObservableArray([
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 0).getTime(), Amount: 10 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 5).getTime(), Amount: 10 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 10).getTime(), Amount: 1 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 15).getTime(), Amount: 3 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 20).getTime(), Amount: 18 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 25).getTime(), Amount: 7 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 30).getTime(), Amount: 5 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 35).getTime(), Amount: 4 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 40).getTime(), Amount: 2 },
            { TimeStamp: new Date(2017, 0, 11, 3, 30, 45).getTime(), Amount: 6 },
        ]);

 

And display like this

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <DateTimeContinuousAxis tkCartesianHorizontalAxis minimum="11/1/2017" maximum="11/1/2017" majorStep="Second" dateFormat="hh:mm:ss"
        labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="TimeStamp" valueProperty="Amount"></LineSeries>
</RadCartesianChart>

 

I also tried to set the minimum/maxium with objects of type Date but always end up getting the error:  

Unparseable date: "Wed Jan 11 2017 00:00:00 GMT+0000 (GMT)".

 

My questions would be:

1. Am I even using the correct axis type?
2. Wich Date object is required for max/min? Id really like to set those dynamically
3. How do i get the axis to display a new legend every 5 seconds? E.g.: Axis reads 12:32:05 | 12:32:10 | 12:32:15 ...

Thanks in advance

[Nikolay Tsonev]

Tim,

First of all, thank you for interest in UI for NativeScript.

Regarding your first question, in case you need to show some date values, indeed using  DateTimeContinuousAxis is the right desition.
To be able to change the minimum and maximum dynamically, you could bind those two values and set up their values from code behind. For further info about the data binding in angular, you could review the article here.


About the last question related to the legend, you could review this forum thread where it is shown how to change the legend for the pieCharf. You could apply the same technic also for your case.

I would like to notify you that all UI for NativeScript components are already free and regarding that, I would recommend you for any further questions to use the NAtiveScript forum here. This is the new place where you could open a new thread with your specific questions

Regards,
nikolay.tsonev
Progress Telerik