Product: Mingcedar Studio DESIGNER

Chart templates: line, bar, gauge, and JSON charts | Mingcedar Studio

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.

Published 2026-10-25T12:48:42.652293042Z Updated 2026-10-25T12:48:42.652292281Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="chart-templates">Charts: Chart templates: line, bar, gauge, and JSON charts</h2>

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.

<h3 id="chart-templates-item-1">1. Insert a chart template</h3>

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

<ul>

<li>Line Chart: continuous trend data, including multiple tag curves in one coordinate system.</li>

<li>Bar Chart: current values or category comparison, usually multiple tags shown as bars.</li>

<li>Gauge: one tag displayed against a range, such as pressure, temperature, level, speed, or percentage.</li>

<li>JSON Chart: structured data supplied by a JSON tag, script, interface, or runtime variable.</li>

<li>The Template area shows Instance, Template, and Group for type confirmation. Practical setup is done in Position and Size and Chart.</li>

</ul>

</article>

<h3 id="chart-templates-item-2">2. Configure position and size first</h3>

<p>Position and Size sets the runtime area. Check for overlap, compression and misalignment.</p>

<ul>

<li>X and Y: the top-left coordinate of the chart on the page. Align them with titles, buttons, frames, and nearby objects.</li>

<li>Width and Height: the rendered size. Line and bar charts need enough room for axes, legends, and labels.</li>

<li>When placing charts side by side, keep heights or baselines consistent.</li>

<li>After resizing, check that title, legend, axis labels, and tooltip space are not clipped.</li>

</ul>

</article>

<h3 id="chart-templates-item-3">3. Configure Line Chart</h3>

<p>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.</p>

<ul>

<li>Chart Name: title text displayed when Title is enabled in Appearance.</li>

<li>Name: series label shown in legend or tooltip. Use short names that operators can recognize.</li>

<li>Tag: a numeric Tag name such as PLC_LINE01.PUMP01.SPEED. To use a page variable holding the name, enter =selectedSpeedTag.</li>

<li>Color: line color. Multiple curves should use visually distinct colors.</li>

<li>Unit: optional unit text. Keep it consistent with the tag definition.</li>

<li>Precision: decimal places. For example, 1 means the runtime displays one decimal place.</li>

<li>Add / Remove: add or remove series rows. Confirm the curve is not required before removing it.</li>

<li>Appearance: Title, Legend, and Grid control title, legend, and grid lines.</li>

</ul>

</article>

<h3 id="chart-templates-item-4">4. Configure Bar Chart</h3>

<p>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.</p>

<ul>

<li>Chart Name: title text. Name the comparison target, such as equipment, line, shift, or area.</li>

<li>Name: bar category or series label used by the x-axis, legend, and tooltip.</li>

<li>Tag: bar value source. Tags in one chart should use comparable units and meanings.</li>

<li>Color: bar color. Use consistent colors for similar items and accent colors only for emphasis.</li>

<li>Unit: value unit. Do not compare different units in one bar chart unless the chart is intentionally normalized.</li>

<li>Precision: display precision. Counts usually use 0; analog values follow the project requirement.</li>

<li>Advanced JSON: use only when bulk editing or direct JSON configuration is required. Standard table fields should be preferred for normal setup.</li>

</ul>

</article>

<h3 id="chart-templates-item-5">5. Configure Gauge</h3>

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

<ul>

<li>Chart Name: gauge title used to identify the metric on the runtime screen.</li>

<li>Tag: the single numeric tag read by the gauge.</li>

<li>Min and Max: range limits. Use the process allowed range or presentation range, not only the current observed value.</li>

<li>Unit: unit text, such as C, MPa, %, or rpm. Keep it consistent with the field tag.</li>

<li>Precision: displayed decimal places, commonly 0, 1, or 2.</li>

<li>Color: the main gauge color. Use the Color button and keep exception colors aligned with the project color rules.</li>

<li>Appearance: Title controls the title. Legend and Grid are usually not primary gauge options.</li>

</ul>

</article>

<h3 id="chart-templates-item-6">6. Configure JSON Chart fields</h3>

<p>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.</p>

<ul>

<li>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.</li>

<li>Time Field (X): horizontal time field, commonly ts. Use a stable format such as 2026-07-06T10:48:54+08:00.</li>

<li>Series Name Field: series field, commonly series, used to distinguish lines or groups.</li>

<li>Value Field (Y): numeric value field, commonly value. The value must be convertible to a number.</li>

<li>Appearance: Title, Legend, and Grid control title, legend, and grid lines. During debugging, keep them enabled, then adjust for delivery.</li>

<li>When the JSON structure changes, update the field mapping at the same time to avoid empty charts, missing axes, or empty tooltips.</li>

</ul>

<span class="line"><span> "series": "Line01 Flow",</span></span>

<span class="line"><span> "value": 18,</span></span>

<span class="line"><span> "color": "#2563EB"</span></span>

