Advanced charting
Mango provides a comprehensive charting system for visualizing time-series data, real-time values, and statistical summaries. Charts are powered by the amCharts library and can be embedded in dashboards, custom pages, and the built-in watch list views. This page covers the chart types available, how to configure them, and how to use advanced features such as multiple axes, series styling, rollups, and stacking.
Overview
Charts in Mango serve two primary purposes:
- Real-time monitoring -- Displaying live point values as they arrive, with the chart scrolling forward in time.
- Historical analysis -- Querying and visualizing stored point values over a selected time range, often with rollup aggregation applied.
The charting system is tightly integrated with the date bar (time range selector) at the top of the page, the data point watch list, and the dashboard designer. Most chart configuration is done through the dashboard designer or through direct component attributes in custom pages.
Chart types
Serial chart (time-series line/bar)
The serial chart is the most commonly used chart type in Mango. It plots one or more data series along a time axis. Each series can be rendered as a line, area, step line, smoothed line, or bar.
| Rendering mode | Best for |
|---|---|
| Line | Continuous analog values (temperature, pressure, flow) |
| Step line | Discrete state changes (equipment on/off, setpoint changes) |
| Area | Showing magnitude with fill (energy consumption, tank levels) |
| Bar | Comparing periodic aggregates (hourly totals, daily counts) |
| Smoothed line | Aesthetic presentation of noisy data |
To add a serial chart in the dashboard designer, drag the Serial Chart component from the component palette onto your dashboard canvas.
Pie chart
The pie chart displays proportional data as slices of a circle. In Mango, pie charts are typically used to show the distribution of time a point spent in different states (e.g., percentage of time a machine was running vs. idle vs. faulted).
Configure a pie chart by selecting data points and choosing a statistics mode such as "proportion of time" for multistate points or "value distribution" for numeric points.
Gauge chart
The gauge chart displays a single current value on a dial or arc, similar to a physical gauge. Gauges are useful for dashboard displays where operators need to quickly assess whether a value is within normal range.
Configure the gauge by setting:
| Parameter | Description |
|---|---|
| Min value | The minimum end of the gauge scale |
| Max value | The maximum end of the gauge scale |
| Bands | Colored ranges indicating normal (green), warning (yellow), and alarm (red) zones |
| Value point | The data point whose current value drives the needle position |
Stat chart (bar/column comparison)
The stat chart displays aggregated statistics for one or more points as bars or columns. Use it to compare values across points (e.g., average temperature across multiple zones) or to show summary statistics for a single point (min, max, average over a period).
Multiple axes and axis assignment
By default, a serial chart has one Y-axis. When plotting points with different units or scales on the same chart (e.g., temperature in degrees and flow in gallons per minute), add a second Y-axis to keep the data readable.
Adding a second Y-axis
In the chart configuration panel:
- Open the Axes settings for the serial chart component.
- Click Add axis to create a second Y-axis.
- Give the axis a title that describes the unit (e.g., "Flow (GPM)").
- The second axis appears on the right side of the chart by default.
Assigning series to axes
Each data series in the chart has an Axis property. Set this to the index of the desired axis:
- Axis 0 -- The left (primary) Y-axis.
- Axis 1 -- The right (secondary) Y-axis.
When two series use different axes, each axis scales independently, preventing one series from being compressed to a flat line when values differ by orders of magnitude.
Pen colors and series styling
Each data series on a chart can be individually styled.
Color assignment
By default, Mango assigns colors from a built-in palette. You can override the color for any series:
- In the dashboard designer -- Select the series in the chart configuration and set the Color property using a hex color code (e.g.,
#FF6600) or a named color. - In custom pages -- Set the
colorattribute on the series element or use thegraph-optionsattribute to pass amCharts graph properties.
Line and fill styling
| Property | Options | Description |
|---|---|---|
| Line thickness | 1-5 px (default: 2) | The width of the line stroke |
| Line opacity | 0-1 (default: 1) | Transparency of the line (0 = invisible, 1 = opaque) |
| Fill opacity | 0-1 (default: 0) | Transparency of the area fill below the line |
| Dash length | 0+ px | Set to a positive number for dashed lines (0 = solid) |
| Bullet type | None, round, square, triangle | Marker shapes at each data point |
| Bullet size | 0-10 px | Size of the data point markers |
Series visibility toggle
In the chart legend, clicking a series name toggles its visibility. This allows users to focus on specific series without reconfiguring the chart.
Auto-scale behavior and manual range
Auto-scale (default)
By default, each Y-axis automatically scales to fit the visible data. As the time range changes or new data arrives, the axis minimum and maximum adjust to keep all data visible with appropriate padding.
Auto-scale works well for most scenarios but can cause visual confusion when values are relatively stable (the axis zooms in to small variations, making minor fluctuations appear dramatic).
Manual range
To set a fixed Y-axis range:
- Open the axis configuration in the chart settings.
- Set Minimum and Maximum values explicitly.
- The axis will no longer auto-scale. Data outside the range is clipped.
Manual ranges are recommended for:
- Points with known operating ranges (e.g., 0-100% for a valve position).
- Dashboard displays where operators should see consistent scales across shifts.
- Comparing multiple charts that should share the same visual scale.
Hybrid approach
You can set only the minimum (e.g., 0) and leave the maximum on auto-scale, or vice versa. This anchors one end of the axis while allowing the other to adapt to the data.
Rollup settings for charts
When displaying data over long time ranges, Mango aggregates raw point values into rollup periods to reduce the number of data points rendered and improve chart performance.
Rollup types
| Rollup | Description |
|---|---|
| Average | The mean value over each rollup period |
| Maximum | The highest value in each period |
| Minimum | The lowest value in each period |
| Sum | The total of all values in each period (useful for energy, counts) |
| First | The first value recorded in each period |
| Last | The last value recorded in each period |
| Count | The number of values recorded in each period |
| None | No aggregation; display all raw values |
Rollup period
The rollup period determines the time bucket size. Common configurations:
| Time range displayed | Recommended rollup period |
|---|---|
| 1 hour | 1 minute or no rollup |
| 24 hours | 5 minutes or 15 minutes |
| 7 days | 1 hour |
| 30 days | 6 hours or 1 day |
| 1 year | 1 day or 1 week |
Auto rollup
When set to auto, Mango calculates the rollup period based on the selected time range and a target number of data points (typically 500-1000 points per series). This ensures charts load quickly regardless of the time range selected.
Configuring rollup per series
In the chart configuration, each series can have its own rollup type. This is useful when displaying both a temperature average and a temperature maximum on the same chart to show the range of variation.
Stacking options
Stacking is available for serial charts and causes multiple series to be drawn on top of each other rather than overlapping.
Stack types
| Stack type | Description | Use case |
|---|---|---|
| None (default) | Series overlap; each is drawn independently | Comparing trends across series |
| Regular | Values are stacked additively; each series starts where the previous one ends | Showing components of a total (e.g., energy by zone) |
| Percent (100%) | Series are stacked and normalized to 100% | Showing relative proportions over time |
Configuring stacking
In the serial chart configuration, set the Stack type property. All series on the same axis participate in the stack. If you need some series stacked and others not, assign the unstacked series to a different axis.
Time range and date bar interaction
The date bar at the top of the Mango UI controls the time range displayed on all charts on the page.
Date bar controls
| Control | Function |
|---|---|
| Preset buttons (1h, 6h, 12h, 1d, 1w, 1m) | Set the time range to a fixed duration ending at the current time |
| Date pickers | Manually set a specific start and end date/time |
| Auto-update toggle | When enabled, the chart automatically refreshes as new data arrives |
| Navigation arrows | Shift the time window forward or backward by the current range duration |
Chart-level time range override
Individual chart components can override the page-level date bar. Set the Time range property on the chart component to use a fixed or independent time range instead of following the date bar. This is useful for dashboards where one chart shows the last hour while another shows the last 24 hours.
Zoom and pan
Within a serial chart, you can:
- Zoom -- Click and drag on the chart area to zoom into a specific time window. A "zoom out" button appears to return to the full range.
- Pan -- When zoomed in, use the scrollbar at the bottom of the chart to pan through the time range.
- Cursor -- Hovering over the chart shows a vertical cursor line with a tooltip displaying the value and timestamp for each series at that point.
Exporting charts
Charts can be exported for use in reports or external presentations:
- Download as image -- Right-click the chart or use the chart menu to download as PNG or SVG.
- Download as data -- Export the underlying data as CSV or JSON for analysis in external tools.
- Print -- The chart menu includes a print option that formats the chart for printing.
Performance tips
- Limit the number of series per chart to 10 or fewer for responsive performance.
- Use rollup aggregation for time ranges longer than 1 hour. Displaying thousands of raw data points slows rendering.
- Reduce bullet/marker usage on large datasets. Markers on every data point create significant rendering overhead.
- Use step lines for binary/multistate data instead of smooth lines, which add unnecessary interpolation processing.
Related pages
- Dashboard designer -- Creating and editing dashboards
- UI overview -- General UI navigation and layout
- Data point watch lists — Configuring watch lists that feed chart displays