Introduction #
SmartChart is a low-code visual analytics platform built on Python + Django, integrating dataset development, ECharts chart configuration, layout drag-and-drop, and permission management. You only need to know SQL (or Python) to quickly build data dashboards, reports, and business systems.
Pre-Development Videos #
- 6.x Introduction Video
- 8.x is now available with significant UI changes, refer to the documentation for details
Note: Some icons may change between versions, but their positions remain largely the same.
Install Python Environment #
- Prerequisites: Official Latest Python Download, also available from Mirror Download, Windows 64-bit Installer, Mac Installer
- Windows Installation Video Guide, Note: When installing Python on Windows, select “Add to Path”
- For Linux installation, refer to the deployment docs below: Linux Installation Guide
Install SmartChart #
- Method 1: Install from Python package
pip install smartchart
# Upgrade:
pip install smartchart -U
Starting from v8.0, smartchart is fully AI-powered as smartAi. For upgrading from pre-v8.0 versions, run
smartchart makemigrationsbefore upgrading, then after upgrading runsmartchart makemigrations & smartchart migrate
- Method 2: Install from release package
V8.0 does not provide a pip package yet. Contact customer service if needed.
You can also get the release version from our WeChat public account. Download the corresponding whl package. Note to modify the filename when installing.
pip3 install smartchart-xxx-py3-none-any.whl
# If the file is not in the current directory, use the full path:
pip3 install D:/smartchart-xxx-py3-none-any.whl
# If download is slow, use a mirror:
pip3 install -i https://mirrors.aliyun.com/pypi/simple smartchart-xxx-py3-none-any.whl
# Upgrade:
# Go to the "Dev Management" icon in the top right of the homepage, upload the installation package. Note that a restart may be required.
V8.0+ no longer includes a built-in database. You need to install and initialize it yourself.
# Create database and initialize
smartchart makemigrations
smartchart migrate
# Create superuser
smartchart createsuperuser
Start SmartChart #
# Local test start:
smartchart
# Server test start:
smartchart runserver 0.0.0.0:8000 --insecure --noreload
# If the port is occupied, use a different port:
smartchart runserver 0.0.0.0:8001 --insecure --noreload
# Linux background start
nohup smartchart runserver 0.0.0.0:8000 --insecure --noreload &
- After local startup, visit: http://127.0.0.1:8000
- Admin account: admin / Password: admin or your created admin account
# If you forgot the password, use this command to reset:
smartchart changepassword username
Important: For V8.0, after opening the homepage, go to the avatar icon in the top right corner → “Product Authentication” → “Activate Advanced Features” → “Component Upgrade” to initialize components.
Enter Homepage #
- Try to familiarize yourself with the edit menu and interface
The left menu shows dynamic project names that change as your reports grow.
Dashboard Menu #
Development Workflow Overview: New Dashboard → Add Chart Component → Edit Dataset → Edit Chart (Configure ECharts/HTML) → Layout Drag & Drop → Preview/Publish
| Feature | Sub-Item | Description |
|---|---|---|
| Menu Bar | - | Click to expand/collapse, can be moved |
| Settings | General | Permission management, watermark… |
| Dashboard Settings | Enable template/mobile adaptation/VUE/encryption/scene background… | |
| Chart Style | Switch chart styles | |
| Batch Layout | Batch modify container HTML, rarely used | |
| Container Management | Batch view/manage/delete containers, rarely used | |
| Template | CRUD template, EXCEL, publish | |
| Template | - | Enter low-code development, import JS/CSS, upload, components… |
| Add | Drag Chart | Add a chart component with drag container |
| Grid Chart | Add a chart component with grid container | |
| Published Dataset | Add a developed dataset (must be published) | |
| Lazy Dataset | After adding, can be viewed/edited in the menu bar. This dataset requires custom trigger queries. Default global variable named data + index, e.g. data0 | |
| General Dataset | After adding, can be viewed/edited in the menu bar. Actively triggers queries. Global variable named data + index, e.g. data0 | |
| Static Component | Add an HTML component without dataset or chart, e.g. image, text… | |
| Drag Toggle | - | Toggle drag lock. For editing EXCEL chart components, usually needs to be locked |
| Popup Toggle | - | Toggle editor between embedded mode and new page |
| Custom Theme | - | Modify ECharts theme, only for current dashboard |
| Debug Toggle | - | Toggle debug log display, enable grid guide and precise drag positioning |
| Preview | - | Switch preview mode in development mode |
| Dataset | - | Menu bar shows inactive/general/lazy datasets |
Dashboard Container Menu #
| Feature | Sub-Item | Description |
|---|---|---|
| Index | - | Unique container ID. Can be selected via #container_index. E.g. CSS: #container_0{}, JS: $(’#container_0’).xx |
| Dataset Dev | - | Open dataset development interface. Switch data source, scheduled refresh, data development… |
| Chart Dev | - | Open chart development interface. Real-time chart configuration, switch built-in/custom charts, chart store… |
| Container Dev | - | Open container development interface. Grid layout adjustment. Drag mode not commonly used… |
| Hide Container | - | Switch container to inactive state. For permanent deletion… |
Settings #
| Feature | Sub-Item | Description |
|---|---|---|
| Template Toggle | - | Enable template development. Auto-enabled after adding drag chart |
| Mobile Adaptation | - | Non-fixed aspect ratio mode. Recommended for non-large-screen scenarios |
| Fixed Height | - | Fixed drag height. Recommended when using Element components |
| VUE | - | Enable VUE development mode |
| Chart Encryption | - | Encrypt the JS in your charts |
| Dataset Mode | - | Only for viewing and managing datasets |
Dataset Development #
| Feature | Sub-Item | Description |
|---|---|---|
| Title | Rename | Modify dataset name |
| Linkage Settings | Chart linkage configuration | |
| Permission Settings | Dataset permission management | |
| Data Source | - | Click to show default database table list |
| Switch Source | Switch data source | |
| Edit Source | Edit current data source configuration | |
| Add Source | Add new data source | |
| Refresh Settings | Set backend cache and frontend refresh interval | |
| Database List | Get all databases for current data source | |
| Table List | Without selecting a database, get default database tables. Select a database name to get its tables | |
| Table Structure | Select a table to get field descriptions | |
| Create Table SQL | Select a table to get its CREATE TABLE statement | |
| Sample Data | Select a table to get sample data | |
| Row Count | Select a table to get total row count. Can also select a query to get count | |
| Tools | Code Fold | Fold selected code |
| Code Expand | Expand selected code | |
| Code Format | Format selected code | |
| Mock Parameters | Input parameter values for debugging | |
| Get Execution Script | Get actual script for parameter debugging | |
| AI | - | AI development and agent development |
| GPT | - | AI Q&A development |
| Execute | - | Execute preview dataset, or select a script segment to execute |
| Save Dataset | - | Save and refresh dataset backend cache |
| Editor Settings | - | Set editor theme etc. |
Chart Development #
| Feature | Sub-Item | Description |
|---|---|---|
| Real-time Debug | - | Enabled by default. Shows chart in real-time after config changes. Recommended to disable for large data |
| Color Palette | - | Color selection. Copy color code to config |
| Charts | Basic Charts | Built-in basic charts: bar/line/scatter/pie/Chinese-style report/3D model… Can derive various charts through configuration |
| Personal Charts | Save personal modified or converted charts for reuse | |
| Save Data | Upload default data used during chart development | |
| ECharts Community | Reference ECharts official examples. Copy, paste, and convert to use | |
| Reference | - | Common ECharts config menu. Copy and paste to use |
| Tools | Convert | Convert native ECharts to SmartChart |
| Code | Code fold/expand etc. |
Template Development #
| Feature | Sub-Item | Description |
|---|---|---|
| Charts | - | For static template conversion or complex layout scenarios. Normally recommend adding from dashboard interface |
| Container | Drag | Select component code segment, add drag container code |
| Grid | Select component code segment, add grid container code | |
| DATAV Border | Select component code segment, add DATAV border container code | |
| Edit | Dataset | Select code segment with div_list.xx, open dataset editor. Shortcut: CTRL+Q |
| Chart | Select code segment with chart, open chart editor | |
| Container | Select code segment with chart, open container editor | |
| Style | - | Common HTML component styles: background color, font… |
| Components | - | Common HTML components: image, button, carousel… |
| UI Components | - | Common ElementUI components. Refer to docs for usage |
| Resources | - | Less common resources: word cloud, map… |
| Tools | - | Code fold, alignment conversion, snapshot, file upload, dataset batch authorization… |
| Editor Settings | - | Set editor theme etc. |