<span class="line"><span> "series": "Line01 Flow",</span></span>

<span class="line"><span> "value": 44,</span></span>

<span class="line"><span> "color": "#2563EB"</span></span>

<span class="line"><span>JSON Tag: PLC_LINE01.REPORT01.CHART_DATA</span></span>

<span class="line"><span>Time Field (X): ts</span></span>

<span class="line"><span>Series Name Field: series</span></span>

<span class="line"><span>Value Field (Y): value</span></span></code></pre></div>

</article>

<h3 id="chart-templates-item-7">7. Directly edit Advanced JSON</h3>

<p>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.</p>

<ul>

<li>Data Source JSON: defines data source, refresh cycle, tag list, or JSON tag, such as kind, refreshMs, tags, tagName, and shape.</li>

<li>Field Mapping JSON: maps runtime fields, such as time, category, series, and value.</li>

<li>Appearance JSON: controls display switches, such as titleVisible, legendVisible, and gridVisible.</li>

<li>Keep the JSON valid. Property names and string values must use straight double quotes.</li>

<li>Copy the current JSON as a rollback version before saving, then verify the runtime rendering in Mingcedar.</li>

</ul>

<span class="line"><span> "version": 1,</span></span>

<span class="line"><span> "kind": "variable-json",</span></span>

<span class="line"><span> "refreshMs": 1000,</span></span>

<span class="line"><span> "tagName": "PLC_LINE01.REPORT01.CHART_DATA",</span></span>

<span class="line"><span> "shape": "rows"</span></span>

<span class="line"><span> "category": "category",</span></span>

<span class="line"><span> "series": "series",</span></span>

<span class="line"><span> "value": "value"</span></span>

<span class="line"><span> "titleVisible": true,</span></span>

<span class="line"><span> "legendVisible": true,</span></span>

<span class="line"><span> "gridVisible": true</span></span>

</article>

<h3 id="chart-templates-item-8">8. Pre-export checklist</h3>

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

<ul>

<li>The chart is not empty: the tag or JSON tag can be read at runtime and has the expected data type.</li>

<li>Fields match: JSON Chart Time Field, Series Name Field, and Value Field exactly match the JSON payload.</li>

<li>Values display correctly: unit, precision, range, and colors follow the project convention.</li>

<li>Layout does not overlap: title, legend, axes, tooltip, and nearby buttons or text remain readable.</li>

<li>Refresh behavior is expected: real-time curves, bars, and JSON charts refresh according to project requirements; missing or abnormal values are acceptable.</li>

<li>Delivery is traceable: record tags, JSON tags, field mappings, and Advanced JSON used by each chart.</li>

</ul>

</article>

<h3 id="chart-templates-item-9">Realtime lines: refresh, window and point limit</h3>

<p>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.</p>

<ul>

<li>Refresh (ms) and Window (ms) must be integers of at least 250. Max points must be an integer from 1 to 10000.</li>

<li>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.</li>

<li>Up to 64 series are allowed. Gauge Max must exceed Min and Precision must be a non-negative integer.</li>

<li>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.</li>

</ul>

</article>

</div>

<strong>Figure 1: Chart template entry</strong>

<p>Choose the chart type from the Chart group in the Templates panel, then open Template Edit for instance configuration.</p>

</figcaption>

</figure>

<strong>Figure 2: Line Chart standard setup</strong>

<p>Each Series row is one curve: Name controls the display label, Tag supplies the value, and Color, Unit, and Precision control presentation.</p>

</figcaption>

</figure>

<strong>Figure 3: Line Chart Advanced JSON</strong>

<p>Direct edit mode separates data source, field mapping, and appearance into three JSON blocks for copied configuration or extension parameters.</p>

</figcaption>

</figure>

<strong>Figure 4: Bar Chart standard setup</strong>

<p>Bar Chart binds categories or current values through the Tags table; units and meanings should stay comparable in one chart.</p>

</figcaption>

</figure>

<strong>Figure 5: Bar Chart Advanced JSON</strong>

<p>Advanced JSON can define a real-time tag set, category field, series field, and value field. Validate the JSON before saving.</p>

</figcaption>

</figure>

<strong>Figure 6: Gauge range setup</strong>

<p>Gauge binds one tag. Min and Max define the range, while Unit, Precision, and Color define the value presentation.</p>

</figcaption>

</figure>

<strong>Figure 7: JSON Chart field mapping</strong>

<p>JSON Tag points to structured data. Time Field, Series Name Field, and Value Field must match the JSON payload.</p>

</figcaption>

</figure>

<strong>Figure 8: JSON Chart Advanced JSON</strong>

<p>The advanced tagName setting identifies the Tag holding JSON. A dynamic-name expression returns a Tag name; that Tag supplies the structured data.</p>

</figcaption>

</figure>

<strong>Figure 9: Runtime chart result</strong>

<p>After export, verify line, bar, JSON, and gauge rendering in Mingcedar.</p>

</figcaption>

</figure>

</div>