<![CDATA[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.

]]>https://forum.mango-os.com/topic/2432/hiding-or-refreshing-chart-data-in-angular-jsRSS for NodeWed, 13 May 2026 15:44:28 GMTThu, 01 Sep 2016 14:32:04 GMT60<![CDATA[Reply to Hiding or Refreshing chart data in Angular JS on Tue, 06 Sep 2016 16:52:41 GMT]]>That worked great!!!

]]>https://forum.mango-os.com/post/12562https://forum.mango-os.com/post/12562Tue, 06 Sep 2016 16:52:41 GMT<![CDATA[Reply to Hiding or Refreshing chart data in Angular JS on Tue, 06 Sep 2016 16:23:13 GMT]]>I would try wrapping the <ma-point-values> for temp in an ng-if statement. Note you will need to restructure your variables a little, if you assign a variable inside a ng-if statement you will not be able to see its value outside the ng-if statement. 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>
]]>https://forum.mango-os.com/post/12561https://forum.mango-os.com/post/12561Tue, 06 Sep 2016 16:23:13 GMT<![CDATA[Reply to Hiding or Refreshing chart data in Angular JS on Tue, 06 Sep 2016 15:40:36 GMT]]>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> -->
]]>https://forum.mango-os.com/post/12556https://forum.mango-os.com/post/12556Tue, 06 Sep 2016 15:40:36 GMT<![CDATA[Reply to Hiding or Refreshing chart data in Angular JS on Thu, 01 Sep 2016 19:03:59 GMT]]>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>
]]>https://forum.mango-os.com/post/12533https://forum.mango-os.com/post/12533Thu, 01 Sep 2016 19:03:59 GMT