Manual

Chart templates: line, bar, gauge, and JSON charts

Insert a chart from Templates, configure its layout, data and appearance, then export and verify it in Mingcedar. Line Chart, Bar Chart, Gauge, and JSON Chart have different fields.

ChartsDocumentation revised: 2026-10-21

GoalConfigure chart type, data fields, appearance, and runtime verification

OrderInsert the template, configure series or JSON fields, then export and verify in Mingcedar

ScreenshotsEnlarge the images to check the fields for your chart type

Charts: Chart templates: line, bar, gauge, and JSON charts

Insert a chart from Templates, configure its layout, data and appearance, then export and verify it in Mingcedar. Line Chart, Bar Chart, Gauge, and JSON Chart have different fields.

1. Insert a chart template

Insert a chart from Templates → Chart, then open Template Edit. The chart exports with the page and Mingcedar renders it from the configured data.

Line Chart: continuous trend data, including multiple tag curves in one coordinate system.
Bar Chart: current values or category comparison, usually multiple tags shown as bars.
Gauge: one tag displayed against a range, such as pressure, temperature, level, speed, or percentage.
JSON Chart: structured data supplied by a JSON tag, script, interface, or runtime variable.
The Template area shows Instance, Template, and Group for type confirmation. Practical setup is done in Position and Size and Chart.

2. Configure position and size first

Position and Size sets the runtime area. Check for overlap, compression and misalignment.

X and Y: the top-left coordinate of the chart on the page. Align them with titles, buttons, frames, and nearby objects.
Width and Height: the rendered size. Line and bar charts need enough room for axes, legends, and labels.
When placing charts side by side, keep heights or baselines consistent.
After resizing, check that title, legend, axis labels, and tooltip space are not clipped.

3. Configure Line Chart

Line Chart uses the Series table. Each row is one curve. At runtime the chart reads the configured tag and uses Name, Color, Unit, and Precision for display.

Chart Name: title text displayed when Title is enabled in Appearance.
Name: series label shown in legend or tooltip. Use short names that operators can recognize.
Tag: a numeric Tag name such as PLC_LINE01.PUMP01.SPEED. To use a page variable holding the name, enter =selectedSpeedTag.
Color: line color. Multiple curves should use visually distinct colors.
Unit: optional unit text. Keep it consistent with the tag definition.
Precision: decimal places. For example, 1 means the runtime displays one decimal place.
Add / Remove: add or remove series rows. Confirm the curve is not required before removing it.
Appearance: Title, Legend, and Grid control title, legend, and grid lines.

4. Configure Bar Chart

Bar Chart uses the Tags table. Each row usually represents a category bar or a current value. It is better for current-state comparison than long time trends.

Chart Name: title text. Name the comparison target, such as equipment, line, shift, or area.
Name: bar category or series label used by the x-axis, legend, and tooltip.
Tag: bar value source. Tags in one chart should use comparable units and meanings.
Color: bar color. Use consistent colors for similar items and accent colors only for emphasis.
Unit: value unit. Do not compare different units in one bar chart unless the chart is intentionally normalized.
Precision: display precision. Counts usually use 0; analog values follow the project requirement.
Advanced JSON: use only when bulk editing or direct JSON configuration is required. Standard table fields should be preferred for normal setup.

5. Configure Gauge

Gauge binds one Tag. Set its range, precision and color for a key value such as temperature, pressure, level, speed or percentage.

Chart Name: gauge title used to identify the metric on the runtime screen.
Tag: the single numeric tag read by the gauge.
Min and Max: range limits. Use the process allowed range or presentation range, not only the current observed value.
Unit: unit text, such as C, MPa, %, or rpm. Keep it consistent with the field tag.
Precision: displayed decimal places, commonly 0, 1, or 2.
Color: the main gauge color. Use the Color button and keep exception colors aligned with the project color rules.
Appearance: Title controls the title. Legend and Grid are usually not primary gauge options.

6. Configure JSON Chart fields

JSON Chart reads data from a JSON tag and maps fields into axis, series, and value roles. Field names must match the runtime JSON exactly, including letter case.

JSON Tag: the name of a Tag storing JSON data, such as PLC_LINE01.REPORT01.CHART_DATA. Use =selectedJsonTag for a dynamic name; the expression returns a name, not a JSON object or array.
Time Field (X): horizontal time field, commonly ts. Use a stable format such as 2026-07-06T10:48:54+08:00.
Series Name Field: series field, commonly series, used to distinguish lines or groups.
Value Field (Y): numeric value field, commonly value. The value must be convertible to a number.
Appearance: Title, Legend, and Grid control title, legend, and grid lines. During debugging, keep them enabled, then adjust for delivery.
When the JSON structure changes, update the field mapping at the same time to avoid empty charts, missing axes, or empty tooltips.

