i tried it .. quotes is not the problem
as you saw in my example of the svg code i try to print the value even in the id to debug it but its not working
In my svg i have

<rect 
     ng-repeat="point in points1" 
     id="{{value['value_' + point.xid]}}" 
     ng-style="{fill: (value['value_' + point.xid]) == 0 ? 'red' : 'green'}" />

and then in rendered html through chrome inspect i see 24 div's ( the limit of my query) and all of those rendered div are the same:

<rect ng-repeat="point in points1" id="" ng-style="{fill: (value['value_' + point.xid]) == 0 ? 'red' : 'green'}" style="fill: green;"></rect>

So obviously even the id has no value so thats why its doesnt get value also in the ng-style ...
the id="{{value['value_' + point.xid]}}" is null .. so its the wrong way to get the value right ?

And how the svg is goint to retreive the value from the combined just by one ng-repeat="point in points1" and without the loop of the actual value in combined ng-repeat="value in combined" ??
In my html i have those loops nested as

<div ng-repeat="(index,value) in combined">
    <div ng-repeat="point in points1">XID: {{point.xid}} , Time: {{value.timestamp | maMoment:'format':'DD/MM/YYYY'}} ,Point Name: {{point.name}} ,Point Value:  {{value['value_' + point.xid]}}</div>
</div>

but in my svg you suggest me to keep only one ng-repeat ? not the value in combined ?
so the above code with the 2 nested loops in my html that works good and we can see the output is equivalent to the following wth only one loop ?

<rect 
     ng-repeat="point in points1"  
     ng-style="{'fill': ST_000508.value == 0 ? 'red' : 'green'}" />

im confused !!

hi :) thanks for both of your responses..
It seems very simple but unfortunately is not working ..
I added the code to my svg and i realize through various debug that the ng-style="{'fill': (value['value_' + point.xid]) == 0 ? 'red' : 'green'}" inside the <rect tag of the svg is not working .. the value of the xid never gets a value ..
To sum up i put the code so you can see also the output .
this is few line of the svg edited in a text editor ( i dont put all of it because i have hundreds of rect)

<svg
<rect 
     ng-repeat="point in points1" 
     ng-style="{'fill': (value['value_' + point.xid]) == 0 ? 'red' : 'green'}" />

  <rect
     id="STR_920"
     width="11.97"
     height="0.97"
     x="9"
     y="2"
     ry="0.25"
     style="fill:#674ea7;fill-opacity:1;stroke-width:7" />
<rect
     id="STR_508"
     width="11.97"
     height="0.97"
     x="45"
     y="44.4"
     ry="0.25"
     style="fill:#999999;fill-opacity:1;stroke-width:7" />

My html in mango is

<ma-get-point-value point-xid="ST_000508" point="ST_000508"></ma-get-point-value>
<ma-get-point-value point-xid="ST_000509" point="ST_000509"></ma-get-point-value>
<ma-get-point-value point-xid="ST_000510" point="ST_000510"></ma-get-point-value>

<ma-point-query query="'or(name=like=STR_5*)'" limit="24" points="points1"></ma-point-query>

<ma-point-values points="points1" values="combined" from="dateBar.from" to="dateBar.to" rollup="AVERAGE" rollup-interval="1 DAYS">
</ma-point-values>


COMBINED:
<br>
{{combined}}
<br>
<div ng-repeat="(index,value) in combined">
    <div ng-repeat="point in points1">XID: {{point.xid}} , Time: {{value.timestamp | maMoment:'format':'DD/MM/YYYY'}} ,Point Name: {{point.name}} ,Point Value:  {{value['value_' + point.xid]}}</div>

</div>

<ma-svg ng-include="'/rest/v2/file-stores/public/LosetoMap_Modified.svg'">
</ma-svg>

My output is :

