How to delay graph redraws

[JHuckins]

I have a graph in a dashboard that is connected to 'from' and 'to' dates.
I have a listener that watches for the 'from' date to change, and changes the 'to' date to be 24 hours after the new 'from'date.
My problem: When I change the 'from' date, the graph redraws twice: once with the original 'to' date and again with the new 'to' date. This looks very unprofessional.

Example:

• original 'from' date is 9/26/2016 midnight, original 'to' date is 9/27/2016 midnight.
• date picker attached to 'from' date changes 'from' date to 9/22/2016 midnight.
• 'from' date listener in js code changes 'to' date to 9/23/2016 midnight.
• graph redraws from 9/22/2016 midnight (new 'from' date) to 9/27/2016 midnight (old 'to' date).
• graph then redraws again from 9/22/2016 midnight to 9/23/2016 midnight (new 'to' date).

If I could just tell the graph to not redraw "right away", I would be good. How do I do that?

[Will Geller]

Would you mind posting your code so we can help you? JS and HTML please.

[JHuckins]

<!-- this is the date picker for the 'from' date -->
<mdp-date-picker class="custom-date" mdp-open-on-click="" mdp-format="ll" ng-model="from"></mdp-date-picker>

<!-- these are the points -->
<ma-point-values point="Dpoint1" values="D1Static" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"></ma-point-values>
<ma-point-values point="Dpoint2" values="D2Static" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"></ma-point-values>
<ma-point-values point="Dpoint3" values="D3Static" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"></ma-point-values>
<ma-point-values point="Dpoint4" values="D4Static" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"></ma-point-values>
<ma-point-values point="Dpoint5" values="D5Static" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"></ma-point-values>

<!-- this is the chart -->
<ma-serial-chart
series-1-values="D1Static" series-1-point="Dpoint1" series-1-color='#ffaa00'
series-2-values="D2Static" series-2-point="Dpoint2" series-2-color='#0000aa'
series-3-values="D3Static" series-3-point="Dpoint3" series-3-color='#00cc00'
series-4-values="D4Static" series-4-point="Dpoint4" series-4-color='#ff66cc'
series-5-values="D5Static" series-5-point="Dpoint5" series-5-color='#ff0000' series-5-axis="right"
options="{legend: {}, chartCursor: {categoryBalloonDateFormat: 'YYYY-MM-DD HH:NN'}, titles:[{text: 'Dispatch', size: 15}], valueAxes:[{title:'kW/kVAR', position:'left'},{title:'SOC%', position:'right'}]}">
</ma-serial-chart>

----------------------JS code that is executed inside maDashboards.run in maDashboards.js -------------
$rootScope.$watch('from', function() {
$rootScope.to = moment($rootScope.from).add(1, 'days').toDate();
});

[JHuckins]

The idea is that the chart always shows a 24-hour period. When the 'from' date is changed by the user via the date picker, then the watch sets the 'to' date to 24 hours later.

[Jared Wiltshire]

I think the problem is that the way you are doing it the from and to change in successive digest cycles instead of both at once. Try setting the ng-model of your date picker to another variable name e.g. datePickerDate then do

$rootScope.$watch('datePickerDate', function() {
  $rootScope.from = $rootScope.datePickerDate;
  $rootScope.to = moment($rootScope.datePickerDate).add(1, 'days').toDate();
});

[JHuckins]

Thanks. That sounded like a great idea. Unfortunately, it did not work. I double-checked, and my watch function is the only place the 'from' and 'to' dates are set. I'm using Mango 3.2.2.

[Will Geller]

I have a feeling you don't need to use JS to accomplish this. I just posted a similar solution using the <ma-calc> directive.

Try adding this in your HTML and comment out the watcher from the JS:

<ma-calc input="from | moment:'add':24:'hours'" output="to"></ma-calc>

This should take in your from value from the date picker and output a new to value that will be 24 hours advance of from.

[Will Geller]

Also you may need to set a size on your <ma-serial-chart> depending on what it is contained within. Try adding the style property

style="width:100%; height:500px"

and you may want to use <ma-now> to initialize the Day picker to yesterday or something.

[JHuckins]

I like that ma-calc. And I added that style to the chart. No change.