• H
henryblu

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>
<p>
The average value for Mondays in the period is {{ statsObj.averageif."Timestamp=Monday".value }}
}}
</p>
``````

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>
<p>
The average value when myPoint1 is greater than myPoint2 is {{ statsObj.averageif."StatsObj1.value>StatsObj2.value".value }}
}}
</p>
``````

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

Cheers, Henry

• H
henryblu

Of course! Thank you very much - Resolved.

• H
henryblu

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?

• H
henryblu

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

• H
henryblu

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 -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}

top: 10px;
right: 0;
}
</style>

<!-- 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 -->
<script>
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"
}, {
"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
}

});
</script>

<!-- 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?

• H
henryblu

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

• H
henryblu

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.

• H
henryblu

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

Cheers,
Henry

• H
henryblu

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>
<html>
<style>
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;
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;
}

from {opacity: 0;}
to {opacity: 1;}
}

from {opacity: 0;}
to {opacity: 1;}
}
</style>
<body>

<div class="tab">
</div>

<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<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">
<div>
<ma-set-point-value point="myPoint2"></ma-set-point-value>
</div>
</info-window>
<info-window id="setPoint1">
<div>
<ma-set-point-value point="myPoint1"></ma-set-point-value>
</div>
</info-window>
<info-window id="chart1">
<ma-serial-chart style="height: 150px; width: 250px" series-1-point="myPoint3" series-1-values="chart1Vals"></ma-serial-chart>
</div>
</info-window>
</ma-map>
</div>

<script>
function openCity(evt, cityName) {
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent*.style.display = "none";
}
for (i = 0; i < tablinks.length; i++) {
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

</body>
</html>

``````

• H
henryblu

Excellent, thanks guys - perfect fix.

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