• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

    State Chart X-Axis showing different time format

    How-To
    2
    15
    2.3k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Z
      zenvakil
      last edited by

      Hey Everyone,

      I am having some issues with the charts below.
      Firstly both charts are displaying a strange time signature along the x-axis, instead of just the date/time. And secondly The state chart does not appear to recognize any of the text rendering of the data points.

      <md-card flex="">
                                      <md-card-content>
                                          <ma-point-values point-xid="UAR-STN-DP_Gen_BreakerState" point="point1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
                                          </ma-point-values>
                                          <ma-point-values point-xid="UAR-STN-DP_Gen_State" point="point2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}}">
                                          </ma-point-values>
                                          <ma-state-chart series1-values="point1Values" series1-title="Breaker State" series2-values="point2Values" series2-title="Generator State" style="position: inherit; width: 100%; height: 100px;" options="{categoryAxis:{labelTime: transparent}}"></ma-state-chart>
                                      </md-card-content>
                                  </md-card>
                                  <md-card flex="">
                                      <md-card-content>
                                          <ma-point-values point-xid="UAR-STN-DP_Gen_Load" point= "point3" values="point3Values" from="dateBar.from" to="dateBar.to"></ma-point-values>
                                          <ma-serial-chart series-1-values="point3Values" series-1-points="point3" style="height: 200px; width: 100%"></ma-serial-chart>
                                      </md-card-content>
                                  </md-card>
      

      0_1601026264953_910718ed-dd86-4130-a7d4-9adeb9b84c0f-image.png

      1 Reply Last reply Reply Quote 0
      • CraigWebC
        CraigWeb
        last edited by CraigWeb

        Hi @zenvakil

        Firstly I would suggest taking the time to run through this tutorial: https://docs.angularjs.org/tutorial
        It will help to understand the basic concepts of angularJS.

        I see a few issues that I suspect are causing your problems:

        • <ma-point-values point-xid="UAR-STN-DP_Gen_Load" point= "point3" values="point3Values" from="dateBar.from" to="dateBar.to"></ma-point-values>
          should be have rendered="true" to receive the rendered value.

        • you have some typos in your components:
          <ma-state-chart series1-values="point1Values" series1-title="Breaker State" series2-values="point2Values" series2-title="Generator State" style="position: inherit; width: 100%; height: 100px;" options="{categoryAxis:{labelTime: transparent}}"></ma-state-chart>

        series1-values="point1Values" series1-title="Breaker State" series2-values="point2Values" series2-title="Generator State"
        should be:
        series-1-values="point1Values" series-1-title="Breaker State" series-2-values="point2Values" series-2-title="Generator State"

        <ma-serial-chart series-1-values="point3Values" series-1-points="point3" style="height: 200px; width: 100%"></ma-serial-chart>
        should be:
        <ma-serial-chart series-1-values="point3Values" series-1-point="point3" style="height: 200px; width: 100%"></ma-serial-chart> (point not points)

        1 Reply Last reply Reply Quote 0
        • Z
          zenvakil
          last edited by

          Hey Craig,

          Thanks for the reply, still no cigar. The redered="true" was in place originally but i think i removed it to see if anything would change.

          0_1601028268335_c74dd86b-6378-4eae-8a75-6781d268c0d5-image.png

          1 Reply Last reply Reply Quote 0
          • CraigWebC
            CraigWeb
            last edited by

            I just looked at the <ma-start-chart> example and I see you are missing this. :
            series-1-labels="point1.getTextRenderer().values"

            Did the typo fixes, fix the serial chart?

            1 Reply Last reply Reply Quote 0
            • Z
              zenvakil
              last edited by

              @craigweb said in State Chart X-Axis showing different time format:

              series-1-labels="point1.getTextRenderer().values"

              Hey Craig,
              Thats another thing I had tried, then removed, I've put it back in, but still no luck. Neither of the charts have changed at all :(

              0_1601028966404_67bc22b1-0489-4416-a8f2-0691b56b1ef1-image.png

              1 Reply Last reply Reply Quote 0
              • CraigWebC
                CraigWeb
                last edited by CraigWeb

                Have you tried getting it working in the statechart example with the points you want to use? at /ui/examples/charts/state-chart
                and what rollup do you have set on the dateBar?

                The <ma-start-chart> is only for multistate points. Are they perhaps not using the range renderer?

                1 Reply Last reply Reply Quote 0
                • Z
                  zenvakil
                  last edited by

                  Hey Craig,

                  I'm fairly new to this, as I'm sure you can tell. But I had originally tried the chart out in the examples/state-chart section, where it does work. The rollup is set to none and the points are definitely multistate points using the range renderer.
                  Funny enough, at some point (this is something I only work on when I have the time), the time issue seems to have rectified itself and it's now presenting correctly. The text rendering however is still not working :(

                  0_1603267137986_21df6450-167c-4046-8fb5-d592152b4bfd-image.png

                  1 Reply Last reply Reply Quote 0
                  • CraigWebC
                    CraigWeb
                    last edited by

                    Please share your code as it is now.

                    1 Reply Last reply Reply Quote 0
                    • Z
                      zenvakil
                      last edited by

                      <md-card flex="">
                                                      <md-card-content>
                                                          <ma-point-values point-xid="UAR-STN-DP_Gen_BreakerState" point="point1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
                                                          </ma-point-values>
                                                          <ma-point-values point-xid="UAR-STN-DP_Gen_State" point="point2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}}">
                                                          </ma-point-values>
                                                          <ma-state-chart series1-values="point1Values" series1-title="Breaker State" series2-values="point2Values" series2-title="Generator State" style="position: inherit; width: 100%; height: 100px;" options="{categoryAxis:{labelTime: transparent}}"></ma-state-chart>
                                                      </md-card-content>
                                                  </md-card>
                                                  <md-card flex="">
                                                      <md-card-content>
                                                          <ma-point-values point-xid="UAR-STN-DP_Gen_Load" point= "point3" values="point3Values" from="dateBar.from" to="dateBar.to"></ma-point-values>
                                                          <ma-serial-chart series-1-values="point3Values" series-1-points="point3" style="height: 200px; width: 100%"></ma-serial-chart>
                                                      </md-card-content>
                                                  </md-card>
                      
                      1 Reply Last reply Reply Quote 0
                      • CraigWebC
                        CraigWeb
                        last edited by

                        add series-1-labels="point1.getTextRenderer().values" series-2-labels="point2.getTextRenderer().values"
                        to your state chart.

                        1 Reply Last reply Reply Quote 0
                        • Z
                          zenvakil
                          last edited by

                          Done, but still unfortunately nothing.

                          <md-card flex="">
                                                          <md-card-content>
                                                              <ma-point-values point-xid="UAR-STN-DP_Gen_BreakerState" point="point1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
                                                              </ma-point-values>
                                                              <ma-point-values point-xid="UAR-STN-DP_Gen_State" point="point2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}}">
                                                              </ma-point-values>
                                                              <ma-state-chart series1-values="point1Values" series1-title="Breaker State" series2-values="point2Values" series2-title="Generator State" style="position: inherit; width: 100%; height: 100px;" series-1-labels="point1.getTextRenderer().values" series-2-labels="point2.getTextRenderer().values"options="{categoryAxis:{labelTime: transparent}}"></ma-state-chart>
                                                          </md-card-content>
                                                      </md-card>
                                                      <md-card flex="">
                                                          <md-card-content>
                                                              <ma-point-values point-xid="UAR-STN-DP_Gen_Load" point= "point3" values="point3Values" from="dateBar.from" to="dateBar.to"></ma-point-values>
                                                              <ma-serial-chart series-1-values="point3Values" series-1-points="point3" style="height: 200px; width: 100%"></ma-serial-chart>
                                                          </md-card-content>
                                                      </md-card>
                          

                          0_1603412845395_c48f1d03-e5d3-4aac-acca-35c6857757c6-image.png

                          1 Reply Last reply Reply Quote 0
                          • CraigWebC
                            CraigWeb
                            last edited by

                            I copied your <ma-state-chart> to the state chart example and it works perfectly.
                            0_1603433689318_Screen Shot 2020-10-23 at 8.14.41 AM.png
                            Can you put the following code below the charts: {{point1.getTextRenderer().values}} and see if you get the correct labels.

                            1 Reply Last reply Reply Quote 0
                            • Z
                              zenvakil
                              last edited by

                              Hey Craig,
                              Yeah as I said before I originally did this in the example page and it worked perfectly, so I decided to put this in our dashboard then for some reason it's not working (still works on the example page).
                              I've definitely done something absolutely STUPID to stop it from working but I just cannot figure out what it is hahaha.

                              <md-card flex="">
                                                              <md-card-content>
                                                                  <ma-point-values point-xid="UAR-STN-DP_Gen_BreakerState" point="point1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
                                                                  </ma-point-values>
                                                                  <ma-point-values point-xid="UAR-STN-DP_Gen_State" point="point2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}}">
                                                                  </ma-point-values>
                                                                  <div style="position:inherit;width:100%;height:100px">{{point1.getTextRenderer().values}}</div>
                                                                  
                                                                  <ma-state-chart series1-values="point1Values" series1-title="Breaker State" series2-values="point2Values" series2-title="Generator State" style="position: inherit; width: 100%; height: 100px;" series-1-labels="point1.getTextRenderer().values" series-2-labels="point2.getTextRenderer().values"options="{categoryAxis:{labelTime: transparent}}"></ma-state-chart>
                                                              </md-card-content>
                                                          </md-card>
                              

                              0_1603676937648_33c4df5d-8443-46fa-962e-eb6a871abc8e-image.png

                              1 Reply Last reply Reply Quote 0
                              • Z
                                zenvakil
                                last edited by

                                Also just for validation, here's the result when I enter it into the example page:
                                0_1603677258987_2487f39c-8919-4095-bfe1-7981bc7e6dac-image.png

                                1 Reply Last reply Reply Quote 0
                                • Z
                                  zenvakil
                                  last edited by

                                  Hey Craig, Thanks for all the help.
                                  I ended up figuring it out :)

                                  <md-card flex="">
                                                                  <md-card-content>
                                                                      <ma-get-point-value point-xid="UAR-STN-DP_Gen_BreakerState" point="point1"></ma-get-point-value>
                                                                      <ma-get-point-value point-xid="UAR-STN-DP_Gen_State" point="point2"></ma-get-point-value>
                                                                      <ma-point-values point="point1" values="point1Values" from="dateBar.to | maMoment:'subtract':1:'day'" to="dateBar.to" rollup="FIRST" rollup-interval="1 hours">
                                                                      </ma-point-values>
                                                                      <ma-point-values point="point2" values="point2Values" from="dateBar.to | maMoment:'subtract':1:'day'" to="dateBar.to" rollup="FIRST" rollup-interval="1 hours">
                                                                      </ma-point-values>
                                                                      
                                                                      <ma-state-chart style="height: 500px; width: 100%" series-1-title="{{point1.name}}" series-1-values="point1Values" series-1-labels="point1.getTextRenderer().values" series-2-title="{{point2.name}}" series-2-values="point2Values" series-2-labels="point2.getTextRenderer().values">
                                                                      </ma-state-chart>
                                  
                                                                  </md-card-content>
                                                              </md-card>
                                  
                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post