{
  "rows": [
    {
      "ts": "2026-07-06T10:48:54+08:00",
      "series": "Line01 Flow",
      "value": 18,
      "color": "#2563EB"
    },
    {
      "ts": "2026-07-06T10:49:54+08:00",
      "series": "Line01 Flow",
      "value": 44,
      "color": "#2563EB"
    }
  ]
}

JSON Tag: PLC_LINE01.REPORT01.CHART_DATA
Time Field (X): ts
Series Name Field: series
Value Field (Y): value

7. Directly edit Advanced JSON

Edit JSON directly exposes Data Source JSON, Field Mapping JSON and Appearance JSON for bulk changes, copied configurations or extensions. Use standard fields for ordinary configuration.

Data Source JSON: defines data source, refresh cycle, tag list, or JSON tag, such as kind, refreshMs, tags, tagName, and shape.
Field Mapping JSON: maps runtime fields, such as time, category, series, and value.
Appearance JSON: controls display switches, such as titleVisible, legendVisible, and gridVisible.
Keep the JSON valid. Property names and string values must use straight double quotes.
Copy the current JSON as a rollback version before saving, then verify the runtime rendering in Mingcedar.

{
  "version": 1,
  "kind": "variable-json",
  "refreshMs": 1000,
  "tagName": "PLC_LINE01.REPORT01.CHART_DATA",
  "shape": "rows"
}

{
  "time": "ts",
  "category": "category",
  "series": "series",
  "value": "value"
}

{
  "titleVisible": true,
  "legendVisible": true,
  "gridVisible": true
}

8. Pre-export checklist

Export and verify data sources, fields and access in Mingcedar. Saving the PPT does not confirm runtime availability.

The chart is not empty: the tag or JSON tag can be read at runtime and has the expected data type.
Fields match: JSON Chart Time Field, Series Name Field, and Value Field exactly match the JSON payload.
Values display correctly: unit, precision, range, and colors follow the project convention.
Layout does not overlap: title, legend, axes, tooltip, and nearby buttons or text remain readable.
Refresh behavior is expected: real-time curves, bars, and JSON charts refresh according to project requirements; missing or abnormal values are acceptable.
Delivery is traceable: record tags, JSON tags, field mappings, and Advanced JSON used by each chart.

Realtime lines: refresh, window and point limit

Configure Refresh (ms), Window (ms) and Max points together in the Line Chart basic editor. Defaults are 1000 ms, 600000 ms (10 minutes) and 3600 points. They control runtime sampling/display retention, not a server historical archive query.

Refresh (ms) and Window (ms) must be integers of at least 250. Max points must be an integer from 1 to 10000.
For one-second updates and a ten-minute window, use 1000 / 600000 / 600; the visible set also depends on data availability and both retention limits.
Up to 64 series are allowed. Gauge Max must exceed Min and Precision must be a non-negative integer.
Advanced JSON supports refreshMs, windowMs and maxPoints. Basic/advanced modes synchronize configuration and validate on save. Each JSON configuration is limited to 262144 characters and depth 32; field paths use safe dot-separated identifiers.

Templates panel showing Line Chart, Bar Chart, Gauge, and JSON Chart — **Figure 1: Chart template entry**
Choose the chart type from the Chart group in the Templates panel, then open Template Edit for instance configuration.

Line Chart standard setup with Series table, color, unit, precision, and appearance options — **Figure 2: Line Chart standard setup**
Each Series row is one curve: Name controls the display label, Tag supplies the value, and Color, Unit, and Precision control presentation.

Line Chart Advanced JSON setup with Data Source JSON, Field Mapping JSON, and Appearance JSON — **Figure 3: Line Chart Advanced JSON**
Direct edit mode separates data source, field mapping, and appearance into three JSON blocks for copied configuration or extension parameters.

Bar Chart standard setup with Tags table, color, unit, precision, and appearance options — **Figure 4: Bar Chart standard setup**
Bar Chart binds categories or current values through the Tags table; units and meanings should stay comparable in one chart.

Bar Chart Advanced JSON setup with real-time tag set and field mapping — **Figure 5: Bar Chart Advanced JSON**
Advanced JSON can define a real-time tag set, category field, series field, and value field. Validate the JSON before saving.

Gauge setup with Tag, Min, Max, Unit, Precision, and Color fields — **Figure 6: Gauge range setup**
Gauge binds one tag. Min and Max define the range, while Unit, Precision, and Color define the value presentation.

JSON Chart standard field mapping with current ChartData value shown beside the editor — **Figure 7: JSON Chart field mapping**
JSON Tag points to structured data. Time Field, Series Name Field, and Value Field must match the JSON payload.

JSON Chart Advanced JSON setup with variable-json source and field mapping — **Figure 8: JSON Chart Advanced JSON**
The advanced tagName setting identifies the Tag holding JSON. A dynamic-name expression returns a Tag name; that Tag supplies the structured data.

Mingcedar runtime showing line chart, bar chart, JSON chart, and gauge — **Figure 9: Runtime chart result**
After export, verify line, bar, JSON, and gauge rendering in Mingcedar.