Introduction #

SmartChart provides two template-based low-code development modes: Automated DIV mode (system auto-manages chart containers, for quick setup) and Free DIV mode (manual HTML layout, fully customizable). Through the template dev interface, developers can split the visual development window and display window for a professional development experience.

Use Cases #

• Professional development, split dashboard display and template editing
• Once familiar with SmartChart basics, you’ll enjoy this approach

Mode 1: Automated DIV #

When adding new dataset charts, auto-recognition applies - no manual template insertion needed. Do not use the chart add button in the template top menu for this mode. To edit charts/datasets:

Mode 2: Free DIV #

Edit templates like standard H5 pages, inserting chart placeholders where needed (recommended via template top menu chart add).

• Click chart to add, specify position like writing HTML. Chart code segment: {{div_list.chart_index}}
• Note: Free DIV mode added charts don’t include containers. Select “chart code” and click menu to wrap with container if needed.

If using free layout, delete the Automated DIV code block.

• Select generated chart code segment, click menu Dataset/Chart/Layout dev or use CTRL+Q to enter dev interface. Auto-creates new dataset if none exists.

Video reference (may be outdated): Free Dev Mode Video

Mode Comparison #

Switch note: When using Free DIV, delete the “Automated DIV” code block. Modes cannot be mixed.

Chart Code Segment Syntax #

<!-- Free DIV mode: insert chart placeholder in template Body -->
{{div_list.0}}  <!-- Chart 0 -->
{{div_list.1}}  <!-- Chart 1 -->

<!-- Wrap with container (e.g., smtdrag) -->
<div class="smtdrag" id="id_xxxx">
    {{div_list.0}}
</div>