• 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

    Not seeing chart data

    Dashboard Designer & Custom AngularJS Pages
    2
    2
    1.2k
    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.
    • A
      atkins.chrisw
      last edited by

      This may seem trivial. But I can't see any chart data on my Angular screens. Is this a permissions issue or did I screw up the code?

      <!--
      @copyright 2016 {@link http://proxyem.com|PROXYEM LLC.} All rights reserved.
      @author Christopher Atkins
      -->

      <!DOCTYPE html>
      <html lang="en">

      <!-- USER INPUT SECTION -->
      <!--vvvvvvvvvvvvvvvvvvvvvv-->

      <!-- Instructions:
      1)

      -->

      <!-- BUILDING NAME and assign it to an output variable "bldgName" -->
<div ng-app="" 

ng-init="


        meter1Name= '032 POWER East';
        meter2Name= '';
        meter3Name= '';
        meter4Name= '';
        meter5Name= '';
        tempPoint= 'DP_749465';
        
        homeBtnRef='dashboard.section1.page1';
        powerBtnRef='dashboard.section1.page1p';
        heatingBtnRef='dashboard.section1.page1h';
        coolingBtnRef='dashboard.section1.page1c';
        waterBtnRef='dashboard.section1.page1w';

        
        CHANGE= 'CHANGE ONLY IF NECESSARY vv';

        utilName='Power';
        gaugeName='Live Power Factor';
        realTimeName= 'Live Amps';

        header1= 'Energy Use';
        header2= 'Monthly Energy Use';
        header3= 'Power Quality';
        header4= 'Weather';
        header5= 'BTU Energy';

        label1= 'kW';
        label2= 'kWh';
        label3= 'Amps';
        label4= 'Volts LL';
        label5= 'Volts LN';
        label6= 'PF';
        label7= 'kVar';
        label8= '';
        label9= '';
        label10= '';
        label11= '';
        label12= '';

        switchlabel= 'Weather';
        disclaimer1= 'Values represent present day';
        disclaimer2= 'Values represent month to date';
        disclaimer3= 'Low value represents month to date';

        angularcspcss='/resources/angular-csp.css';
        angularmaterialcss='../../../../vendor/angular-material/angular-material.css';
        materialiconscss='../../../../vendor/material-design-icons/iconfont/material-icons.css';
        mdpickerscss='../../../../vendor/mdPickers/mdPickers.css';
        vitalitycss='/modules/dashboards/web/demo/styles/vitality.css'



    ">

      <!--^^^^^^^^^^^^^^^^^^^^^^^^-->
      <!-- USER INPUT SECTION -->

      <!-- NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY -->
      <!-- NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY -->
      <!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->
      <!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->

      <!-- SERVER SIDE QUERIES SECTION -->
      <!--vvvvvvvvvvvvvvvvvvvvvv-->

          <!--vvvv WEATHER SWITCH vvvv-->
    <div ng-init="myVars={}"></div>
    <div ng-if="showFourth">
        <ma-get-point-value point-xid={{tempPoint}} 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>

    <!--^^^^ WEATHER SWITCH ^^^^-->

    <!-- 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 AL'} | first" output="voltageAB"></ma-calc>
    <ma-calc input="points | filter:{name:'Volts BL'} | first" output="voltageBC"></ma-calc>
    <ma-calc input="points | filter:{name:'Volts CL'} | 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:'KVAR'} | first" output="kVar"></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="AVERAGE" 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>

    <ma-point-values point="kVar" values="kVarValues" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes" limit="1000"></ma-point-values>
</div>

      <!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^-->
      <!-- SERVER SIDE SERVER QUERIES SECTION -->

      <!-- HTML -->
      <!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->

      <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" ng-href="/resources/angular-csp.css"></link>
