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.
Hiding or Refreshing chart data in Angular JS
-
I have a desire to build a chart that shows 4 values. But I want to be able to use a switch to show/unshow the 4th data points. Is this in the options section of AMcharts? Do you have an example of code I could use to do that function?
Also, I am trying to use 4 radio buttons to display different data points. I am looking for an example code to refresh the chart data when I change the radio button.
-
Here's an example of what you requested, the value of the switch is used to alter the limit on the
<ma-point-query><md-radio-group ng-model="buildingName" ng-init="buildingName='Building 1'"> <md-radio-button value="Building 1">Building 1</md-radio-button> <md-radio-button value="Building 2">Building 2</md-radio-button> <md-radio-button value="Building 3">Building 3</md-radio-button> </md-radio-group> <div layout="row"> <md-input-container flex="100"> <label>Time period</label> <ma-date-range-picker from="from" to="to" preset="LAST_5_MINUTES" update-interval="1 minutes"></ma-date-range-picker> </md-input-container> </div> <md-switch ng-model="showFourth"> Show fourth: {{ !!showFourth }} </md-switch> <ma-point-query query="{deviceName: buildingName, $exact: true}" points="points" limit="showFourth ? 4 : 3"></ma-point-query> <ma-point-values points="points" values="combined" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"> </ma-point-values> <ma-serial-chart style="height: 600px; width: 100%" values="combined" points="points" legend="true"> </ma-serial-chart> -
Jared. Im stuck still
Here is code for a page I am making. I have it working great, except I can't figure out how to use the switch to turn off the weather data series graph (I have named it "temp" and in all of the charts it is series-4-data). I am trying to find a way to tell the page to hide the graph when I click the weather switch.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/resources/angular-csp.css"></link> <link rel="stylesheet" href="../../../../vendor/angular-material/angular-material.css"> <link rel="stylesheet" href="../../../../vendor/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="../../../../vendor/mdPickers/mdPickers.css"> <link rel ="stylesheet" ng-href="/modules/dashboards/web/clayground/styles/vitality.css"> </head> <!-- USER INPUT SECTION --> <!--vvvvvvvvvvvvvvvvvvvvvv--> <!-- Instructions: 1) Line 37: CHANGE the name of the building between the single quotes to the corresponding name of the building you are monitoring. 2) Line 41: VERIFY/CHANGE the name of the image file between the single quotes to match the file in the server corresponding to the building you are monitoring. 3) Lines 46,49,52,55,58,61,64,67,70; Verify/Change the Point-XID's to the corresponding xid of the meter you are using for the building. --> <!-- BUILDING NAME and assign it to an output variable "bldgName" --> <div ng-app="" ng-init="utilName= 'Power'; "> <!-- LIVE AMPS A XID and assign it to an output variable "liveAmpsA" --> <!-- <ma-get-point-value point-xid="DP_243067" point="liveAmpsA" ></ma-get-point-value> --> <!-- LIVE AMPS B XID and assign it to an output variable "liveAmpsB" --> <!-- <ma-get-point-value point-xid="DP_864173" point="liveAmpsB" ></ma-get-point-value> --> <!-- LIVE AMPS C XID and assign it to an output variable "liveAmpsC" --> <!-- <ma-get-point-value point-xid="DP_726944" point="liveAmpsC" ></ma-get-point-value> --> <!-- LIVE PF XID and assign it to an output variable "livepf" --> <!-- <ma-get-point-value point-xid="DP_744536" point="livepf" latest="1"></ma-get-point-value> --> <!-- MONTHLY DELTA KWH XID and assign it to an output variable "monthlydeltakwh" --> <!-- <ma-get-point-value point-xid="DP_355369" point="monthlylowpf"></ma-get-point-value> --> <!-- TEMP XID and assign it to an output variable "temp" --> <ma-get-point-value point-xid="DP_749465" point="temp"></ma-get-point-value> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="{deviceName:deviceName}" sort="'name'" points="points"></ma-point-query> <ma-get-point-value points="points" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes"></ma-get-point-value> <!-- Client side filter by name --> <ma-calc input="points | filter:{name:'KWH'} | first" output="energy"></ma-calc> <ma-calc input="points | filter:{name:'Amps A'} | first" output="currentA"></ma-calc> <ma-calc input="points | filter:{name:'Amps B'} | first" output="currentB"></ma-calc> <ma-calc input="points | filter:{name:'Amps C'} | first" output="currentC"></ma-calc> <ma-calc input="points | filter:{name:'Volts AB'} | first" output="voltageAB"></ma-calc> <ma-calc input="points | filter:{name:'Volts BC'} | first" output="voltageBC"></ma-calc> <ma-calc input="points | filter:{name:'Volts AC'} | first" output="voltageAC"></ma-calc> <ma-calc input="points | filter:{name:'Volts AN'} | first" output="voltageAN"></ma-calc> <ma-calc input="points | filter:{name:'Volts BN'} | first" output="voltageBN"></ma-calc> <ma-calc input="points | filter:{name:'Volts CN'} | first" output="voltageCN"></ma-calc> <ma-calc input="points | filter:{name:'KW'} | first" output="kW"></ma-calc> <ma-calc input="points | filter:{name:'PF'} | first" output="powerFactor"></ma-calc> <ma-point-values point="temp" values="tempValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="kW" values="kWValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="energy" values="energyValues" from="from" to="to" rollup="DELTA" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="currentA" values="currentAValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="currentB" values="currentBValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="currentC" values="currentCValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="voltageAB" values="voltageABValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="voltageBC" values="voltageBCValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="voltageAC" values="voltageACValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="voltageAN" values="voltageANValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="voltageBN" values="voltageBNValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="voltageCN" values="voltageCNValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> <ma-point-values point="powerFactor" values="powerFactorValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> </div> <!--^^^^^^^^^^^^^^^^^^^^^^^^--> <!-- USER INPUT SECTION --> <!-- <md-toolbar md-whiteframe="2"> <h2 class="md-toolbar-tools"><span></span></h2> </md-toolbar> --> <md-card-actions layout="row" layout-align="end center"> <a ui-sref="dashboard.home"><md-button class="vitality-button">Home</md-button></a> <a ui-sref="dashboard.power"><md-button class="vitality-button">Power</md-button></a> <a ui-sref="dashboard.heating"><md-button class= "vitality-button">Heating</md-button></a> <a ui-sref="dashboard.cooling"><md-button class= "vitality-button">Cooling</md-button></a> <a ui-sref="dashboard.water"><md-button class= "vitality-button">Water</md-button></a> </md-card-actions> <!-- <div layout="column" layout-fill flex> --> <div layout="row" layout-gt-xs="row"> <div flex="20" layout="column"> <md-card flex ="100" layout="column" class= "cardcolor"> <md-card-content> <h2 class="box-title" style="font-family: serif; color:#ffffff;">Live Power Factor</h2> <!-- <ma-get-point-value point-xid="DP_744536" point="myPoint" latest="1"></ma-get-point-value> --> <div flex=""> <ma-gauge-chart point="powerFactor" start=".0" band-1-end=".5" band-1-color="red" band-2-end=".9" band-2-color="yellow" band-3-end="1.0" band-3-color="green" style="width:100%; height:300px"></ma-gauge-chart> </div> </md-card-content> </md-card> <md-card flex="100" layout="column" class= "cardcolor"> <md-card-content> <h2 class="box-title" style="font-family: serif; color:#ffffff;">Live Amps</h2> <ma-point-values point="currentA" values="point5Values" latest="1"></ma-point-values> <ma-point-values point="currentB" values="point6Values" latest="1"></ma-point-values> <ma-point-values point="currentC" values="point7Values" latest="1"></ma-point-values> <ma-serial-chart style="height: 300px; width: 100%;" series-5-values="point5Values" series-5-point="currentA" series-6-values="point6Values" series-6-point="currentB" series-7-values="point7Values" series-7-point="currentC" default-type="column" legend="true"></ma-serial-chart> </md-card-content> </md-card> </div> <md-card flex ="80" flex layout="column" class= "cardcolor"> <md-card-content> <!-- <h2 class="box-title" style=" font-family: serif; color:#ffffff;">Meter</h2> --> <div flex="100" layout="row"> <md-input-container flex="33" layout-align="start start" > <label>Choose a device</label> <md-select ng-model="deviceName" ng-init="deviceName='032 POWER East'" style="font-family: serif; color:#ffffff;"> <md-option ng-value="'032 POWER East'">Meter 1</md-option> <md-option ng-value="'oo'">Meter 2</md-option> <!-- <md-option ng-value="'Meter 3'">Meter 3</md-option> --> </md-select> </md-input-container> <md-switch flex="66" layout-align="end start" ng-model="showFourth" style=" font-family: serif; color:#ffffff;" >Weather</md-switch> </div> <div ng-show="graphselector == 'kW'"> <ma-serial-chart style="height: 500px; width: 100%" series-1-point="kW" series-1-values="kWValues" series-1-color="blue" series-1-type= "column" series-4-point="temp" series-4-values="tempValues" series-4-color="red" series-4-type= "line" series-4-axis="right" options="{chartScrollbar:{'enabled': true}} {chart.hideGraph(chart.graphs[2]}" export="true" legend="true" balloon="true"></ma-serial-chart> </div> <div ng-show="graphselector == 'kWh'"> <ma-serial-chart style="height: 500px; width: 100%" series-1-point="energy" series-1-values="energyValues" series-1-color="blue" series-1-type= "column" series-4-point="temp" series-4-values="tempValues" series-4-color="red" series-4-type= "line" series-4-axis="right" options="{chartScrollbar:{'enabled': true}}" export="true" legend="true" balloon="true"></ma-serial-chart> </div> <div ng-show="graphselector == 'Amps'"> <ma-serial-chart style="height: 500px; width: 100%" series-1-point="currentA" series-1-values="currentAValues" series-1-color="blue" series-1-type= "column" series-2-point="currentB" series-2-values="currentBValues" series-2-color="orange" series-2-type= "column" series-3-point="currentC" series-3-values="currentCValues" series-3-color="green" series-3-type= "column" series-4-point="temp" series-4-values="tempValues" series-4-color="red" series-4-type= "line" series-4-axis="right" options="{chartScrollbar:{'enabled': true}}" export="true" legend="true" balloon="true"></ma-serial-chart> </div> <div ng-show="graphselector == 'VoltsL'"> <ma-serial-chart style="height: 500px; width: 100%" series-1-point="voltageAB" series-1-values="voltageABValues" series-1-color="blue" series-1-type= "column" series-2-point="voltageBC" series-2-values="voltageBCValues" series-2-color="orange" series-2-type= "column" series-3-point="voltageAC" series-3-values="voltageACValues" series-3-color="green" series-3-type= "column" series-4-point="temp" series-4-values="tempValues" series-4-color="red" series-4-type= "line" series-4-axis="right" options="{chartScrollbar:{'enabled': true}}" export="true" legend="true" balloon="true"></ma-serial-chart> </div> <div ng-show="graphselector == 'VoltsN'"> <ma-serial-chart style="height: 500px; width: 100%" series-1-point="voltageAN" series-1-values="voltageANValues" series-1-color="blue" series-1-type= "column" series-2-point="voltageBN" series-2-values="voltageBNValues" series-2-color="orange" series-2-type= "column" series-3-point="voltageCN" series-3-values="voltageCNValues" series-3-color="green" series-3-type= "column" series-4-point="temp" series-4-values="tempValues" series-4-color="red" series-4-type= "line" series-4-axis="right" options="{chartScrollbar:{'enabled': true}}" export="true" legend="true" balloon="true"></ma-serial-chart> </div> <div ng-show="graphselector == 'PF'"> <ma-serial-chart style="height: 500px; width: 100%" series-1-point="powerFactor" series-1-values="powerFactorValues" series-1-color="blue" series-1-type= "column" series-4-point="temp" series-4-values="tempValues" series-4-color="red" series-4-type= "line" series-4-axis="right" options="{chartScrollbar:{'enabled': true}}" export="true" legend="true" balloon="true"></ma-serial-chart> </div> <div flex layout="row" layout-xs="column" class="no-errors-spacer"> <md-input-container flex=""> <div layout="row" style="font-family: serif; color:#ffffff;"> <mdp-date-picker mdp-placeholder="From date" mdp-open-on-click="" mdp-format="ll" ng-model="from" ></mdp-date-picker> <mdp-date-picker mdp-placeholder="To date" mdp-open-on-click="" mdp-format="ll" ng-model="to" ></mdp-date-picker> <!-- <label style="font-size:200%; font-family: serif; color:#ffffff;">Date preset</label> --> <ma-date-range-picker from="from" to="to" preset="LAST_3_HOURS" update-interval="1 minutes" style="font-family: serif; color:#ffffff;"></ma-date-range-picker> </div> </md-input-container> <!-- <md-input-container flex=""> <label>From date</label> <ma-date-picker ng-model="from"></ma-date-picker> </md-input-container> <md-input-container flex=""> <label>To date</label> <ma-date-picker ng-model="to"></ma-date-picker> </md-input-container> --> </div> <div flex-layout="row" layout-xs="column" class="no-errors-spacer" > <md-radio-group ng-model="graphselector" ng-model-options="{getterSetter:true}" ng-init="graphselector='kW'" layout="row" > <md-radio-button value="kW" class="md-primary" style="font-family: serif; color:#ffffff;">kw</md-radio-button> <md-radio-button value="kWh" style=" font-family: serif; color:#ffffff;"> kWh </md-radio-button> <md-radio-button value="Amps" style="font-family: serif; color:#ffffff;">Amps</md-radio-button> <md-radio-button value="VoltsL" style="font-family: serif; color:#ffffff;">Volts LL</md-radio-button> <md-radio-button value="VoltsN" style="font-family: serif; color:#ffffff;">Volts LN</md-radio-button> <md-radio-button value="PF" style="font-family: serif; color:#ffffff;">PF</md-radio-button> <!-- <md-radio-button ng-repeat="i in range(1,5)" value="{{i}}" ng-style="myPoint.valueRenderer(i)">{{myPoint.valueRenderer(i).text}}</md-radio-button> --> </md-radio-group> </div> <!-- <div ng-repeat="pt in points" layout="row" style="font-family: serif; color:#ffffff;"> <label layout="row" >{{pt.name}}: </label> {{pt.renderedValue}} </div> --> </md-card-content> </md-card> </div> <!-- </div> --> -
I would try wrapping the
<ma-point-values>for temp in anng-ifstatement. Note you will need to restructure your variables a little, if you assign a variable inside ang-ifstatement you will not be able to see its value outside theng-ifstatement. You get around this by assigning properties on an object. See below.<div ng-init="myVars={}"></div> <div ng-if="showFourth"> <ma-get-point-value point-xid="DP_749465" point="myVars.temp"></ma-get-point-value> <ma-point-values point="myVars.temp" values="myVars.tempValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values> </div> <!-- reset the variables to undefined when the switch is turned off --> <div ng-if="!showFourth"> <ma-calc input="undefined" output="myVars.temp"></ma-calc> <ma-calc input="undefined" output="myVars.tempValues"></ma-calc> </div> -
That worked great!!!
