Mango Charts: Configuring a Rolling Seven-Day Range

Karen Mitchell2 min read
HMI / SCADAOther ManufacturerTutorial / How-to
Licensed PE Working through this on a live machine? A Maine-licensed engineer can take it from here — included with IMD hardware, by the hour for everything else. Book an engineer

Use ma-now to generate the current timestamp, then derive the start boundary with chained moment filters. This preserves the explicit time range required for the SUM rollup instead of requesting only the latest stored values.

Define the rolling time boundaries

Set to to theTimeNow. Set from to the start of the current day minus seven days. With update-interval="1 HOURS", the current timestamp refreshes hourly.

<ma-now update-interval="1 HOURS" output="theTimeNow"></ma-now>

<ma-point-values
    point="myPoint3"
    values="point3Values"
    from="theTimeNow | moment:'startOf':'day' | moment:'subtract':7:'days'"
    to="theTimeNow"
    rollup="SUM"
    rollup-interval="1 DAYS">
</ma-point-values>

Understand the resulting window

This expression does not mean “the latest seven samples.” It begins at midnight seven days before the current day and ends at the current time. Because the ending day is still in progress, the returned daily buckets can include a partial current-day bucket; verify the chart boundaries before treating every bar as a completed daily total.

Attribute Function
from Start of the current day, then shifted back seven days
to Current time supplied by ma-now
rollup="SUM" Requests summed values within each rollup interval
rollup-interval="1 DAYS" Groups the requested range into daily intervals
latest Requests the latest stored values and did not provide the required rollup behavior in the reported configuration

Configure multiple chart series consistently

If two points must share the same daily time axis, apply the same from, to, rollup, and rollup-interval attributes to both ma-point-values elements. Mixing a daily rolled-up series with a second series using latest="8" can produce mismatched timestamps or unexpected chart alignment.

  1. Create the shared current-time value with ma-now.
  2. Apply the same derived range and daily sum configuration to each series that must align.
  3. Confirm that the first timestamp begins at the intended midnight boundary, the last timestamp does not exceed the current time, and corresponding bars align across series.

Troubleshoot dashboard tab behavior separately

The time-range expression was reported to display the graph correctly, but the available evidence does not establish the cause of graphs appearing on other tabs or moving when tabs change. Diagnose that behavior from the complete dashboard and tab markup, including how separate HTML files are loaded and scoped; changing the second point from latest to a moment-based range did not resolve the tab issue.

FAQ

How do I show the last seven days in ma-point-values without a range picker?

Use ma-now for the current timestamp, set to="theTimeNow", and set from="theTimeNow | moment:'startOf':'day' | moment:'subtract':7:'days'".

Why does latest="7" not produce daily SUM rollups?

latest requests the latest stored values; in the reported configuration, it did not apply the required daily rollup. Use explicit from and to boundaries with rollup="SUM" and rollup-interval="1 DAYS".

Why do two Mango chart series have misaligned bars?

Check whether one series uses an explicit rolled-up range while the other uses latest. Apply the same from, to, rollup, and rollup-interval settings to both series, then verify their timestamps.

Back to blog