<link rel="stylesheet" ng-href="../../../../vendor/angular-material/angular-material.css">
<link rel="stylesheet" ng-href="../../../../vendor/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" ng-href="../../../../vendor/mdPickers/mdPickers.css">
<link rel ="stylesheet" ng-href="/modules/dashboards/web/demo/styles/vitality.css">

      </head>

      <body>

              <md-card-actions layout="row" layout-align="end center">
            <a ui-sref="dashboard.section1.page1"><md-button class="vitality-button">Home</md-button></a>
            <a ui-sref="dashboard.section1.page1p"><md-button class="vitality-button">Power</md-button></a>
            <a ui-sref="dashboard.section1.page1h"><md-button class= "vitality-button">Heating</md-button></a>
            <a ui-sref="dashboard.section1.page1c"><md-button class= "vitality-button">Cooling</md-button></a>
            <a ui-sref="dashboard.section1.page1w"><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;">{{gaugeName}}</h2>

                <!-- <ma-get-point-value point-xid="DP_744536" point="myPoint" latest="1"></ma-get-point-value> -->
                    
                    <div flex="">
                        <ma-gauge-chart point=powerFactor style="width:100%; height:300px; font-family: serif" start="0" band-1-end="50" band-1-color="red" band-2-end="90" band-2-color="yellow" band-3-end="100" band-3-color="green" font-size="15px" ></ma-gauge-chart class="amcharts-axis-band-band1" class="amcharts-axis-band-band2" class="amcharts-axis-band-band3" >
              
                    </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;">{{realTimeName}}</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>
                <div flex="100" layout="row">
                    <ma-serial-chart default-balloon-text="[[title]]: [[value]]" md-theme="dark" style="height: 300px; width: 100%; font-family: serif;" series-5-values="point5Values" series-5-point="currentA" series-5-color="blue" series-6-values="point6Values" series-6-point="currentB" series-6-color="orange" series-7-values="point7Values" series-7-point="currentC" series-7-color="green" default-type="column" legend="true" overflow= "visible" font-size="8px" options="{ 'fontSize': 12, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF', 'axisColor': '#FFFFFF'}], categoryAxis:{'axisColor':'#FFFFFF', 'labelsEnabled': false}, legend:{'autoMargins': false, 'valueAlign':'center','align':'center', 'labelWidth':0, 'useGraphSettings': false, 'spacing':0, 'forceWidth': true, 'color': '#FFFFFF'}}" class="amcharts-graph-column.amcharts-graph-series-5" class="amcharts-graph-column.amcharts-graph-series-6" class="amcharts-graph-column.amcharts-graph-series-7"></ma-serial-chart>
                </div>
            </md-card-content>

        </md-card>
    </div>
    
    <md-card flex ="80" flex layout="column" class= "cardcolor">
        <md-card-content md-theme="dark">
                <!-- <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"  style="color:#ffffff;">
                        <md-select ng-model="deviceName" ng-init="deviceName='032 POWER East'" style="font-size: 20px; font-family: serif;">
                        <md-option ng-value="'032 POWER East'" style="font-size: 20px; font-family: serif; ">Main Power</md-option>
                        
                    </md-select>
                    </md-input-container>
                    <md-switch flex="66" layout-align="end start" ng-model="showFourth" style=" font-family: serif; color:#ffffff;" >{{switchlabel}}</md-switch>
                    


                </div>


            <div ng-show="graphselector == 'kW'" style="color:#FFFFFF">
                <ma-serial-chart-2 default-balloon-text="[[title]]: [[value]]" style="height: 500px; width: 100%;" series-1-point="kW" series-1-values="kWValues" series-1-color="blue" series-1-type= "smoothedLine"  series-4-values="myVars.tempValues"  series-4-color="red" series-4-type= "line" series-4-axis="right" default-type="line"  balloon="true" export="true" zoom="true" options="{ export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF', 'axisColor': '#FFFFFF'}], categoryAxis:{'axisColor':'#FFFFFF', 'color': '#FFFFFF'}}" class="amcharts-graph-series-1" 
                ></ma-serial-chart-2>

            </div>

            <div ng-show="graphselector == 'kWh'" class= "amcharts-export-menu-bottom-left">
                <ma-serial-chart-2 default-balloon-text="[[title]]: [[value]]" style="height: 500px; width: 100%;" series-2-point="energy" series-2-values="energyValues" series-2-color="blue" series-2-type= "smoothedLine" series-4-point="myVars.temp" series-4-values="myVars.tempValues"  series-4-color="red" series-4-type= "line" series-4-axis="right" default-type="smoothedLine" export="true" balloon="true" options="{ export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF', 'axisColor': '#FFFFFF'}], categoryAxis:{'axisColor':'#FFFFFF', 'color': '#FFFFFF'}}" class="amcharts-graph-series-2"></ma-serial-chart-2>

            </div>
            <div ng-show="graphselector == 'Amps'" >
                <ma-serial-chart-2 default-balloon-text="[[title]]: [[value]]"  style="height: 500px; width: 100%;"  series-8-point="currentA" series-8-values="currentAValues" series-8-color="blue" series-8-type= "smoothedLine" series-9-point="currentB" series-9-values="currentBValues"  series-9-color="orange" series-9-type= "smoothedLine" series-10-point="currentC" series-10-values="currentCValues"  series-10-color="green" series-10-type= "smoothedLine" series-4-point="myVars.temp" series-4-values="myVars.tempValues"  series-4-color="red" series-4-type= "line" series-4-axis="right" default-type="smoothedLine"  export="true"  balloon="true" options="{ export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF', 'axisColor': '#FFFFFF'}], categoryAxis:{'axisColor':'#FFFFFF', 'color': '#FFFFFF'}}" class="amcharts-graph-series-8" class="amcharts-graph-series-9" class="amcharts-graph-series-10"></ma-serial-chart-2>

            </div>
            <div ng-show="graphselector == 'VoltsL'" >
                <ma-serial-chart-2 default-balloon-text="[[title]]: [[value]]" style="height: 500px; width: 100%;" series-11-point="voltageAB" series-11-values="voltageABValues" series-11-color="blue" series-11-type= "smoothedLine" series-12-point="voltageBC" series-12-values="voltageBCValues"  series-12-color="orange" series-12-type= "smoothedLine" series-13-point="voltageAC" series-13-values="voltageACValues"  series-13-color="green" series-13-type= "smoothedLine" series-4-point="myVars.temp" series-4-values="myVars.tempValues"  series-4-color="red" series-4-type= "line" series-4-axis="right" export="true"  balloon="true" options="{ export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF', 'axisColor': '#FFFFFF'}], categoryAxis:{'axisColor':'#FFFFFF', 'color': '#FFFFFF'}}" class="amcharts-graph-series-11" class="amcharts-graph-series-12" class="amcharts-graph-series-13"></ma-serial-chart-2>

            </div>
            <div ng-show="graphselector == 'VoltsN'">
                <ma-serial-chart-2 default-balloon-text="[[title]]: [[value]]" style="height: 500px; width: 100%;" series-14-point="voltageAN" series-14-values="voltageANValues" series-14-color="blue" series-14-type= "smoothedLine" series-15-point="voltageBN" series-15-values="voltageBNValues"  series-15-color="orange" series-15-type= "smoothedLine" series-16-point="voltageCN" series-16-values="voltageCNValues"  series-16-color="green" series-16-type= "smoothedLine" series-4-point="myVars.temp" series-4-values="myVars.tempValues"  series-4-color="red" series-4-type= "line" series-4-axis="right" export="true"  balloon="true" options="{ export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF', 'axisColor': '#FFFFFF'}], categoryAxis:{'axisColor':'#FFFFFF', 'color': '#FFFFFF'}}" class="amcharts-graph-series-14" class="amcharts-graph-series-15" class="amcharts-graph-series-16"></ma-serial-chart-2>

            </div>
            <div ng-show="graphselector == 'PF'">
                <ma-serial-chart-2 default-balloon-text="[[title]]: [[value]]" style="height: 500px; width: 100%;" series-17-point="powerFactor" series-17-values="powerFactorValues" series-17-color="blue" series-17-type= "smoothedLine" series-4-point="myVars.temp" series-4-values="myVars.tempValues"  series-4-color="red" series-4-type= "line" series-4-axis="right" export="true" balloon="true" options="{ export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF', 'axisColor': '#FFFFFF'}], categoryAxis:{'axisColor':'#FFFFFF', 'color': '#FFFFFF'}}" class="amcharts-graph-series-17" ></ma-serial-chart-2>

            </div>

            <div ng-show="graphselector == 'kVar'">
                <ma-serial-chart-2 default-balloon-text="[[title]]: [[value]]" style="height: 500px; width: 100%;" series-18-point="kVar" series-18-values="kVarValues" series-18-color="blue" series-18-type= "smoothedLine" series-4-point="myVars.temp" series-4-values="myVars.tempValues"  series-4-color="red" series-4-type= "line" series-4-axis="right" export="true" balloon="true" options="{ export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF', 'axisColor': '#FFFFFF'}], categoryAxis:{'axisColor':'#FFFFFF', 'color': '#FFFFFF'}}" class="amcharts-graph-series-18" ></ma-serial-chart-2>

            </div>

            <div flex layout="row" layout-xs="column" class="no-errors-spacer" md-theme="dark">

                

                <div layout="row" >
                    <mdp-date-picker  mdp-placeholder="From" mdp-open-on-click="" mdp-format="ll" ng-model="from"></mdp-date-picker>
                    <mdp-date-picker  mdp-placeholder="To" mdp-open-on-click="" mdp-format="ll" ng-model="to" ></mdp-date-picker>
                </div>
                
                <md-input-container flex="20" >
                    <label>Preset</label>
                    <ma-date-range-picker md-theme="dark" from="from" to="to" preset="LAST_1_DAYS" update-interval="1 minutes" style=" font-family: serif; color:#ffffff;"></ma-date-range-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;">{{label1}}</md-radio-button>
                            <md-radio-button value="kWh" style=" font-family: serif; color:#ffffff;">{{label2}}</md-radio-button>
                            <md-radio-button value="Amps" style="font-family: serif; color:#ffffff;">{{label3}}</md-radio-button>
                            <md-radio-button value="VoltsL" style="font-family: serif; color:#ffffff;">{{label4}}</md-radio-button>
                            <md-radio-button value="VoltsN" style="font-family: serif; color:#ffffff;">{{label5}}</md-radio-button>
                            <md-radio-button value="PF" style="font-family: serif; color:#ffffff;">{{label6}}</md-radio-button>
                            <md-radio-button value="kVar" style="font-family: serif; color:#ffffff;">{{label7}}</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> -->
      </body>

      </html>

      1 Reply Last reply Reply Quote 0
      • Will GellerW
        Will Geller
        last edited by

        The way to code is rendered in the post makes it very hard to find a specific problem. Maybe try using the forums upload function and upload the .html / .js files?

        Infinite Automation - UI Developer

        1 Reply Last reply Reply Quote 0
        • First post
          Last post