First initializing a chart using ma-point-values xid built using other datapoint values

[etantonio]

Hi,
I've a chart where I want to show the power of an inverter, this is a template page named "home.html" I want to use it for several different inverter, so I calculate the datapoint xid using other two datapoints "plantNameAcronym" and "trackerRowColumn":

<div flex layout="column" layout-gt-sm="row" layout-align="space-between" ng-init="live=1; energy=0">
  <md-card flex="100" flex-gt-sm="50">

    <md-card-title>
      <md-button ng-class="{'selected': live === 1, 'not-selected':live!==0}" ng-mousedown="live=1; from=theTimeNow">LIVE</md-button>
      <mdp-date-picker mdp-placeholder="Day" ng-click="live=0" mdp-open-on-click="" mdp-format="ll" ng-model="from"></mdp-date-picker>
    </md-card-title>


    <md-card-content class="graph-content">
      <div ng-if="live ==0">
        <ma-point-values point-xid="{{plantNameAcronym.value}}_TRK-{{trackerRowColumn.value}}_FML01-power-smart" point="powerPast" values="powerPastValues"
              from="from | moment:'startOf':'day' | moment:'add':3:'hours'"
              to="from | moment:'endOf':'day'" rollup="LAST" rollup-interval="1 minutes">
         </ma-point-values>
      
      
         <ma-serial-chart style="height: 250px; width: 98%" series-1-values="powerPastValues" series-1-color="#F88F24" series-1-point="powerPast" series-1-type="line"
            legend="false" default-balloon-text="Power: [[value]] kW" balloon="true" export="true"  stack-type="regular"
            options="{export: {'dateFormat': 'DD/MM/YYYY H:mm ', 'fileName': 'Power'},
            titles:[{text:'Power chart',color:'#165A87'}],
            valueAxes:[{title:'[kW]', gridColor:'#444343', axisColor:'#444343',titleColor:'#165A87'}],
            categoryAxis:{gridColor:'#444343', axisColor:'#444343', startEffect:'elastic'}
                }">
        </ma-serial-chart>
      </div>

      <div ng-if="live ==1">
        <ma-point-values point-xid="{{plantNameAcronym.value}}_TRK-{{trackerRowColumn.value}}_FML01-power-smart" point="powerLive" values="powerLiveValues"
          from="theTimeNow | moment:'startOf':'day' | moment:'add':3:'hours'"
          to="theTimeNow" rollup="LAST" rollup-interval="1 minutes">
        </ma-point-values>

        <ma-serial-chart style="height: 250px; width: 98%" series-1-values="powerLiveValues" series-1-color="#F88F24" series-1-point="powerLive" series-1-type="line"
          legend="false" default-balloon-text="Power: [[value]] kW" balloon="true" export="true"  stack-type="regular"
          options="{export: {'dateFormat': 'DD/MM/YYYY H:mm ', 'fileName': 'Power'},
          titles:[{text:'Power chart',color:'#165A87'}],
          valueAxes:[{title:'[kW]', gridColor:'#444343', axisColor:'#444343',titleColor:'#165A87'}],
          categoryAxis:{gridColor:'#444343', axisColor:'#444343', startEffect:'elastic'}
          }">
        </ma-serial-chart>
      </div>
    </md-card-content>
  </md-card>
      </div>

instead in another file customized for each inverter (6.4 in this case) I've something like this:

<ma-get-point-value point-xid="TER_TRK-6.4_ConfigRPI-tracker-rowColumn" point="trackerRowColumn"></ma-get-point-value>
<ma-get-point-value point-xid="TER_TRK-6.4_ConfigRPI-plantNameAcronym" point="plantNameAcronym"></ma-get-point-value>
<div ng-include="'templates/home.html'"></div>

My problem is that on first loading (live=1) the graph is not showed

but clicking on "Day" an then again on "Live" the graph is showed correctly

is seems to be an initialization problem but I can't realize where's the problem, using directly point-xid="TER_TRK-6.4_FML01-power-smart" works without problems:

<ma-point-values point-xid="TER_TRK-6.4_FML01-power-smart" point="powerLive" values="powerLiveValues"
          from="theTimeNow | moment:'startOf':'day' | moment:'add':3:'hours'"
          to="theTimeNow" rollup="LAST" rollup-interval="1 minutes">
        </ma-point-values>

Any idea about how to solve the problem?
Thanks,
Antonio

[etantonio]

It seems that the first time the page is executed the

<ma-point-values point-xid="{{plantNameAcronym.value}}_TRK-{{trackerRowColumn.value}}_FML01-power-smart"

becomes:

<ma-point-values point-xid="TER_TRK-6.4_FML01-power-smart"

but ma-point-values is evaluated just when I switch from a graph type to the other.

I've tried to use ng-init in an outer div to evaluate the point xid before but the result is always a blank graph.

[MattFox]

Try using an ng-if, that way it won't load until you have the values in the browser to insert into the chart.
I do that due to the fact there is always some delay with HTTP requests if you're using everything from the dashboard side without any javascript code.

Fox

[etantonio]

It's not working for me, I'll solve this repeating the page for any "trackerRowColumn" in the plant instead of creating a template to use for all the plant, thanks anyway.
Antonio