and above the output of the svg i have these for debug (i put it in code but its not code its the output of the html {{combined}} and the 2 div ng-repeat

COMBINED: 
[{"timestamp":1529359200000,"value_ST_000501":2.5324797453703702,"value_ST_000502":2.4958472222222223,"value_ST_000503":2.45721875,"value_ST_000504":2.527818287037037,"value_ST_000505":2.5340474537037037,"value_ST_000506":2.446441550925926,"value_ST_000507":2.4828055555555557,"value_ST_000509":2.606719328703704,"value_ST_000510":2.495085648148148,"value_ST_000511":2.483042824074074,"value_ST_000512":2.474778935185185,"value_ST_000513":2.4917071759259257,"value_ST_000514":2.477402199074074,"value_ST_000515":2.503596064814815,"value_ST_000516":2.4979340277777777,"value_ST_000517":2.6329930555555556,"value_ST_000518":2.530654513888889,"value_ST_000519":2.508365162037037,"value_ST_000520":2.4927065972222224,"value_ST_000521":2.5036099537037035,"value_ST_000522":2.5136047453703703,"value_ST_000523":2.543189236111111,"value_ST_000524":0,"value_ST_000508":0},{"timestamp":1529445600000,"value_ST_000501":2.362199446875,"value_ST_000502":2.323173372337963,"value_ST_000503":2.288589725,"value_ST_000504":2.358256738541667,"value_ST_000505":2.366965667013889,"value_ST_000506":2.263396686226852,"value_ST_000507":2.3154054489583333,"value_ST_000509":2.4408835403935183,"value_ST_000510":2.3216632368055556,"value_ST_000511":2.3201079952546295,"value_ST_000512":2.298350141666667,"value_ST_000513":2.318909483449074,"value_ST_000514":2.3095914775462965,"value_ST_000515":2.341121900578704,"value_ST_000516":2.3271681804398145,"value_ST_000517":2.466752191087963,"value_ST_000518":2.359174562615741,"value_ST_000519":2.359262277314815,"value_ST_000520":2.3289390302083333,"value_ST_000521":2.3426141127314817,"value_ST_000522":2.341633474652778,"value_ST_000523":2.3748450319444445,"value_ST_000524":0,"value_ST_000508":0}]
XID: ST_000501 , Time: 19/06/2018 ,Point Name: STR_5.01 ,Point Value: 2.5324797453703702
XID: ST_000502 , Time: 19/06/2018 ,Point Name: STR_5.02 ,Point Value: 2.4958472222222223
XID: ST_000503 , Time: 19/06/2018 ,Point Name: STR_5.03 ,Point Value: 2.45721875
XID: ST_000504 , Time: 19/06/2018 ,Point Name: STR_5.04 ,Point Value: 2.527818287037037
XID: ST_000505 , Time: 19/06/2018 ,Point Name: STR_5.05 ,Point Value: 2.5340474537037037
XID: ST_000506 , Time: 19/06/2018 ,Point Name: STR_5.06 ,Point Value: 2.446441550925926
XID: ST_000507 , Time: 19/06/2018 ,Point Name: STR_5.07 ,Point Value: 2.4828055555555557
XID: ST_000509 , Time: 19/06/2018 ,Point Name: STR_5.09 ,Point Value: 2.606719328703704
XID: ST_000510 , Time: 19/06/2018 ,Point Name: STR_5.10 ,Point Value: 2.495085648148148
XID: ST_000511 , Time: 19/06/2018 ,Point Name: STR_5.11 ,Point Value: 2.483042824074074
XID: ST_000512 , Time: 19/06/2018 ,Point Name: STR_5.12 ,Point Value: 2.474778935185185
XID: ST_000513 , Time: 19/06/2018 ,Point Name: STR_5.13 ,Point Value: 2.4917071759259257
XID: ST_000514 , Time: 19/06/2018 ,Point Name: STR_5.14 ,Point Value: 2.477402199074074
XID: ST_000515 , Time: 19/06/2018 ,Point Name: STR_5.15 ,Point Value: 2.503596064814815
XID: ST_000516 , Time: 19/06/2018 ,Point Name: STR_5.16 ,Point Value: 2.4979340277777777
XID: ST_000517 , Time: 19/06/2018 ,Point Name: STR_5.17 ,Point Value: 2.6329930555555556
XID: ST_000518 , Time: 19/06/2018 ,Point Name: STR_5.18 ,Point Value: 2.530654513888889
XID: ST_000519 , Time: 19/06/2018 ,Point Name: STR_5.19 ,Point Value: 2.508365162037037
XID: ST_000520 , Time: 19/06/2018 ,Point Name: STR_5.20 ,Point Value: 2.4927065972222224
XID: ST_000521 , Time: 19/06/2018 ,Point Name: STR_5.21 ,Point Value: 2.5036099537037035
XID: ST_000522 , Time: 19/06/2018 ,Point Name: STR_5.22 ,Point Value: 2.5136047453703703
XID: ST_000523 , Time: 19/06/2018 ,Point Name: STR_5.23 ,Point Value: 2.543189236111111
XID: ST_000524 , Time: 19/06/2018 ,Point Name: STR_5.24 ,Point Value: 0
XID: ST_000508 , Time: 19/06/2018 ,Point Name: STR_508 ,Point Value: 0

Basically the ng-style="{'fill': (value['value_' + point.xid]) == 0 ? 'red' : 'green'}" is not working inside the svg .. We need the id also right ? because in the ma-selector the id of the rect was the point.name .. so i thought i had to add it also in the svg
I wonder if the loop is enough in the svg, so i tried few other things in the svg but none worked :

<rect 
     ng-repeat="point in points1"  
     id="{{point.name}}" 
     ng-style="{'fill': ST_000508.value == 0 ? 'red' : 'green'}" />

<rect 
     ng-repeat="point in points1"  
     ng-repeat="value in combined"
     id="{{point.name}}" 
     ng-style="{'fill': ST_000508.value == 0 ? 'red' : 'green'}" />

<rect 
     ng-repeat="point in points1"  
     ng-repeat="value in combined"
     id="{{point.name}}" 
     ng-style="{'fill': (value['value_' + point.xid]) == 0 ? 'red' : 'green'}" />

<rect 
     ng-repeat="point in points1"  
     id="{{point.name}}" 
     ng-style="{'fill': (value['value_' + point.xid]) == 0 ? 'red' : 'green'}" />


<rect 
     ng-repeat="value in combined"
     ng-repeat="point in points1" 
     id="{{value['value_' + point.xid]}}" 
     ng-style="{'fill': (value['value_' + point.xid]) == 0 ? 'red' : 'green'}" />

<rect 
     ng-repeat="(index,value) in combined"
     ng-repeat="point in points1"  
     id="{{point.name}}" 
     ng-style="{'fill': (combined['value_' + point.xid][index].value) == 0 ? 'red' : 'green'}" />

As you see i even tried to pass directly the point.xid.value as from a specific data point ST_000508.value .. in the html this is working .. but not in the svg
The rect tag in the svg is wrong right ? need one or two loops including the value in combined ? do i need the id in the rect of the svg ?
Im sorry to ask you so many things but there is no much documentation around the ma-svg and it seems so simple but might be not !
Thank you very much

@Jared-Wiltshire thank you !
I spent so many hours debugging why the ng-repeat was not working ..
Ok so how exactly i add <rect ng-repeat="point in points1" ng-style="..."></rect> inside my SVG ?
Its my first time with Inkscape .. in the xml editor ? i have no clue !

Hello, im trying to make an interactive SVG
I have many data points that i get with a query and then im trying to assign them dynamically with a loop to an svg ..
Basically if the value of the data point is 0 i want to style my fill with red, If the value is less than the average of all the datapoints then i want the fill to be orange and if the value is more than the average leave the color as is ...
Seems that my div ma-selector is not correct
Any idea on how to do this ?
Once my ma-selector is correct should i make a function to switch the ng-class ? what you think is the best way to do it since i have more than 300 data points in that ng-repeat

Thank you

<ma-point-query query="'or(name=like=STR_*)'" limit="300" points="points1"></ma-point-query>

<ma-point-values points="points1" values="combined" from="dateBar.from" to="dateBar.to" rollup="AVERAGE" rollup-interval="1 DAYS">
</ma-point-values>

<ma-svg ng-include="'/rest/v2/file-stores/public/100 Pixel_Linne Vert.svg'">
    <div ng-repeat="value in combined">
        <div ng-repeat="point in points1">
            <div ma-selector="#point.name" ng-style="{'fill': (value['value_' + point.xid]) == 0 ? 'red' : 'green'}"></div>
        </div>
    </div>
</ma-svg>

thats my svg .. for example the STR_508 has a value of 0 but the ng-style is not assgined to the selector

Hi, my client finally bought the licence so we are starting to develop.
I have the following error in my console but also some times rendered as html instead of my page ... Im not sure what is this mismatch but it has to do with the component you wrote for me
Any idea how to fix this ?
thank you

Error bootstrapping Mango app: Mismatched anonymous define() module: function(angular, require) { 'use strict'; var userModule = angular.module('userModule', ['maUiApp']); class IntegralCollatorController { static get $$ngIsClass() { return true; } $onChanges(changes) { if (changes.points || changes.statistics && (this.points && this.statistics)) { this.calculateOutput(); } } calculateOutput() { if(!this.points || !this.statistics) return; var output = []; var minLength = this.points.length < this.statistics.length ? this.points.length : this.statistics.length; for(var k = 0; k < minLength; k+=1) { output.push({"value": this.statistics[k].integral.value, "timestamp": this.points[k].name}); } //TODO sort output this.outputVar = output; console.log(output); } } userModule.component('integralCollator', { bindings: { points: '<', statistics: '<', outputVar: '=' }, controller: IntegralCollatorController }); return userModule; } http://requirejs.org/docs/errors.html#mismatch
Show stack trace
Error: Mismatched anonymous define() module: function(angular, require) {
'use strict';

var userModule = angular.module('userModule', ['maUiApp']);

class IntegralCollatorController {
    static get $$ngIsClass() { return true; }
    
    $onChanges(changes) {
        if (changes.points || changes.statistics && (this.points && this.statistics)) {
            this.calculateOutput();
        }
    }
    
    calculateOutput() {
        if(!this.points || !this.statistics)
            return;
            
        var output = [];
        var minLength = this.points.length < this.statistics.length ? this.points.length : this.statistics.length;
        for(var k = 0; k < minLength; k+=1) {
            output.push({"value": this.statistics[k].integral.value, "timestamp": this.points[k].name});
        }
        //TODO sort output
        this.outputVar = output;
        console.log(output);
    }
}

userModule.component('integralCollator', {
    bindings: {
        points: '<',
        statistics: '<',
        outputVar: '='
    },
    controller: IntegralCollatorController
});

return userModule;

}
http://requirejs.org/docs/errors.html#mismatch
    at makeError (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:39:108173)
    at O (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:39:115062)
    at Object.a [as require] (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:39:121430)
    at requirejs (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:39:108712)
    at Function.b.configureLocale (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:76:52295)
    at Function.b.setUser (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:76:51806)
    at m.r [as $get] (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:76:55709)
    at Object.invoke (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:269:26286)
    at http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:269:24185
    at u (http://2.38.152.46:8082/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=4b59ed889675c8a103ef:269:25665)

hi !

I have 10 data points and i need to make a chart showing only one line with the sum of these 10 data points
In the following code i get the 10 different lines but cannot combine them into 1 with the sum of them
I get though the live value of the sum {{points | maSum:'value'}} but cant figure out how to pass this sum value into the chart
By using the stack-type ="regular" though i see the sum of all these 10 lines (and its the same as my {{points | maSum:'value'}} output but i need only one line (without stack-type) so i can see in my chart the total sum in watts of all the 10 datapoints in one line, during the hours of the day where the sun is up and the solar panels are working.

Also im wondering if there is a way on hover each line to get not only the value but also the name of the data point (for another chart that i have those 10 disctinct lines) so i can remove the legend and just discover the data point name by hovering the mouse over each individual line

And according to this topic https://forum.infiniteautomation.com/topic/2680/adding-guides-to-charts/5t i would like to know if instead of showing the guide of average if i can have a guide on the chart of the max value during the day or the timeframe set. And that this guide would be dynamically moving if there is a new higher value

Thank you very much

<b>Power Out : {{points | maSum:'value'}} Watts</b>

<div layout="row" layout-fill flex>
    <ma-now update-interval="10 minutes" output="to"></ma-now>
    <ma-calc input="to | maMoment:'set':{'hour': 5, 'minute': 0}" output="from"></ma-calc>
    <ma-calc input="to | maMoment:'set':{'hour': 21, 'minute': 0}" output="to"></ma-calc>
    
    <ma-point-query query="{name:'Power out'}" limit="10" points="points"></ma-point-query>
    
    <ma-get-point-value points="points"></ma-get-point-value>
    
    <ma-point-values points="points" values="combined" from="from" to="to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>
        
    <ma-serial-chart style="height: 600px; width: 100%" values="combined" points="points" legend="true" stack-type ="regular" series-X-type="line">
    </ma-serial-chart>
</div>

Hi ! yes the second solution works fine !
thank you :)
No control of the sorting output thought yet !

Hi philip thanks a lot for the fast response, much appreciated ...
Im playing around with the features of mango to see if its what my clients needs and as soon as i confirm him we will buy the licence
I tried the first solution you suggested
On a static trial its working fine

<div layout="row">
    <md-input-container flex="20">
        <label>Choose a first point</label>
        <ma-point-list limit="200" ng-model="point1"></ma-point-list>
    </md-input-container>
    <md-input-container flex="20">
        <label>Choose a second point</label>
        <ma-point-list limit="200" ng-model="point2"></ma-point-list>
    </md-input-container>
     <md-input-container flex="20">
        <label>Choose a third point</label>
        <ma-point-list limit="200" ng-model="point3"></ma-point-list>
    </md-input-container>
     <md-input-container flex="20">
        <label>Choose a fourth point</label>
        <ma-point-list limit="200" ng-model="point4"></ma-point-list>
    </md-input-container>
    
</div>


<ma-get-point-value point-xid="point1-xid" point="point1" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"></ma-get-point-value>
<ma-get-point-value point-xid="point2-xid" point="point2" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"></ma-get-point-value>
<ma-get-point-value point-xid="point3-xid" point="point3" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"></ma-get-point-value>
<ma-get-point-value point-xid="point4-xid" point="point4" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"></ma-get-point-value>
<ma-point-statistics point="point1" rendered=false from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="point2" rendered=false from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="point3" rendered=false from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="point4" rendered=false from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>
<ma-serial-chart style="height: 300px; width: 100%" series-1-values='[{"value":statsObj1.integral.value, "timestamp":point1.deviceName + "-" + point1.name}]' series-2-values='[{"value":statsObj2.integral.value, "timestamp":point2.deviceName + "-" + point2.name}]' series-3-values='[{"value":statsObj3.integral.value, "timestamp":point3.deviceName + "-" + point3.name}]' series-4-values='[{"value":statsObj4.integral.value, "timestamp":point4.deviceName + "-" + point4.name}]' default-type="column" options='{"categoryAxis":{"parseDates":false}}'></ma-serial>

Gives an output which looks correct

But when i try to make it via a point query it does not give me each data point as an individual bar but combine them together ..
I have a limit of 3 to make it more readable

<div layout="row">
    <md-input-container flex="50">
        <label>Device name</label>
        <input ng-init="dvName=''" ng-model="dvName" ng-model-options="{debounce:1000}">
    </md-input-container>
    <md-input-container flex="50">
        <label>Point name</label>
        <input ng-init="ptName=''" ng-model="ptName" ng-model-options="{debounce:1000}">
    </md-input-container>
</div>

<ma-point-query query="{$and: true, deviceName:dvName, name:ptName}" limit="3" points="points"></ma-point-query>
<ma-point-values points="points" values="combined" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-statistics points="points" rendered=false from="dateBar.from" to="dateBar.to" statistics="statsObj"></ma-point-statistics>


<ma-serial-chart style="height: 300px; width: 100%" points="points" values="combined"  series-1-values='[{"value":statsObj.integral.value, "timestamp":points.deviceName + "-" + points.name}]' default-type="column" options='{"categoryAxis":{"parseDates":false}}'></ma-serial>

And this give an output of :

I think my series-x-values is not correct or what ?
thank you

Hello
Im trying to make a simple chart that would have in the x axis the distinct integral values of each individual data point of my point query and not the time that is default
Is there an easy way to do that ?
Basically if i have lets say 63 data points , i want to get the integral of the day of each one and put it in a chart and sort them by the smaller to the bigger
So i can have at a glance an idea which of the data points are under performing comparing to the others
Please guide me through
thank you