Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
How to delay graph redraws
-
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?
-
Would you mind posting your code so we can help you? JS and HTML please.
-
<!-- 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();
}); -
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.
-
I think the problem is that the way you are doing it the
from
andto
change in successive digest cycles instead of both at once. Try setting theng-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(); });
-
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.
-
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.
-
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.
-
I like that ma-calc. And I added that style to the chart. No change.