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.
Change XID dynamically
-
Hello, I need to create a button(not a points list) that changes the XID of an existing <ma-get-point-value> to redraw a chart.
Is there a way?
-
Hi Davide
I think it might be better to pull both points that you want with the
<ma-get-point-values>
and then changing the array that gets given to your chart. I did a quick markup as an example.<ma-point-values point-xid="DP_5c7692d5-6c59-4cfd-aa79-1236b68e7270" 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="DP_9c9deaf1-9a7f-4fce-8e12-c104efb3ce96" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"> </ma-point-values> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="point3" series-1-point="point1" series-1-type="line" series-1-color="red" legend="true" balloon="true" options="{valueAxes:[{minimum:0, axisColor:point1Color, color:point1Color}, {axisColor:point2Color, color:point2Color}]}"> </ma-serial-chart> <ma-button id="61cd6615-b20f-4423-9508-5b8acc1862e0" ng-click="point3 = point1Values" raised="true" style="position: absolute; left: 97px; top: 442px;"></ma-button> <ma-button id="f2bb2cfd-615f-48ff-9e07-8eede54f690e" ng-click="point3 = point2Values" raised="true" style="position: absolute; left: 201px; top: 442px;"></ma-button>```
-
Here's another way of doing it that will only fetch the values for the selected point. The buttons also highlight to show which point is selected.
<!-- set the initial data point XID for when the page loads --> <div ng-init="dataPointXid = 'temperature'"></div> <ma-get-point-value point-xid="{{dataPointXid}}" point="selectedPoint"></ma-get-point-value> <md-button ng-click="dataPointXid = 'temperature'" ng-class="{'md-raised': dataPointXid === 'temperature'}">Data point 1</md-button> <md-button ng-click="dataPointXid = 'voltage'" ng-class="{'md-raised': dataPointXid === 'voltage'}">Data point 2</md-button> <ma-point-values point="selectedPoint" values="pointValues" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"> </ma-point-values> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="pointValues" series-1-point="selectedPoint"> </ma-serial-chart>