Change XID dynamically

[Davide27]

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?

[CraigWeb]

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>```

[Jared Wiltshire]

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>