• H

    Would it be possible to do either of the following:

    a) Find the average of a data point across a period for Mondays only? i.e.

    <ma-point-statistics point="myPoint1" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
        The average value for Mondays in the period is {{ statsObj.averageif."Timestamp=Monday".value }}

    I've tried a few techniques using moment filters but have had no luck.

    b) Somewhat similarly, could you find the average of a data series if another series is equal to/greater than/less than another value for the corresponding timestamp? For instance:

    <ma-point-statistics point="myPoint1" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
    <ma-point-statistics point="myPoint2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
        The average value when myPoint1 is greater than myPoint2 is {{ statsObj.averageif."StatsObj1.value>StatsObj2.value".value }}

    I think these Excel style operations would be really useful to visualise trends in data immediately.

    Cheers, Henry

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • H

    Thanks @Jared-Wiltshire, if ng-init doesn't take expressions, why cant I simply use "valueField": "myPoint.value"?

    I dont use the watch-lists really... All I want to do is take <ma-get-point-value point-xid="EnergyOutA_Panasonic" point="myPoint" ></ma-get-point-value> and substitute it into the array for values. Surely there is an easy way to take a point-value, assign it a variable and just use that inside the array for values?

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • H

    Thanks @Jared-Wiltshire!
    My last qn - using ng-model, I can see how you have passed the value for an input into a graph's 'values'. How can I do this for a point value? . I tried interpolating a point value {{point.value}} directly inside values = "..." but that doesn't work. I.e

    <div class="ma-designer-root" id="84e87319-1442-41fa-a4ef-a4102f9dbbc0" style="width: 1000px; height: 768px; position: relative;">
         <ma-get-point-value point-xid="EnergyOutA_Panasonic" point="myPoint" ></ma-get-point-value>
       <div ng-init="values = [{'country': 'USA','visits': {{myPoint.value}},'color': '#FF0F00'}, {'country': 'China','visits': 1882,'color': '#FF6600'}, {'country': 'Japan','visits': 1809,'color': '#FF9E01'}, {'country': 'Germany','visits': 1322,'color': '#FCD202'}, {'country': 'UK','visits': 1122,'color': '#F8FF01'}, {'country': 'France','visits': 1114,'color': '#B0DE09'}, {'country': 'India','visits': 984,'color': '#04D215'}, {'country': 'Spain','visits': 711,'color': '#0D8ECF'}, {'country': 'Netherlands','visits': 665,'color': '#0D52D1'}, {'country': 'Russia','visits': 580,'color': '#2A0CD0'}, {'country': 'South Korea','visits': 443,'color': '#8A0CCF'}, {'country': 'Canada','visits': 441,'color': '#CD0D74'}]"></div>
       <category-x-axis class="amchart" id="8ec0e029-4b0b-4f53-aa0d-6c25b4bfa991" style="position: absolute; left: 27px; top: 98px; width: 100%; height: 400px;" values="values"></category-x-axis>

    Sorry about the lack of fluency in Angular - it is coming along...

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • H

    Sorry @Jared-Wiltshire, I'm being continually pressed to make the category as x axis chart work. Say I have a chart from AmCharts I want to use: https://www.amcharts.com/demos/column-with-rotated-series/
    Here is the HTML file:

    <!-- Styles -->
    #chartdiv {
      width: 100%;
      height: 500px;
    .amcharts-export-menu-top-right {
      top: 10px;
      right: 0;
    <!-- Resources -->
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    <!-- Chart code -->
    var chart = AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "theme": "light",
      "marginRight": 70,
      "dataProvider": [{
        "country": "USA",
        "visits": 3025,
        "color": "#FF0F00"
      }, {
        "country": "China",
        "visits": 1882,
        "color": "#FF6600"
      }, {
        "country": "Japan",
        "visits": 1809,
        "color": "#FF9E01"
      }, {
        "country": "Germany",
        "visits": 1322,
        "color": "#FCD202"
      }, {
        "country": "UK",
        "visits": 1122,
        "color": "#F8FF01"
      }, {
        "country": "France",
        "visits": 1114,
        "color": "#B0DE09"
      }, {
        "country": "India",
        "visits": 984,
        "color": "#04D215"
      }, {
        "country": "Spain",
        "visits": 711,
        "color": "#0D8ECF"
      }, {
        "country": "Netherlands",
        "visits": 665,
        "color": "#0D52D1"
      }, {
        "country": "Russia",
        "visits": 580,
        "color": "#2A0CD0"
      }, {
        "country": "South Korea",
        "visits": 443,
        "color": "#8A0CCF"
      }, {
        "country": "Canada",
        "visits": 441,
        "color": "#CD0D74"
      "valueAxes": [{
        "axisAlpha": 0,
        "position": "left",
        "title": "Visitors from country"
      "startDuration": 1,
      "graphs": [{
        "balloonText": "<b>[[category]]: [[value]]</b>",
        "fillColorsField": "color",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "visits"
      "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
      "categoryField": "country",
      "categoryAxis": {
        "gridPosition": "start",
        "labelRotation": 45
      "export": {
        "enabled": true
    <!-- HTML -->
    <div id="chartdiv"></div>

    Consider that my value for USA was stored in a datapoint USA:

    <ma-get-point-value point-xid="USA" point="USA"></ma-get-point-value>

    I want to be able to pass this value into the javascript to generate the graph, but interpolating the JS expression {{USA.value}} and placing it in like

    "visits": {{USA.value}},

    Wont work. What is the best way to pass angular expressions into Javascript?

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • H

    Thank you so much for that Jared - worked as expected!

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • H

    Sorry to raise an old topic @Jared-Wiltshire,

    <ma-now update-interval="30 seconds" on-change="firstTick && $state.go('page2'); firstTick = true"></ma-now>

    Has been working fine. Is there a way to only change after 30 seconds if the page is idle? ng-idle is the only AngularJS module I've found that could potentially work. However, I'm stuck figuring out how I could use it within the ma-now directive.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • H

    Thank you @Jared-Wiltshire - simple fix. Simply using Angular Material Tabs solves the issue.


    posted in Dashboard Designer & Custom AngularJS Pages read more
  • H

    This is potentially beyond the scope of the forum...

    If we created a tabbed dashboard page: like this example from W3schools, where tabbed content is originally hidden, but then displays upon click.


    One of the errors I have found which I have tried to resolve, unsuccessfully, through looking at ng-map is that when <ma-map></ma-map> is placed inside one of the tabs. The result looks like this:


    I believe the issue is that the map is initialised with no dimensions so when you then click on the div it doesn't know what size it should be. Is there way to refresh the ma-map when that div is selected?

    Here is the example code:

    <!DOCTYPE html>
    body {font-family: "Lato", sans-serif;}
    /* Style the tab */
    div.tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    /* Style the buttons inside the tab */
    div.tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    /* Change background color of buttons on hover */
    div.tab button:hover {
        background-color: #ddd;
    /* Create an active/current tablink class */
    div.tab button.active {
        background-color: #ccc;
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;
    /* Fade in tabs */
    @-webkit-keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    <h3>Fade in Tabs</h3>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    <div id="London" class="tabcontent">
      <p>London is the capital city of England.</p>
    <div id="Paris" class="tabcontent">
      <p>Paris is the capital of France.</p> 
    <div id="Tokyo" class="tabcontent">
    <ma-get-point-value point-xid="Demo 01-fan" point="myPoint1"></ma-get-point-value> 
    <ma-get-point-value point-xid="Demo 01-setpoint" point="myPoint2"></ma-get-point-value> 
    <ma-get-point-value point-xid="Demo 01-Temp" point="myPoint3"></ma-get-point-value>
    <ma-point-values point="myPoint3" values="chart1Vals" latest="50"></ma-point-values> 
    <ma-map lat="-12.95" long="-38.45" zoom="12" map-type="roadmap" info-window-theme="dark" desktop-height="600px" mobile-height="450px" ng-init="myMarkers={
            true: 'img/map-markers/purple-dot.png',
            false: 'img/map-markers/orange-dot.png'}" output-data="myOutputData">
        <marker id="marker1" position="-12.90, -38.41" icon="{url: '{{myMarkers[myPoint1.value]}}'}" on-click="$parent.$ctrl.toggleInfoWindow('setPoint1', 'marker1')"></marker>
        <marker id="marker2" position="-12.95, -38.43" draggable="true" icon="{url: 'img/map-markers/green-dot.png'}" on-click="$parent.$ctrl.toggleInfoWindow('setPoint2', 'marker2')"></marker>
        <marker id="marker3" position="-12.99, -38.47" draggable="true" on-click="$parent.$ctrl.toggleInfoWindow('chart1', 'marker3')"></marker>
        <marker id="marker4" position="-12.92, -38.42" draggable="true" icon="{url: 'img/map-markers/yellow-dot.png'}" on-click="$parent.$ctrl.setOutputData('Demo 01-amps')"></marker>
        <info-window id="setPoint2">    
                <ma-set-point-value point="myPoint2"></ma-set-point-value>
        <info-window id="setPoint1">
                <ma-set-point-value point="myPoint1"></ma-set-point-value>
        <info-window id="chart1">
            <div layout="row" layout-padding>
                <ma-serial-chart style="height: 150px; width: 250px" series-1-point="myPoint3" series-1-values="chart1Vals"></ma-serial-chart>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent*.style.display = "none";
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks*.className = tablinks*.className.replace(" active", "");
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";

    posted in Dashboard Designer & Custom AngularJS Pages read more

Looks like your connection to Mango Automation Forum was lost, please wait while we try to reconnect.