DateTimeContinuousAxis - Display value for every second

2 posts, 0 answers
  1. Tim
    Tim avatar
    1 posts
    Member since:
    Sep 2017

    Posted 18 Sep Link to this post

    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

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 19 Sep Link to this post

    Hello 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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top