https://help.smartchart.cn/en/ Recent content in Introduction on Smartchart开发手册 Hugo -- gohugo.io https://help.smartchart.cn/en/docs/10.Misc/FAQ/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/10.Misc/FAQ/ Introduction # This document summarizes common questions and answers (FAQ) for SmartChart, covering installation, dependencies, datasets, and chart configuration issues. Quick Category Reference # Category Topics Installation Port conflicts, command not found, password reset Dependencies urllib3 version conflicts Datasets Data not updating, parameter linkage failures Graphics Blank/not displaying charts FAQ # Installation # Q: Error “An attempt was made to access a socket in a way forbidden by its access permissions” https://help.smartchart.cn/en/docs/10.Misc/OAUserManual/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/10.Misc/OAUserManual/ OA Approval System — User Manual # Applicable version: SmartChart OA Module Last updated: 2026-04-26 1. System Overview # The OA Approval System is a lightweight workflow approval tool for: Employees initiating approvals (leave, reimbursement, procurement, etc.) Auto-routing to designated approvers per predefined workflows Approvers processing online (approve, reject, transfer, etc.) Admin backend for workflow and organization management The system supports multi-tenancy — different tenants (companies/departments) have fully isolated data. https://help.smartchart.cn/en/docs/11.Deployment/Embedding/SimpleEmbed/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/Embedding/SimpleEmbed/ Introduction # SmartChart supports embedding dashboards into any third-party system via iframe. For public reports that don’t need access control, simply set the dashboard to “Public” and reference it with an iframe. For scenarios requiring authentication, refer to the “Single Page Embed” documentation for token-based encryption. You may need to embed SmartChart-generated charts into other systems. Every SmartChart dashboard has a URL: http://localhost:8000/echart?type=dashboardName e.g.: http://localhost:8000/echart?type=demo SmartChart has permission management by default. https://help.smartchart.cn/en/docs/11.Deployment/Linux/ProductionDeploy/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/Linux/ProductionDeploy/ Introduction # This document describes the complete production deployment architecture for SmartChart, including the standard Python + uWSGI + Nginx stack. Production deployment requires consideration of performance, security, and stability. Production Architecture # User Request → Nginx(80/443) → uWSGI → Django(SmartChart) ↓ Static Files (Nginx direct) ↓ Database (MySQL/PostgreSQL) Component Description # Component Purpose Port Nginx Reverse proxy, static file serving, SSL termination 80/443 uWSGI WSGI application server Unix Socket Django SmartChart application - MySQL/PostgreSQL Production database 3306/5432 Professional edition provides enterprise production deployment and offline deployment solutions. https://help.smartchart.cn/en/docs/11.Deployment/Linux/QuickStart/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/Linux/QuickStart/ Introduction # This document covers the complete process of manually deploying SmartChart on a Linux server (CentOS 7 example), including Python installation, virtual environment setup, and project deployment. For production environments, refer to the Production Deployment Guide. Environment Requirements # Component Min Version Recommended CentOS 7.x 7.x / 8.x Python 3.8+ 3.9.x Memory 2GB 4GB+ Directory Layout # /data/smartchart/ # Project main directory /data/smartchart/tools/ # Tools directory /data/smartchart/myvenv/ # Python virtual environment Base Environment and Versions # CentOS 7 Python 3. https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/CustomHomepage/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/CustomHomepage/ Introduction # SmartChart supports customizing the platform homepage — including Logo, title, default LLM, homepage redirect report, and UI theme — via the SMC config section in Service Configuration. You can even configure different personalized homepage styles for different users or user groups, enabling a fully branded data portal deployment. Use Cases # Direct users to a specific report when opening the homepage Customize a user-friendly homepage display Usage # Go to avatar (top-right) → Service Configuration { "SMC": { "logo": "http://. https://help.smartchart.cn/en/docs/12.DataPlatform/DataAssets/DataPortal/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/DataAssets/DataPortal/ MagicCube Data Portal — Product Guide # Audience: Data analysts, business users, data administrators | Updated: August 2026 Table of Contents # Product Overview What Can I Do System Entry & Roles User Portal Guide Admin Portal Guide FAQ Glossary 1. Product Overview # MagicCube Data Portal is a unified data asset management and self-service data query platform. It centralizes scattered data tables, reports, metrics, and API interfaces across the enterprise, enabling business users to easily find data, understand data, and use data. https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/BasicOps/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/BasicOps/ Introduction # SmartPip provides a visual DAG task configuration interface, supporting drag-and-drop task orchestration, Cron scheduling, task dependency management, and more. Core Concepts # Concept Description DAG Directed Acyclic Graph, defines task dependencies JOB Task node, executes specific driver tasks Cron Schedule expression, defines task execution time Trigger Trigger rules, controls when tasks execute Configuration # In Data Platform → Task Schedule, create a new DAG task, save Click “Edit” on the left of the task list to enter the development interface Click the driver menu Double-click the first column of a configuration row to open detailed settings Cron Expression Guide # Cron expressions consist of 6-7 fields separated by spaces: https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/Components/ConnectAPIData/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/Components/ConnectAPIData/ Introduction # SmartPip supports ingesting third-party data via API. Define a standard function and call it in the DAG using the apistarrocks driver. This is suitable for scenarios requiring data from external systems. Setup Flow # Step Action 1 Define _get_api_data(param) function 2 Configure ##apiConn=function_name in API settings 3 Use apistarrocks driver in DAG Define the Standard Function # # Assuming API returns: {'data': [{'a':1, 'b':2}, ...]} def _get_api_data(param): import json, requests param = json. https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/Components/DataXExtract/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/Components/DataXExtract/ Introduction # DataX incremental extraction achieves fine-grained data synchronization using max ID or time conditions from the target database. This is suitable for scenarios requiring incremental sync rather than full overwrite. Incremental Methods # Method Use Case Complexity Standard Single-table incremental Low Dataset Complex conditions Medium Custom Dynamic logic High Usage # Standard Method # Add to DataX sync config: ##incColumn = incremental_field ##incDB = target_query_DB [default: starrocks] Dataset Method # Create a query SQL in SmartChart datasets, e. https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/CustomTasks/CommonFunctions/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/CustomTasks/CommonFunctions/ Introduction # SmartPip provides rich built-in functions supporting file upload, data retrieval, email sending, shell execution, SQL execution, Kettle tasks, and more. Call custom functions via the #diy driver for flexible task logic. Built-in Functions Quick Reference # Function Description Notes File upload smart_upload(csvfilepath) Get data get_dataset(id, param={}) Send email dash_mail(title, content, maillist) Execute shell run_bash(cmdStr) Execute datax run_datax('DAG_name/task_name', para_dict) Execute SQL run_sql_file('DAG_name/task_name', db_connect='starrocks', para_dict=None) Execute Kettle run_kettle('DAG_name/task_name.ktr', para_str='') Execute SP run_sp(sp_name, sp_para=None, dev='', db_connect='oracle') Note: https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/SecondaryDev/CallPlatformAPI/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/SecondaryDev/CallPlatformAPI/ Introduction # SmartPip is built on Apache Airflow and supports all Airflow REST API endpoints. Through SmartChart’s API service, you can more conveniently call task scheduling APIs for automated triggering, status queries, and more. Prerequisites # Step Description 1 Create a Python dataset in SmartChart 2 Import get_auth_hearder() for authentication 3 Call SmartPip API endpoints Example: Trigger a DAG # Create a Python dataset in SmartChart Write the following code: from etl. https://help.smartchart.cn/en/docs/2.Datasets/DatasetEditor/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/DatasetEditor/ Introduction # The dataset development interface is SmartChart’s core data preparation entry point, providing visual dataset creation, SQL editing, data source configuration, and resource upload capabilities. Watch the video before starting to understand the basic workflow. Feature Description New Dataset Click “Dataset” in the dashboard index menu SQL Editor Supports multi-segment queries, semicolons separate datasets Resource Upload Upload JAR/CSS/JS resources in template editor Watch the video before development to understand the basics. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/APIDataset/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/APIDataset/ Introduction # API datasets allow SmartChart to directly send HTTP requests to external interfaces and obtain JSON data as dataset content. Write a dataset = {...} object in the dataset editor to describe the request method, URL, and parameters. Supports GET/POST and parameter linkage. API Requirements # The interface must return JSON format Data Source Configuration # You can choose any data connection Usage # Simple GET and POST examples: https://help.smartchart.cn/en/docs/3.Graphics/BasicGraphics/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/BasicGraphics/ Quick Apply Basic Graphic Components # SmartChart includes a rich set of basic graphic components with one-click application and quick customization. Select “Graphics” → “Basic Graphics” from the top menu, click any graphic to apply it to the current chart Find more community-contributed SmartChart graphic templates in the Graphics Store Built-in basic graphics cover common types (bar, line, pie, etc.); simple configuration modifications can derive stacked charts, area charts, dual-axis charts, and other variants Understanding ECharts Core Concepts # SmartChart’s graphic configuration is entirely based on ECharts option. https://help.smartchart.cn/en/docs/4.Layout/LayoutGuide/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/LayoutGuide/ Introduction # SmartChart provides two layout methods: drag-and-drop layout (absolute positioning, for large screens) and grid layout (responsive, for reports/mobile), which can be mixed. Understanding container hierarchy and selector naming is key to mastering layout. Recommended video: SmartChart Layout Container Overview # Container Description Positioning Container Used for chart positioning, available in drag and grid modes. Auto-generated when adding from UI; manually added in template editing Chart Container Used for chart selection via ID selector, e. https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/TemplateDevInterface/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/TemplateDevInterface/ Low-Code Development # SmartChart’s standard template has some constraints for referencing JS, writing CSS, etc. But sometimes you may need more freedom to customize freely. You might even want to reference other UI components, so SmartChart provides a pure development space. How to Enable # Enable template in Advanced Settings A “Template” menu will appear in the main menu Enter the template editing interface https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/UsingVUE/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/UsingVUE/ Introduction # SmartChart has built-in Vue 2.x support, allowing Vue data binding, directives, and component capabilities in chart editors and templates. Compared to plain JS, Vue mode is better for scenarios with heavy dynamic interactions (filters, tables, conditional display). Note: SmartChart’s Vue templates use {[ ]} instead of standard Vue {{ }} to avoid Django template syntax conflicts. Use Cases # Reports with many interaction scenarios, need data-page binding Developers familiar with Vue Common Bindings # <! https://help.smartchart.cn/en/docs/5.Parameters/ParameterWriting/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/5.Parameters/ParameterWriting/ Introduction # SmartChart’s parameter mechanism is the core of chart linkage, filters, and data permissions. By embedding “magic comment” syntax in SQL, you can dynamically control query conditions without modifying SQL structure. Use Cases # Chart linkage effects Data service API development Row-level data permission control Magic Syntax Quick Reference # Syntax Description Example $param_name Parameter placeholder $city → replaced with passed value /* ... $param_name ... */ Conditional code block Active when param exists, ignored when not -- Line ignore marker Ignores entire line after $param__value Value match switch $type__1 means active when type=1 Basic Principles # 1. https://help.smartchart.cn/en/docs/6.DataServices/DataServiceSettings/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/6.DataServices/DataServiceSettings/ Introduction # SmartChart datasets can be exposed as independent API microservices. By configuring user whitelists and tokens, external systems can query SmartChart dataset data via GET/POST requests. This makes SmartChart not just a visualization platform, but a lightweight data API gateway. Permission Settings # Account Access # Super admin can find “Service Configuration” in the user icon dropdown menu Configure API users (must exist in user settings): { "test": { "token": "smartchart" }, "test2": { "token": "smartchartxxx", "host": ["10. https://help.smartchart.cn/en/docs/7.AIApplications/AISmartDev/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/AISmartDev/ Introduction # SmartChart deeply integrates AI into all major development interfaces: dataset development, chart configuration, and template development. You can describe requirements in natural language, and AI directly generates SQL, ECharts configurations, or HTML code, greatly improving development efficiency. Use Cases # Generate SQL queries with natural language Generate ECharts chart configurations from descriptions Intelligent Q&A style data analysis Prerequisites # AI development features depend on a model data source named smtgpt. https://help.smartchart.cn/en/docs/8.DjangoApps/EmbedDjangoApps/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/8.DjangoApps/EmbedDjangoApps/ Introduction # SmartChart can be embedded as a Django App plugin into your existing Django project, sharing the same user system and database without independent deployment. Suitable for teams with existing Django systems to quickly integrate visualization capabilities. Related Video Use Cases # Use SmartChart directly as an application plugin in your Django project Integrate with existing Django user system Usage # Follow these steps to integrate SmartChart into your Django project: https://help.smartchart.cn/en/docs/8.DjangoApps/Jupyter/JupyterUsage/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/8.DjangoApps/Jupyter/JupyterUsage/ Introduction # SmartChart provides a lightweight Python client that lets you use SmartChart’s visualization capabilities in Jupyter Notebook. With just two core commands (get / set), you can render ECharts in notebooks and persist visualization results directly to SmartChart dashboards. Use Cases # Fetch data from SmartChart shared datasets for analysis in Jupyter Lots of offline data needing personalized analysis and dashboard creation Need quick chart generation during Jupyter data analysis Dashboard datasets requiring complex analysis SmartChart supports usage in Jupyter like pyecharts, Matplotlib, etc. https://help.smartchart.cn/en/docs/9.CRUD/CRUDCommonDev/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDCommonDev/ Introduction # This document is a complete development guide for the SmartChart CRUD template, covering table creation, dataset configuration, conditional queries, option cascading, Excel import, master-detail writing, and backend pagination. All features are driven by the configuration panel — no form code required. Core Concept Description Dataset #0 Query display (SELECT) Dataset #1 Write operation (INSERT/UPDATE) Configuration Panel All CRUD features are controlled via the config panel Table Creation # MySQL is recommended as the target database (thoroughly tested, supports UI-based table creation). https://help.smartchart.cn/en/docs/About/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/About/ Introduction # SmartChart is a full-ecosystem data application management platform dedicated to solving the problems of difficult, expensive, and slow-to-produce-results data platform adoption in traditional enterprises. Based on agile development principles, the platform supports full-chain management from data collection to data application. Product Architecture # ┌─────────────────────────────────────────────────────────┐ │ Data Service Layer │ │ API │ Self-Service Query │ Data Subscription │ Smart BI │ ├─────────────────────────────────────────────────────────┤ │ Application Layer │ │ SmartChart Visualization │ SmartPip Governance │ Forms │ ├─────────────────────────────────────────────────────────┤ │ Platform Layer │ │ Stream/Batch Processing │ Data Dev │ Multi-System │ └─────────────────────────────────────────────────────────┘ Core Modules # Module Description SmartChart Low-code visual analytics platform SmartPip Data governance platform Data Services API, self-service query, data subscription, smart assistant Our Goal # To build a full-ecosystem data management platform, solving the problems of difficult, expensive, and slow-to-produce-results data platform adoption. https://help.smartchart.cn/en/docs/1.Basics/ProEdition/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/ProEdition/ Introduction # This article explains the feature differences between SmartChart Free and Pro editions, activation methods, and licensing. It helps users choose the right edition and understand value-added services and commercial licensing requirements. Copyright Notice # To sustain project maintenance and stability, based on community voting, we now differentiate between Free and Pro editions The Free edition requires no activation and includes commonly used features, with ongoing updates For commercial use, you must register the user and notify the author for authorization Free edition users must retain SmartChart copyright notices and logos. https://help.smartchart.cn/en/docs/11.Deployment/Linux/SQLite3Error/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/Linux/SQLite3Error/ Introduction # On some operating systems (e.g., CentOS 7), running SmartChart with SQLite3 may encounter version incompatibility errors. This is because the system’s built-in SQLite3 version is too low — Django requires SQLite 3.8.3 or later. Error Message # django.core.exceptions.ImproperlyConfigured: SQLite 3.8.3 or later is required (found 3.7.17). Solution Comparison # Solution Difficulty Use Case Recommended Upgrade system SQLite3 Medium General Good Use pysqlite3 replacement Simple Quick fix Best Solution 1: Upgrade System SQLite3 # From StackOverflow: https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/DingTalkSSO/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/DingTalkSSO/ Introduction # DingTalk Single Sign-On (SSO) allows enterprise users to log in to SmartChart using their DingTalk accounts. Identity authentication is implemented via the OAuth2.0 protocol. After creating an app on the DingTalk open platform, configure the callback URL to complete integration. How It Works # User clicks DingTalk login → redirected to DingTalk authorization page User authorizes → DingTalk calls back with code to the platform Platform exchanges code for user info → creates/verifies local session DingTalk Developer Platform Setup # In the developer console, select Enterprise Internal Development, then create an app Click Permission Management and add API call permissions per the configuration below Select scope: All employees Under Personal Permissions, apply for personal phone info and contacts read permissions Set the callback domain under DingTalk Login & Sharing: e. https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/SSO/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/SSO/ Introduction # SmartChart’s Single Sign-On (SSO) allows users from third-party systems to log in directly to the SmartChart platform using an encrypted token — no username/password required. The token uses SHA1 algorithm based on a secret key, timestamp, and username, effectively preventing forgery. Unlike single-page embedding, SSO login grants access to the entire platform, not just specific reports. SSO Integration # '/echart/smart_login?id=xxx&stamp=xxx&token=xxx&url=https://help.smartchart.cn/' Parameters: id: Username (managed in SmartChart platform) stamp: Timestamp (milliseconds since Jan 1, 1970) token: SHA1 encrypted, token = SHA1(link_key + stamp + id) Set environment variable SMART_KEY = link_key on the SmartChart server url: Redirect URL after successful login Python Example # import time import hashlib import os SMART_CHART_URL = 'http://127. https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/WeComSSO/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/WeComSSO/ Introduction # WeCom (Enterprise WeChat) Single Sign-On (SSO) allows enterprise members to log in to SmartChart using their WeCom accounts. This provides unified identity authentication for cross-system access in enterprise deployment scenarios. Comparison with DingTalk SSO # Feature DingTalk SSO WeCom SSO Callback domain https://login.dingtalk.com https://login.work.weixin.qq.com Login endpoint _dingding _qiwei Config prefix _DD _QW Auth method OAuth2.0 OAuth2.0 WeCom Developer Platform Setup # Configure in the WeCom admin console Upload the downloaded txt authentication file under App Management Add to Service Configuration # { "_QW": { "CORPID": "wwxxxxxxxxxxx", "CORPSECRET": "xxxxxxxxxx" }, "_qiwei": "https://login. https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/Components/FlinkCDCSync/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/Components/FlinkCDCSync/ Introduction # FlinkCDC (Change Data Capture) is SmartPip’s real-time data sync solution, supporting database change capture, auto table creation, and schema change detection. Configure the flinkcdc driver to achieve real-time sync from source to target database. FlinkCDC Features # Feature Description Auto table creation Automatically creates tables matching source schema Schema change detection Automatically detects and syncs source table structure changes Full database sync Sync an entire database in one task Batch routing Custom table name mapping and transformation rules Sync Task Notes # Fully automatic table creation with schema change detection Supports full database sync — one task per data source is recommended After starting, scheduled tasks automatically monitor To modify a task, cancel it in Flink Web UI first, then resubmit Simple Full Database Sync # Source database training auto-creates matching database and tables in target: https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/DAGConfig/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/DAGConfig/ Introduction # DAG (Directed Acyclic Graph) is the core concept of SmartPip, used for defining task orchestration in data pipelines. Through DAG configuration, you can flexibly define execution order, dependencies, and trigger rules between tasks. DAG Syntax Quick Reference # # Task definition #driver_name task_name params --comment # DAG separator (4+ slashes) //// # Dependencies taskA >> taskB >> taskC # Serial dependency [taskA, taskB] >> taskC # Parallel dependency Custom Parameters # -- Current time report_time = datetime. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/PythonDataset/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/PythonDataset/ Introduction # Python datasets (also called “universal datasets”) allow writing Python code directly in the dataset editor, breaking through SQL query limitations. Enables: cross-data-source joins, Excel reading/processing, API data fetching and storage, calling LLM APIs, and other complex scenarios. The result must be assigned to the ds variable. Python datasets require a super admin to create a Python connector. Dataset developers can use it directly. Built-in Functions # Function Description ds_sql(conn_name, sql) Get dataset via connection name and SQL ds_df(ds) Convert ds dataset to Pandas DataFrame ds_list(df) Convert DataFrame back to ds dataset ds_save(config, content, update=0) Write data to database ds_gpt(conn_name, prompt, . https://help.smartchart.cn/en/docs/3.Graphics/ManageGraphics/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/ManageGraphics/ Introduction # The custom component management feature allows you to save developed graphics as local samples for quick reuse across multiple dashboards. No need to reconfigure SQL and JS code — simply call from the sample library. Ideal for accumulating and sharing standardized graphic components across teams. Operation Description Add Sample Save current graphic configuration to local sample list Remove Sample Remove a selected sample from the list Reuse Sample Call from the sample library with one click when creating new graphics Use Cases # During graphics development, when you complete a graphic’s configuration and logic, you can save it as a custom component for quick reuse in other dashboards, avoiding repetitive development. https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/JQueryTraversal/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/JQueryTraversal/ Introduction # jQuery DOM traversal methods are used in HTML components to find and manipulate parent, child, and sibling relationships of HTML elements, or filter element collections matching specific criteria. In SmartChart HTML component development, they are commonly used to get form values, bind events, and dynamically modify styles. Category Common Methods Upward Traversal .parent() / .parents() / .parentsUntil() Downward Traversal .children() / .find() Horizontal Traversal .siblings() / .next() / . https://help.smartchart.cn/en/docs/4.Layout/DragAutoAlign/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/DragAutoAlign/ Introduction # SmartChart’s drag layout is flexible, but precise alignment often requires multiple adjustments. This document covers grid assistance and auto-alignment features for pixel-perfect alignment. Alignment Tools # Tool Description Usage Grid Assist Shows 1rem grid Click toolbar info icon Auto Align Code-level coordinate organization Template -> Transform -> Drag Align Usage # Grid Assistance # Click the info icon in the dashboard toolbar to toggle grid display Each grid cell is 1rem Auto Alignment # Find this feature in “Template” -> “Transform” https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/QuickDev/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/QuickDev/ 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. https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/TemplatePublish/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/TemplatePublish/ Introduction # SmartChart supports separating development and production templates, isolating dev and production environments. When you debug in the dev template, production users always see the last published stable version. Only when you click “Publish” does the new version go live. Use Cases # Separate development and production templates Publishing # By default, dev and production templates are identical. To separate them: Template Development -> Tools -> Publish Unpublishing # To remove the production template, clear the template content, then click Publish https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/ElementUI/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/ElementUI/ Introduction # ElementUI is a Vue 2.x enterprise UI component library with built-in SmartChart support. By switching to basevue.html template, you can use el-table, el-form, el-select and other rich UI components directly in reports, ideal for management report pages with complex interaction needs. Use Cases # Non-large-screen applications Reports with many interactions: filters, tables, pagination, downloads Usage # Change base.html to basevue.html to auto-load Vue and ElementUI Note: Vue variable references in template editor use {[ ]} syntax https://help.smartchart.cn/en/docs/5.Parameters/ChartLinkageDrill/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/5.Parameters/ChartLinkageDrill/ Introduction # Chart linkage is the most common interactive feature in SmartChart: click one chart to auto-refresh others. Implemented via dataset “linkage settings” or by calling ds_setParam + ds_refresh in chart code. Linkage Functions Quick Reference # Function Description ds_setParam('param_name', value) Set parameter value ds_refresh(index) Refresh specified dataset ds_param('param_name') Get passed parameter value del filter_param['param_name'] Delete parameter (cancel linkage) Dataset Preparation # Write SQL in linked datasets using parameter syntax (see “Parameter Writing”): select . https://help.smartchart.cn/en/docs/6.DataServices/DataServiceAPI/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/6.DataServices/DataServiceAPI/ Encrypted API Request (Recommended) # “secret_key” is the admin’s “token” in API service settings Content-Type: application/x-www-form-urlencoded GET Request # /echart/dataset_api/?visitor=xxx&token=xxx&type=xxx&stamp=xxxxx&param={"xx":"xxx"} Parameters: visitor: username type: dataset ID stamp: timestamp (milliseconds since 1970) token: SHA1(secret_key + stamp + visitor + type) param: query parameters (optional), JSON string Response: { "data": [[]], "result": "success", "maxpg": 1, "pg": 1 } data: 2D array, first row is header result: success or error maxpg/pg: Fixed at 1 for GET (no pagination) POST Request # For backend scheduled data sync. https://help.smartchart.cn/en/docs/7.AIApplications/AgentDev/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/AgentDev/ Introduction # SmartChart Agents are built on large models + tool calling mechanisms. Agents identify user intent and automatically decide which tool to invoke (SQL queries, data writes, other agents, etc.), enabling complex conversational business processes like work reporting, data entry, and approvals. Use Cases # Agent applications Agent Core Mechanism # SmartChart agents implement tool routing via the following conventions: Return Format Meaning {"tool":"local","sql":"..."} Execute local SQL query {"tool":"agent_name","msg":". https://help.smartchart.cn/en/docs/8.DjangoApps/FAQ/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/8.DjangoApps/FAQ/ Introduction # This section covers common questions when embedding SmartChart as a Django App, including static resource collection and Debug mode configuration. Common Issues # Problem Solution Resources not found after disabling Debug Configure STATIC_ROOT and run collectstatic FAQ # If you need to do frontend secondary development or can’t find resources after disabling debug mode, add to settings: STATIC_ROOT = os.path.join(BASE_DIR, "static") Run the following command to collect static files to the root directory: https://help.smartchart.cn/en/docs/9.CRUD/CRUDCoreConfig/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDCoreConfig/ SmartCRUD Usage Guide # A low-code CRUD framework built on the SmartChart platform — build data management interfaces quickly via a visual configuration panel. Table of Contents # Quick Start Architecture Dataset Binding (Data Management) Table Display Configuration Query & Filter Add & Edit Field Type Reference Model Management Advanced Features FAQ 1. Quick Start # 1.1 Open the Config Panel # Click the 「CRUD Config」 button at the bottom-right of the page. https://help.smartchart.cn/en/docs/DesignPhilosophy/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/DesignPhilosophy/ Introduction # SmartChart’s design philosophy is based on real-world application scenarios, emphasizing agile development, data-driven approaches, and developer-friendliness. The platform does not pursue no-code; instead, it builds highways between data and graphics, allowing technical personnel to fully unleash their creativity. Core Concepts # Concept Description Agile Data Platform Designed based on real scenarios, proven in large enterprises Low-Code, Not No-Code Developer-friendly, preserving extensibility Minimalist Design Hides low-frequency features, reduces UI complexity Data Highway No custom dev language — connects data and graphics Progression-Style Experience Accumulate charts and templates for rapid reuse Design Philosophy # It is an agile data platform designed based on real-world scenarios, matured in multiple large enterprises over years. https://help.smartchart.cn/en/docs/1.Basics/QuickStart/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/QuickStart/ 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. https://help.smartchart.cn/en/docs/2.Datasets/SQLDataset/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SQLDataset/ Introduction # SQL datasets are the most widely used dataset type in SmartChart. Simply write SQL in the development interface. The system caches query results and intelligently converts them to chart-friendly format (2D array with headers). Overview # The most commonly used datasets are SQL datasets A standard dataset can be imagined as an Excel-like 2D table with rows and columns Just write SQL in the dataset development interface See “Special Data Sources” for more dataset types See “Parameters & Linkage” chapter for dynamic parameter datasets Dataset Output Format # SmartChart datasets are uniformly passed to the chart as 2D arrays with headers: https://help.smartchart.cn/en/docs/11.Deployment/Embedding/SinglePageEmbed/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/Embedding/SinglePageEmbed/ Introduction # Single-page embedding is the recommended method for embedding authenticated SmartChart reports into third-party systems. Using SHA1-encrypted tokens, external systems can generate one-time valid report URLs and embed them directly via iframe — no user login required. Compared to simple embedding, this method allows precise control over which users can access which reports, and supports data permission parameters. Embed a Report # Similar to SSO, but specifically for report embedding (requires SmartChart v5. https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/Components/MessageSend/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/Components/MessageSend/ Introduction # SmartPip supports sending email or WeCom (Enterprise WeChat) notifications within DAG tasks, supporting both fixed content and dynamic data. This is suitable for result notifications after task completion. Notification Methods # Method Driver Use Case Email #send_mail Formal reports, detailed data WeCom #diy + dataset Real-time alerts, short notifications Usage # Fixed Content # msg = ['Report refresh succeeded', '<h1>Refresh Successful!!</h1>'] maillist = 'xxx@smartchart.cn' #send_mail reportmail msg maillist Dynamic Data # maillist = 'xxx@smartchart. https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/CustomTasks/CustomLoopExtract/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/CustomTasks/CustomLoopExtract/ Introduction # When a database contains time-suffixed partitioned tables (e.g., order_202001, order_202002) that need to be consolidated into a single target table, use the custom loop extraction feature. Combine the #diy driver with run_datax() for flexible multi-table loop sync. Implementation Steps # Step Action 1 Create a DataX extraction task with parameter placeholders 2 Create a DIY task with loop logic 3 Orchestrate task dependencies in DAG Usage # SmartPip’s built-in datax component only supports single-table extraction without custom logic. https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/DAGExamples/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/DAGExamples/ Introduction # This chapter provides complete DAG configuration examples demonstrating task orchestration, dependencies, and scheduled execution in practice. Dependency Operators # Symbol Meaning Example >> Downstream dependency t1 >> t2 (t2 depends on t1) << Upstream dependency t2 << t1 (t2 depends on t1) [] Parallel execution [t1, t2] >> t3 Complete Sample # """Variable definitions (Python syntax, optional)""" P_DAYS = 12 MSG = 'xxxx' report_time = datetime.datetime.now() - datetime. https://help.smartchart.cn/en/docs/2.Datasets/DatasetForms/SharedDataset/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/DatasetForms/SharedDataset/ Introduction # Shared datasets (common datasets) allow one dataset’s query results to be used by multiple charts simultaneously, avoiding duplicate queries of the same data and significantly improving page loading performance. Suitable for scenarios where multiple charts show different perspectives of the same data source. Use Cases # Optimize queries by querying all data once in one dataset and distributing Reduce waste from duplicate queries, query same data only once Usage # In the dashboard development interface, “Add” -> “Shared Data” Configure in “Settings” -> “Advanced” -> “Advanced Settings” Charts 3 and 4 are mapped to the shared dataset (#2) data You can also use the global variable “data_index” in any JS. https://help.smartchart.cn/en/docs/2.Datasets/DatasetRefresh/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/DatasetRefresh/ Introduction # SmartChart provides a two-level data refresh mechanism: frontend scheduled refresh (browser periodically requests backend) and backend cache acceleration (database queried once, then cache hits). Proper configuration of both ensures data real-time performance while greatly reducing database pressure. Data Refresh Configuration # SmartChart provides fine-grained data refresh and memory acceleration features. You can configure in the dataset development interface menu: Connection icon -> Refresh Settings Scheduled Refresh # You can set the interval for the frontend to request data refresh from the backend, in seconds. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/RedisSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/RedisSource/ Introduction # SmartChart supports Redis as a data source, reading data directly by key name. Ideal for displaying real-time metrics computed by external systems (Spark, crawlers) and written to Redis. Supports JSON objects (dicts) and JSON 2D arrays (tables). Use Cases # Display data computed by external programs in real-time, such as Spark-computed data or crawler-scraped data, stored in Redis or NoSQL databases. Usage # Create a Redis connection pool, then create datasets normally. https://help.smartchart.cn/en/docs/3.Graphics/EchartsComponents/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/EchartsComponents/ Introduction # ECharts components are the core entry point for SmartChart graphic development. By copying the option configuration from ECharts official examples into the SmartChart graphic editor and converting it to platform-adapted code, you can achieve the complete graphic development workflow from static examples to dynamic data binding. Core Step Description View Example Copy option from ECharts official examples Convert Click “Tools → Convert to SmartChart” Dynamic Data Replace static data with __dataset__ + ds_createMap() Variable Convention Variable names with __name__ suffix to avoid DOM conflicts Use Cases # SmartChart provides a large collection of generic graphic templates available directly from the store. https://help.smartchart.cn/en/docs/4.Layout/DeleteContainer/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/DeleteContainer/ Introduction # For datasets no longer in use, SmartChart recommends hiding rather than deleting to retain reusability. Only perform deletion when cleanup is truly necessary. Operation Comparison # Operation Location Description Hide Dataset editor Recommended first choice, retains reuse Delete Report editor Click delete button then save Methods # SmartChart recommends not deleting datasets since you can keep them and reuse them when adding new datasets later. Hiding is the preferred method, accessible in the dataset editor. https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/UploadResources/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/UploadResources/ Introduction # SmartChart’s resource management allows uploading CSS, JS, images, fonts, and other static resources to the server, referenced via fixed paths in templates. Supports single file and ZIP batch upload, as well as custom data source files (Python) and JDBC JAR packages as drivers. Click the menu in Template Development to upload resource files like CSS, JS, images Video Tutorial Note: New versions upgraded “File Upload” to “Resource Management” https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/DataVApp/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/DataVApp/ Introduction # DataV is a Vue component library designed for large-screen digital visualization, providing flip cards, progress pools, number scrolling, flyline maps, and other common large-screen effect components. SmartChart has built-in DataV support in advanced settings. Enable DataV mode in Advanced Settings Reference videos: 1. DataV Basics 2. DataV Flip Card DataV documentation: Charts Common DataV Components # Component Tag Usage Flip Text <dv-flip-text> Number/text scroll display, ideal for KPI metrics Count To <dv-count-to> Number dynamic growth effect Percent Pond <dv-percent-pond> Percentage progress display Active Ring Chart <dv-active-ring-chart> Auto-rotating ring chart Water Level Pond <dv-water-level-pond> Water level percentage visualization Flyline Chart <dv-flyline-chart> Traffic flylines on map Border <dv-border-box-n> Digital screen decorative borders (n=1~13) Decoration <dv-decoration-n> Screen decoration lines (n=1~12) DataV mode must be enabled in Advanced Settings, system auto-loads corresponding JS/CSS DataV removed in v8. https://help.smartchart.cn/en/docs/5.Parameters/FilterGuide/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/5.Parameters/FilterGuide/ Introduction # Filters are the most common interactive components in dashboards. SmartChart auto-identifies filter components through special id naming convention (id_select__name__) and handles linkage logic. Implementation Flow # Step Operation Description 1 Create dataset Write SQL to get filter options 2 Edit JS Generate <select> control with id="id_select__name__" 3 Configure linkage Click title → set linked dataset index Standard Implementation # Create a filter list dataset: select xxxx as city from tablename. https://help.smartchart.cn/en/docs/6.DataServices/DataReceiveAPI/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/6.DataServices/DataReceiveAPI/ POST Request # url: /echart/dataset_api/ Content-Type: application/x-www-form-urlencoded Request parameter data # { "visitor": "xxx", "token": "xxx", "stamp": "xxxxx", "type": "xxx", "ds": [["A","B"],["a1","b1"],["a2","b2"]], "update": 0 } Parameter Description # visitor: username type: dataset ID stamp: timestamp (milliseconds since 1970) token: SHA1 encrypted, token=SHA1(secret_key + stamp + visitor + type) update: 0=insert, 1=update ds: 2D array or refer to data filling/update format “secret_key” is the admin’s “token” in API service settings https://help.smartchart.cn/en/docs/7.AIApplications/Agent/Bot/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/Agent/Bot/ Use Cases # Connect to DingTalk, WeCom, etc., work like openClaw but with self-control Introduction # SmartChart supports connecting agents to DingTalk, WeCom and other enterprise IM platforms as group bots providing intelligent services. When the bot receives messages, it calls SmartChart’s Python agent dataset logic, supporting tool calling (file viewing, data inquiry, record writing, etc.), using ds_tool() for multi-agent collaboration. Usage # Create dataset, type: Agent, connector: Python, name “sCraw” prompt = """$prompt""" system="""You are a professional digital assistant. https://help.smartchart.cn/en/docs/7.AIApplications/Agent/DocGeneration/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/Agent/DocGeneration/ Introduction # The document generation agent uses multi-step streaming processing to automatically generate complete Word documents (.docx) from natural language requirements. Core flow: 1) Use LLM to extract requirements and chapter structure -> 2) Generate content chapter by chapter via LLM -> 3) Save as Word document using ds_save_doc(). Supports streaming progress feedback. Use Cases # Operation documents, proposals, tender documents generation Usage # LLM connections are abstracted as data sources, see Basics -> First AI Scene https://help.smartchart.cn/en/docs/7.AIApplications/Agent/SmartQA/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/Agent/SmartQA/ Introduction # Smart Q&A is SmartChart’s Text-to-SQL implementation. Users ask questions in natural language, the system first uses a routing agent to determine which business table the question belongs to, then the askdata skill dataset auto-generates SQL and queries the database, finally presenting results visually. The entire flow is implemented through two datasets (routing agent + Q&A skill) without additional programming frameworks. Use Cases # Enter knowledge and data Q&A from homepage Usage # LLM connections are abstracted as data sources, see Basics -> First AI Scene https://help.smartchart.cn/en/docs/7.AIApplications/Agent/SmartTicket/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/Agent/SmartTicket/ Introduction # Smart ticket submission demonstrates the complete chain of “LLM + chart tool calling” in SmartChart: user uploads invoice image -> LLM recognizes and reviews content -> triggers tool call ({"tool":"VV_ReimbursementForm",...}) -> chart dataset renders reimbursement form. Datasets named with VV prefix are “Visualization Variant” datasets, specifically for rendering visual results - a SmartChart agent tool calling convention. Use Cases # Connecting LLM + data + charts + forms + reach Invoice review example Usage # Create LLM data source, using dashAI to call Alibaba DashScope dashAI supports qwen model, auto-switches to vl model for image uploads (default qwen-vl, changeable via {“vmodel”:“qwen-vl-max”}) https://help.smartchart.cn/en/docs/7.AIApplications/Agent/WebPageGeneration/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/Agent/WebPageGeneration/ Introduction # The web page generation agent provides SmartChart’s standard HTML template format to LLM, letting it directly generate visualization page code that runs in SmartChart. Ideal for rapid prototyping and users without frontend background. Generated code can be pasted directly into dashboard templates. Use Cases # SmartChart dashboard and web page development Usage # LLM connections are abstracted as data sources, see Basics -> First AI Scene Create dataset, type: Agent, connector: LLM data source, name “Web Page Generation” You can generate HTML based on the template format, filling CSS, HTML, JS in corresponding template areas. https://help.smartchart.cn/en/docs/9.CRUD/CRUDActions/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDActions/ Introduction # CRUD row actions display icon buttons on the right side of each table row. Clicking executes preset functions like viewing detail data, popping up graphics, or sending messages. Configure icon-to-dataset mappings in the config panel’s “View ds mapping” — the system automatically passes the entire row data to the dataset. Config Format Description icon:datasetID Click popup shows table or chart from dataset data icon:datasetID! Popup shows dataset’s table/chart icon:datasetID! https://help.smartchart.cn/en/docs/9.CRUD/CRUDCustom/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDCustom/ Introduction # CRUD customization enables highly personalized UI through template overrides, including custom column display (conditional styles, progress bars), multi-level headers, custom detail pages (drawer/dialog), custom validation rules, custom functions, and custom default values. Custom Area Block Template Custom Column body_table_column Multi-level Header body_table_columns Custom Detail Page dialog_card Custom Add Page dialog_modify Custom Indicator Card body_extHead Overriding Component Areas # Custom Column Display # Show “sales” column in red when value > 100: <! https://help.smartchart.cn/en/docs/1.Basics/FirstDashboard/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/FirstDashboard/ Introduction # This article walks through developing your first dashboard in SmartChart from scratch. Covers dashboard creation, dataset editing, chart binding, drag layout, and theme application. Due to version changes, some icons and interfaces may vary, but positions remain largely the same. Workflow Overview # New Dashboard → Add Chart Component (Drag/Grid) → Edit Dataset (SQL) → Edit Chart (ECharts Config) → Layout Adjustment → Apply Theme Create Dashboard # In development mode, navigate to “Dev Management” -> “Dashboards” -> “Add Dashboard” Fill in the information and click “Save” Click to enter dashboard development, click the right-side edit button Enter the development menu, click the SC icon in the bottom right, and add a drag component from the popup menu (Note: drag layout is a PRO feature) If you prefer the free version, use grid components instead. https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/CustomTasks/GetExecParams/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/12.DataPlatform/smartpip/CustomTasks/GetExecParams/ Introduction # SmartPip is built on Airflow and supports time-based task backfilling. Through built-in parameters like execution_date, you can obtain task execution time information for time-dimensional data processing. Common Time Parameters # Parameter Format Description ds YYYY-MM-DD Task execution date ds_nodash YYYYMMDD Date without separators yesterday_ds YYYY-MM-DD Yesterday’s date tomorrow_ds YYYY-MM-DD Tomorrow’s date prev_ds YYYY-MM-DD Previous execution date Usage # Airflow passes the following parameters to tasks: {'ds': '2022-07-13', 'ds_nodash': '20220713', 'execution_date': DateTime(2022, 7, 13, 2, 4, 33, 244294, tzinfo=Timezone('+00:00')), 'next_ds': '2022-07-13', 'tomorrow_ds': '2022-07-14', 'yesterday_ds': '2022-07-12', 'ts': '2022-07-13T02:04:33. https://help.smartchart.cn/en/docs/2.Datasets/DatasetForms/LazyLoading/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/DatasetForms/LazyLoading/ Introduction # Lazy-load datasets are on-demand triggered datasets. Unlike standard datasets that auto-query on page load, lazy-load datasets require frontend code to call ds_refresh() to trigger. Suitable for data download, multi-level drill-down, and user-interaction-triggered loading scenarios. Use Cases # Similar to frontend-backend development where the backend provides APIs but the frontend doesn’t need to query immediately on page load E.g., data download - only query when user needs to download E. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/DuckdbSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/DuckdbSource/ Introduction # SmartChart supports DuckDB as a data source. DuckDB is an in-process analytical database designed for fast OLAP queries. It supports reading CSV, Excel, Parquet files directly, and can query across multiple databases without data movement. Use Cases # Analytical queries on CSV/Excel/Parquet files without importing into a database Cross-database joins without ETL Fast aggregation queries on large datasets Usage # Create a DuckDB connection pool, then write SQL queries in the dataset editor. https://help.smartchart.cn/en/docs/3.Graphics/HTMLComponents/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/HTMLComponents/ Introduction # HTML components are the most flexible component type in SmartChart, suitable for implementing input controls (filters, buttons), display components (indicator cards, tables), and rich text content. Use dom__name__.innerHTML in JS code to render HTML, combined with datasets for dynamic content. Key Syntax Description dom__name__ Current graphic DOM container, __name__ auto-replaced with unique ID innerHTML Write HTML content to container ds_setParam() Set parameter to trigger linkage ds_refresh(n) Refresh graphic number n __dataset__ Standard 2D array from backend Use Cases # HTML components are the most flexible component type in SmartChart, suitable for: https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/BorderDecoration/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/BorderDecoration/ Video Tutorials # Border & Decoration 1 Border & Background 2 Borders/Decorations/Backgrounds (Pro edition required for usage) # https://help.smartchart.cn/en/docs/5.Parameters/ComponentCustomLinkage/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/5.Parameters/ComponentCustomLinkage/ Introduction # SmartChart has built-in single-select filters, but for multi-select, checkboxes, custom HTML controls and other personalized needs, you need to write some JS code. This chapter introduces how to customize complex filter linkage effects. Custom Linkage Development Pattern # Step Operation Code 1 Generate HTML control dom__name__.innerHTML = ... 2 Bind event $('#id_btn').unbind('click').click(...) 3 Get control value $('#input_id').val() 4 Set parameter ds_setParam('param_name', value) 5 Refresh dataset ds_refresh(index) Example # Create a new chart component, write query: https://help.smartchart.cn/en/docs/6.DataServices/DataDownload/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/6.DataServices/DataDownload/ Introduction # SmartChart provides ds_download() function to download dataset data as CSV or Excel files. Combined with button click events, enables flexible on-demand download of current query results (including filter conditions). Usage # ds_download(name, dataset, xls=0) // name: file name // dataset: 2D array or string // xls: 0=CSV (default), 1=Excel Example # Create a download button in template with a drag container: <div class="smtdrag" id="id_down1"> <button>Download Data</button> </div> Add click handler in any chart JS: $('#id_down1'). https://help.smartchart.cn/en/docs/7.AIApplications/AgentOrchestration/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/AgentOrchestration/ Introduction # Agent orchestration is SmartChart’s capability for handling multi-step, multi-tool collaboration in complex AI scenarios. Through Python datasets, you can chain multiple agents, LLM calls, database queries, and data writes like writing a script, implementing complete AI business processes. Use Cases # Connecting LLM + data + charts + forms + reach Complex logic flows needed Invoice review example Key Functions # Available in Python datasets: Data Read Functions # # Get dataset via connection name and SQL ds_sql(conn_name, sql) # Read any file or webpage ds_read(file_or_url, encoding="utf-8", clean=True, max_length=None, as_base64=False, selector='') # When selector is not empty (e. https://help.smartchart.cn/en/docs/9.CRUD/CRUDDataApproval/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDDataApproval/ Introduction # SmartChart CRUD supports complete workflow approval capabilities, including approval flow definitions (multi-node process configuration) and data change approval (insert/update/delete requires approval before taking effect). Approval flows are implemented through three system tables (flowinfo, flowinstances, flowtasks), while data approval uses the modify_request table to record changes. Approval Type Description Approval Flow Multi-node process definition for work orders, contracts, etc. Data Change Approval Insert/update data enters approval queue, takes effect only after approval Approval Flow # MySQL Table Creation # drop table if exists oa_flowinfo; CREATE TABLE oa_flowinfo( id int PRIMARY KEY auto_increment, tid smallint default 0 comment 'Tenant ID', uuid varchar(20), name varchar(50), description varchar(200), category varchar(50), flow TEXT, status varchar(20), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, updater varchar(50), UNIQUE uc(tid,name) ) comment 'Approval Flow Definition'; drop table if exists oa_flowinstances; CREATE TABLE oa_flowinstances( id int PRIMARY KEY auto_increment, tid smallint default 0 comment 'Tenant ID', uuid varchar(50), title varchar(100), remark varchar(500), formId varchar(50), variables varchar(500), definitionId varchar(50), applicant varchar(50), status varchar(50), currentNodeId varchar(50), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, updater varchar(50) ) comment 'Approval Instance'; drop table if exists oa_flowtasks; CREATE TABLE oa_flowtasks( id int PRIMARY KEY auto_increment, tid smallint default 0 comment 'Tenant ID', uuid varchar(50), instanceId varchar(50), nodeId varchar(50), nodeName varchar(50), assignee varchar(50), status varchar(50), instructions varchar(200), variables varchar(500), comment varchar(100), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, updater varchar(50) ) comment 'Approval Task'; SQLite Table Creation # DROP TABLE IF EXISTS oa_flowinfo; CREATE TABLE oa_flowinfo( id INTEGER PRIMARY KEY AUTOINCREMENT, tid INTEGER DEFAULT 0, uuid TEXT, name TEXT, description TEXT, category TEXT, flow TEXT, status TEXT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP, updater TEXT, UNIQUE(tid, name) ); -- Similar for oa_flowinstances and oa_flowtasks Import Approval Flow Page # Available in Professional edition — contact support. https://help.smartchart.cn/en/docs/1.Basics/FirstReport/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/FirstReport/ Introduction # “Complex Report” is SmartChart’s built-in Excel-like reporting feature that directly fills database query results into table cells while preserving table styles. Ideal for financial reports, statistical summaries, and other scenarios requiring detailed data display. Create Dashboard # In development mode, navigate to “Dev Management” -> “Dashboards” -> “Add Dashboard” Fill in the information and click “Save” Click to enter dashboard development, click the right-side edit button Create Excel Scene # Click the SC icon in the bottom right, then click the top-left Settings In Settings, select Excel template Dataset Editing # Open “Dataset” Enter the following SQL, click “Save & Refresh”, close the dataset editor select H1 as hero_name, sum(qty) as hero1_appearances from smartdemo2 group by H1 order by sum(qty) desc; select count(1) as total_appearances from smartdemo2 Multiple SQL statements separated by ; correspond to df0 and df1 datasets respectively https://help.smartchart.cn/en/docs/2.Datasets/ScheduledTasks/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/ScheduledTasks/ Introduction # SmartChart supports two scheduled task modes: Pro edition scheduled tasks (dataset-triggered, suitable for small to medium tasks) and Platform edition scheduled tasks (built-in full scheduling engine, suitable for complex ETL and enterprise scenarios). Scheduled tasks enable automated metric refresh, data extraction, message push, etc. Use Cases # Need scheduled metric refresh Data extraction ETL Scheduled message push triggers Pro Edition Scheduled Tasks # You can write tasks in datasets (SQL, Python, message notifications, etc. https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/UserRegistration/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/11.Deployment/LoginConfig/UserRegistration/ Introduction # SmartChart supports user self-registration with email activation. To enable registration, configure a mail data source and create a _mail dataset. The system automatically sends an activation link email when a user registers. Registered users have no dev permissions by default — admins must grant access manually. Configure Email Notification # Create an SMTP mail connector in Data Sources (see Datasets → Special Data Sources) Create a dataset named _mail: {"tolist":"$email","sub":"Registration Successful", "content":"<a href='http://xxx/echart/user_confirm/? https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/ElasticsearchSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/ElasticsearchSource/ Introduction # SmartChart supports Elasticsearch as a data source. Write ES query DSL (JSON format body) in the dataset editor to query ES index data for visualization. Supports match, term, terms, multi_match, bool, and other query types. Query Methods # Fuzzy Query (match) # body = { 'query': { 'match': { 'name': 'John' } }, 'size': 20 # Default 10, max 10000 } Exact Single Value (term) # body = { 'query': { 'term': { 'field1. https://help.smartchart.cn/en/docs/3.Graphics/ChartDataFunctions/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/ChartDataFunctions/ Use Cases # In graphic development, you may need to use JS to process the data passed from the backend. All functions can be called directly in the graphic’s JS code area. Data Convention: All examples use the following standard 2D array, where the first row is the header and subsequent rows are data: dataset = [['category', 'C1', 'C2'], ['R1', 12, 18], ['R2', 10, 17]] Dataset Transformation # ds_transform(dataset) # Row-column transpose: Swaps rows and columns of a 2D array (matrix transpose). https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/StyleQuickStart/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/StyleQuickStart/ Styling # Great dashboards need great CSS. This chapter covers CSS knowledge commonly used in SmartChart. CSS Quick Start Video Where to Write CSS in SmartChart # Location Syntax Scope Template <style> section #container_0 { ... } Current dashboard only Container editor Inline style attribute Current container only Inline style style="color:red" Current element only CSS Basics # CSS Introduction # CSS (Cascading Style Sheets) defines how HTML elements are displayed. https://help.smartchart.cn/en/docs/6.DataServices/DataFilling/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/6.DataServices/DataFilling/ Introduction # Data filling is SmartChart’s core mechanism for writing frontend user input to databases. Through ds_save(dataset_index, dataset), user form data, button-triggered data, and extracted cell data can be written to databases. After configuring the fill dataset, all write logic is controlled in frontend JS. Use Cases # Collect user input data Write processed data back to any system Build survey/questionnaire systems Analytics tracking Configuration # Create a lazy-load dataset with content: https://help.smartchart.cn/en/docs/9.CRUD/CRUDDragCombine/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDDragCombine/ Introduction # The CRUD drag-and-drop feature allows you to freely arrange CRUD components and other graphic components in the dashboard via drag-and-drop. Reuse CRUD’s query and filter configuration capabilities while combining with graphic visualizations for richer business page layouts. Feature Description Enable Drag Config panel → Table Display → Enable drag toggle Query Linkage Data Management → Query linkage, configure linked graphic IDs Row Linkage Data Management → Row linkage, trigger refresh on row click Use Cases # Implement drag-and-drop development with CRUD components and other graphic components Reuse CRUD component query and other configuration features Video reference: Drag Linkage https://help.smartchart.cn/en/docs/9.CRUD/CRUDTreeQuery/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDTreeQuery/ Introduction # The CRUD tree query area displays a hierarchical tree directory on the left side of the table. Clicking a leaf node automatically passes parameters to the table dataset, enabling data filtering by hierarchy. Suitable for organizational structures, product categories, regional dictionaries, and other parent-child hierarchy data query scenarios. Key Config Description Tree area dataset Query father/child parent-child relationship _label parameter Auto-passed on node click, value is the child value Custom tree Override body_tree template for custom styles and behavior Enable Tree Query Area # Create a lazy-load dataset, e. https://help.smartchart.cn/en/docs/1.Basics/First3DScene/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/First3DScene/ Introduction # SmartChart Pro supports embedding 3D model scenes in dashboards, loading OBJ, STL, GLTF format 3D model files, with ambient light adjustment, point light sources, rotation animation, and mouse interaction (click response, texture mapping, etc.). Suitable for factory digital twins, equipment display, and other 3D visualization scenarios. Create Dashboard # In development mode, navigate to “Dev Management” -> “Dashboards” -> “Add Dashboard” Fill in the information and click “Save” Click to enter dashboard development, click the right-side action menu to edit Upload Model Files # In the template development interface, click “Tools” -> “Resource Management” and upload your model files. https://help.smartchart.cn/en/docs/1.Basics/FirstAIScene/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/FirstAIScene/ Introduction # SmartChart abstracts LLM connections as data sources and agent development as dataset development, seamlessly integrating AI capabilities into the existing visualization system. You just need to create an OpenAI-compatible data source named smtgpt to call LLMs in datasets and charts, building intelligent conversations and agent workflows. Supports Ollama local models (e.g., Qwen3), Alibaba Bailian, DeepSeek, Doubao, Tencent Hunyuan, and all OpenAI-compatible service providers. Watch the video about LLMs and Agents https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/JDBCSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/JDBCSource/ Introduction # When the Python environment doesn’t have a directly available database connection library, you can connect via JDBC (Java Database Connectivity). SmartChart supports uploading JDBC JAR packages in the dashboard template to extend data source connection capabilities. Step Operation 1. Install JayDeBeApi pip install JayDeBeApi 2. Upload JAR Upload JDBC JAR in dashboard template editor 3. Create connection Driver format: jdbc:xxx://host:port/db Use Cases # When you cannot find a Python connection library for a database, you can use JDBC as an alternative. https://help.smartchart.cn/en/docs/3.Graphics/DebugLogs/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/DebugLogs/ Overview # SmartChart provides two debugging methods: dashboard-level logs and graph-level log() function. Compared to opening the browser F12 console, SmartChart’s built-in logging system is better suited for large-screen development scenarios — you can see log output and graphic sequence numbers directly on the page for quick problem identification. Enable Log Display in Dashboard # Click the log toggle in the dashboard top menu to switch log display status: https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/MapComponents/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/MapComponents/ Introduction # SmartChart supports multiple map visualization components, including regional heatmaps (province/city color mapping), scatter point maps (geographic coordinate markers), flyline maps (city flow relationships), Baidu map base overlay, and Three.js driven 3D globe effects. Map data is rendered through ECharts map series. Map Type Description Regional Heatmap type:'map', load GeoJSON to register map Scatter Map type:'effectScatter', with geoCoordMap coordinates Flyline Map type:'lines', shows inter-city flows Baidu Base Map ds_loadBmap(), requires AK configuration 3D Effects ds_load3d(), Three. https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/IDEDevMode/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/IDEDevMode/ Introduction # IDE development mode is designed for senior frontend developers. In this mode, SmartChart loads no ECharts or Vue components. Developers can fully develop H5 pages in local IDEs like VS Code, using only SmartChart’s dataset interface for data. After development, package the code and paste into the template area to publish. This approach completely decouples data and presentation layers. Use Cases # For senior frontend developers May not need SmartChart components, only dataset interface Prefer developing in IDE (e. https://help.smartchart.cn/en/docs/6.DataServices/DataUpdate/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/6.DataServices/DataUpdate/ Use Cases # Update data based on primary keys Configuration # Create a lazy-load dataset: dataset = { "table": "table_name", "id": "id", "fDict": {"name": "code", "m_age": "age"}, "sFields": ["age", "update_date"], "autoDict": {"updater": "$username", "update_date": "curdate()"} } id: Primary key field fDict: Field mapping between input and database sFields: Special fields (numeric types, functions) autoDict: Auto-submitted data Update Method # Same as data filling, add update=1: ds_save(0, dataset, 1) Data Format # // Single row dataset = {'id': 123, 'name': 'john'} // Multiple rows dataset = [{'id': 123, 'name': 'john'}, {'id': 124, 'name': 'smith'}] Composite Primary Key # dataset = { "table": "table_name", "id": "concat(a,b)", "fDict": {"id": "concat(a,b)"}, "sFields": [], "autoDict": {} } Auto-Generated Codes # "autoCode": {"order_no": "SELECT CONCAT('SCDD', DATE_FORMAT(NOW(), '%Y%m%d'), LPAD(IFNULL(CAST(SUBSTRING(MAX(order_no), 13) AS UNSIGNED) + 1, 1), 3, '0')) AS o FROM work_order WHERE order_no LIKE CONCAT('SCDD', DATE_FORMAT(NOW(), '%Y%m%d'), '%')"} Shorthand: "autoCode": {"order_no": "SCDD"} https://help.smartchart.cn/en/docs/7.AIApplications/VectorDatabase/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/7.AIApplications/VectorDatabase/ Introduction # SmartChart supports vector database integration, converting text to vectors and storing them for semantic knowledge retrieval (RAG). This is the core technology for building enterprise private knowledge bases and intelligent Q&A bots. SmartChart supports PostgreSQL + pgvector, and also StarRocks vectorization (enterprise). Once configured, semantic queries in Python datasets find the most relevant knowledge fragments, then pass them to LLM for accurate answers. Use Cases # Knowledge management Vector Database Installation # Example: Installing PostgreSQL on Linux https://help.smartchart.cn/en/docs/9.CRUD/CRUDUserSettings/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDUserSettings/ Introduction # CRUD user settings allow dynamic control of interface display content and operation permissions based on the current logged-in user. Use $username to determine user identity, or query user roles from a dataset to implement different field, button, or data scope visibility for different users. Control Method Description filter_param.username Direct username check Dataset + vapp.btnEdit Control button visibility by role Config item lookup Config panel edit page shows parameter name hints Use Cases # In many scenarios, different configurations are needed for different users, showing different content or interfaces, such as add/edit buttons. https://help.smartchart.cn/en/docs/1.Basics/FirstDataset/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/FirstDataset/ Introduction # “Published Dataset” is SmartChart’s dataset and chart reuse mechanism. Developed datasets + charts can be packaged as independent units for direct use in different dashboards, enabling “zero-code” level metric reuse, ideal for OEM and multi-tenant scenarios. Use Cases # Dataset and chart reuse, drag and drop directly into dashboards after development Build metric systems for users, enabling 0-code functionality Ideal for OEM scenarios Dataset Status Description: Published: Can be referenced as “Published Dataset” in other dashboards, cannot be modified in the target dashboard Offline/Draft: Only visible to developers for development and debugging Names starting with _ are automatically set to lazy-load mode (not queried immediately when opening dashboard) Create Dataset # In the development menu -> Datasets -> Add -> Save In the dataset list -> Click the E icon -> Enter dataset editor After developing the data, click the dataset editor, save the dataset and click to enter chart development Adjust the chart and save. https://help.smartchart.cn/en/docs/1.Basics/LargeScreenMigration/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/LargeScreenMigration/ Introduction # This article explains how to convert existing static large screen templates into SmartChart-compatible dashboards. Two methods are supported: AI-assisted template generation and manual static template migration, suitable for developers with HTML/CSS/JS large screen foundations. Use Cases # Already have developed non-SmartChart static large screen templates If you purchased Pro edition, contact customer service for 100+ static large screen templates Have basic understanding of JS, CSS, and SmartChart usage Business needs match a suitable template with little expected change AI Template # Prompt Reference # You can generate HTML based on the template format, and fill the corresponding CSS, HTML, JS into the respective template areas. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/KafkaSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/KafkaSource/ Introduction # SmartChart supports Kafka as a data source for real-time scenarios, retrieving the latest message from a specified partition. Uses custom data source functions to consume the latest record from a Kafka Topic. Key Concept Description dataset() Returns query dataset, reads latest Kafka record insert_dataset() Data submission implementation, writes messages to Kafka Consumer config Uses KafkaConsumer with SASL authentication Partition Configured via config['db'] Usage # Refer to “Custom Data Source” for usage. https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/SeamlessScroll/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/SeamlessScroll/ Introduction # Seamless scrolling components are used for announcement carousels, rankings, data tables, and other scenarios requiring automatic content loop scrolling. SmartChart provides two scrolling implementations: ds_liMarquee (based on the liMarquee plugin, supports seamless connection and rich configuration) and ds_scroll (simple native scrolling). Scroll Function Features Use Cases ds_liMarquee(name, config) Seamless connection, direction/speed config, hover pause Announcements, rankings ds_scroll(name, interval, step) Simple native implementation, CSS scrollTop Simple data scrolling Use Cases # Seamless scrolling components are suitable for scenarios requiring automatic content loop scrolling, such as: https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/AnimationEffects/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/AnimationEffects/ Introduction # SmartChart supports CSS animations to make dashboard elements more dynamic, including rotation, deformation, color gradients, etc. Apply CSS animation class names to components without importing additional libraries. Auto Rotation # Add the following style in template’s <style> section: @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @keyframes spin { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .Rotate { -webkit-animation: spin 3s linear 3s 5 alternate; animation: spin 3s linear infinite; } To rotate any component, add the Rotate class: https://help.smartchart.cn/en/docs/6.DataServices/BackendAPIRefresh/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/6.DataServices/BackendAPIRefresh/ Introduction # Backend API refresh allows external systems (ETL schedulers, data pipelines) to notify SmartChart to refresh specified dashboard data caches after data is ready. More precise and resource-efficient than frontend scheduled refresh, ideal for “refresh after ETL completion” scenarios. Use Cases # ETL workflow: wait for backend data refresh, then trigger dashboard refresh Time-consuming queries: pre-refresh to ensure fast first load Users need consistently fast page load experiences Recommended: Set dataset cache time longer (e. https://help.smartchart.cn/en/docs/9.CRUD/CRUDActionButtons/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDActionButtons/ Introduction # CRUD action buttons are used to batch-execute operations in tables, such as batch status updates, opening dialogs, or executing custom logic. Three modes are supported: single function dataset (default batch update of status field), function dataset mapping (custom SQL execution), and row button mode (trigger action on specific row click). Button Mode Parameters Use Case Single Function Dataset action + updatelist (primary key list) Batch status update Function Dataset Mapping icon:datasetID config Custom complex logic Row Button Mode Entire row data passed as parameter View details, execute action Use Cases # Select data rows and execute batch actions, such as batch status modification, opening new function items Custom function buttons on the side of the table Single Function Dataset Mode # Configuration # Configure button display name and color in the “Add/Edit” panel’s “Batch Actions”: {"complete": ["Button Name", "black"], . https://help.smartchart.cn/en/docs/1.Basics/FirstCRUDScene/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/FirstCRUDScene/ Introduction # SmartChart’s CRUD template is a built-in low-code data management framework. Through a configuration panel in the dashboard, you can implement data CRUD, conditional queries, option linkage, backend pagination, Excel import, and more without writing tedious form code. CRUD is particularly suitable for enterprise-level data entry, work order management, approval systems, and other business scenarios. CRUD core data convention: Dataset #0 handles query display, Dataset #1 handles write operations (add/modify). https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/MongoDBSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/MongoDBSource/ Introduction # SmartChart supports MongoDB as a data source, reading data from MongoDB collections via JSON format query configuration. Since MongoDB returns dict format, you typically need to use ds_mapToList() in the chart to convert to SmartChart standard 2D array format. Usage # Configure the connection pool normally. In the dataset editor, write query configuration: {"db": "db1", "table": "tb1", "filter": {"name": "Zarten"}, "projection": {"_id": 0}, "sort": [["_id", 1]], "limit": 10} Since the return is dict format, convert to 2D array using: https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/EditorShortcuts/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/EditorShortcuts/ Introduction # SmartChart editor (based on CodeMirror) has built-in rich keyboard shortcuts. Familiarity with these can significantly improve development efficiency. Especially Ctrl-Q (dataset quick edit) is SmartChart’s unique shortcut, allowing direct jump from template editor to dataset development. Function WIN MAC Description Show menu CTRL-, Command-, Fold others Alt-0 Command-Option-0 Find & replace Ctrl-F Command-F Duplicate selection Ctrl-D Command-D Comment selection Ctrl-/ Command-/ Undo Ctrl-z Command-z Redo Ctrl-y Command-y Dataset edit Ctrl-Q Ctrl-Q Uppercase Ctrl-U Ctrl-U Lowercase SHIFT-Ctrl-U SHIFT-Ctrl-U https://help.smartchart.cn/en/docs/1.Basics/ConnectionPool/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/ConnectionPool/ Introduction # Data sources (connection pools) are the bridge between SmartChart and databases. Once created, all datasets can reuse the connection, supporting MySQL, PostgreSQL, Oracle, ClickHouse, and 30+ other databases, as well as special data sources (API, Python, Redis, etc.). How to Add a Data Source # In development mode, click “Dev Management” -> Data Source -> Add Configure connection pool parameters, select a driver. For custom drivers, type the driver name and press Enter https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/PrometheusSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/PrometheusSource/ Introduction # SmartChart supports Prometheus as a data source for retrieving and visualizing monitoring metrics. Query Prometheus metrics using PromQL and transform results for visualization. Use Cases # Display infrastructure monitoring metrics (CPU, memory, disk) Application performance monitoring Custom business metrics tracking Usage # Create a Prometheus connection with the server URL, then write PromQL queries in the dataset editor. # CPU usage 100 - (avg by (instance) (irate(node_cpu{mode="idle"}[5m])) * 100) # Memory usage node_memory_MemTotal - node_memory_MemAvailable # HTTP request rate rate(http_requests_total[5m]) Ensure the Prometheus server is accessible from the SmartChart server. https://help.smartchart.cn/en/docs/1.Basics/AppTemplates/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/AppTemplates/ Introduction # SmartChart supports packaging developed dashboards as templates for quick application to new projects via backup/restore. You can use built-in local templates or purchase professional large screen templates from the store, enabling one-click migration of datasets, charts, and templates, greatly reducing repetitive development time. Use Cases # Quickly apply developed templates to greatly improve development and learning efficiency 7.0 Backup/Restore Video Apply Local Templates # You can quickly apply locally backed-up templates. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/SQLAlchemySource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/SQLAlchemySource/ Introduction # SmartChart supports SQLAlchemy as a universal database connection method. SQLAlchemy provides ORM-level access to various databases including MySQL, PostgreSQL, SQL Server, Oracle, SQLite, and more through a unified interface. Supported Databases # Database Driver Example MySQL mysql+pymysql://user:pass@host:3306/db PostgreSQL postgresql://user:pass@host:5432/db SQL Server mssql+pyodbc://user:pass@host/db Oracle oracle://user:pass@host:1521/db SQLite sqlite:///path/to/db.sqlite Usage # Create a connection pool with the SQLAlchemy driver URL, then write SQL queries normally in the dataset editor. Use Cases # When the standard SmartChart driver doesn’t support your database When you need ORM-level database access For databases that only have Python SQLAlchemy drivers available https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/LineUpChart/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/LineUpChart/ Introduction # LineUp is an interactive visualization designed for multi-dimensional comprehensive scoring and ranking. It supports dynamic sorting, filtering, and highlighting by multiple metrics. In SmartChart, load the LineUp JS library and pass object array data to use it. Ideal for city competitiveness, product evaluation, and other ranking analysis scenarios. Core Function Description ds_loadcss('smt_LineUp') Load LineUp styles ds_loadjs('smt_LineUp') Load LineUp JS library ds_createMap_all(dataset) Convert 2D array to object array format LineUpJS. https://help.smartchart.cn/en/docs/9.CRUD/CRUDTableReference/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/9.CRUD/CRUDTableReference/ Introduction # CRUD templates have certain database table structure requirements. MySQL is recommended as the target database. This document provides table creation references for MySQL, SQLite3, PostgreSQL, Oracle, and SQL Server, including standard field definitions for primary keys, auto-increment, timestamps, and updater fields. Required Field Description id Primary key, auto-increment tid Tenant ID (multi-tenant scenarios) create_time Creation time update_time Update time updater Updated by (auto-filled via $username) -- sqlite3 CREATE TABLE work_order ( id INTEGER PRIMARY KEY AUTOINCREMENT, order_no TEXT UNIQUE, order_type TEXT, order_qty INTEGER, create_time DATETIME DEFAULT (datetime('now', 'localtime')), update_time DATETIME DEFAULT (datetime('now', 'localtime')), updater TEXT ); -- postgreSQL CREATE TABLE work_order ( id SERIAL PRIMARY KEY, "order_no" VARCHAR(50) UNIQUE, "order_type" VARCHAR(50), "order_qty" INT, create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updater VARCHAR(50) ); COMMENT ON TABLE work_order IS 'Work Order'; COMMENT ON COLUMN work_order. https://help.smartchart.cn/en/docs/1.Basics/PermissionManagement/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/1.Basics/PermissionManagement/ Introduction # SmartChart’s permission system has two layers: Developer Permissions (controls who can access development mode) and Report View Permissions (controls who can see which dashboards). Proper permission assignment enables isolation between developers and read-only users, as well as differentiated access control for different user groups. Developer Permissions # Click the user management icon to control users’ development permissions. New users have no development permissions by default and cannot see any development-related menus on the homepage. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/WebSocketSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/WebSocketSource/ Introduction # SmartChart supports WebSocket as a data source for real-time data push scenarios. Unlike HTTP polling, WebSocket provides server-push based real-time updates, ideal for live dashboards and monitoring screens. Use Cases # Real-time stock market data display IoT device status monitoring Live sports/event data updates Real-time production line metrics Usage # Uses custom data source functions. Create a WebSocket connection that receives pushed data and returns it for visualization. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/ExcelData/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/ExcelData/ Introduction # SmartChart supports using Excel data as a data source. You can create fixed datasets from Excel data or upload Excel files for processing. This is useful when you need to use Excel data without importing it into a database. Use Cases # Display Excel data directly in dashboards Use Excel as a temporary data source Process uploaded Excel files Method 1: Fixed Dataset # Create a fixed dataset with Excel data directly in the dataset editor: https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/UsingIcons/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/SpecialGraphics/UsingIcons/ Introduction # Font Awesome icon library is built into SmartChart and can be used directly in HTML components, table cells, indicator cards, and any HTML content. Icons are referenced via <i class="fas fa-icon-name"> or <i class="fab fa-icon-name">, supporting three types: solid, regular, and brand icons. Category Class Prefix Example Solid Icons fas <i class="fas fa-chart-line"> Regular Icons far <i class="far fa-bell"> Brand Icons fab <i class="fab fa-github"> Use Cases # Font Awesome icon library is built into SmartChart. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/OtherSources/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/OtherSources/ Introduction # SmartChart supports various other data sources through custom connectors, including HTTP API, Webhook, GraphQL, SMS, Telegram, Slack, MQTT, and Anthropic Claude. Supported Sources # Source Description HTTP API Generic RESTful API calls with authentication and response parsing Webhook Generic webhook push with HMAC signature support GraphQL Query and mutation support for GraphQL endpoints SMS Alipay and Tencent Cloud SMS services Telegram Bot messaging with multiple parse modes Slack Incoming webhook and chat. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/VectorDatabase/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/VectorDatabase/ Introduction # Vector database is used for storing and retrieving text embeddings, supporting semantic similarity-based knowledge base Q&A scenarios. SmartChart uses StarRocks as the vector compute backend, combined with custom data source functions, to implement the full vector ingestion and retrieval pipeline. Enterprise vector solution requires Pro edition. Core Component Description SmartVectorDB Vector database operations class, supports incremental and full-text retrieval Text2VecEmbeddingFunction Local model text-to-vector Text2VecDashscopeFunction Alibaba Dashscope cloud text-to-vector insert_dataset() Batch ingest documents and vectors dataset() Retrieve most similar results by query text Setup # Create the vector table in StarRocks: https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/MessagePushSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/MessagePushSource/ Introduction # SmartChart supports message push data sources for sending notifications to DingTalk, WeChat Work, and Feishu. This enables automated alerts, scheduled task notifications, and report delivery through enterprise messaging platforms. Supported Platforms # Platform Message Types DingTalk Text, markdown, action card, link WeChat Work Text, markdown, image, news Feishu Text, rich text, interactive cards Usage # Create a connection with the webhook URL, then send messages via dataset: https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/BailianAgent/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/BailianAgent/ Introduction # Alibaba Bailian LLM knowledge base application supports integration with SmartChart via API, enabling LLM-based knowledge Q&A and intelligent analysis. After configuring a Bailian data source in SmartChart, you can directly input dialogue content in the dataset and get answers from the LLM. Config Item Description Driver bailianApp Username Bailian agent application App ID Password API_KEY Usage Input dialogue content directly in dataset SQL editor Use Cases # Alibaba Bailian LLM knowledge base application integration https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/CustomSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/CustomSource/ Introduction # SmartChart supports custom data sources, allowing you to write Python connector modules for any data source. Create reusable connectors with dataset() and insert_dataset() functions that can be used like built-in data sources. Development Pattern # Function Purpose dataset(*args, **kwargs) Returns query dataset (2D array or JSON dict) insert_dataset(*args, **kwargs) Data submission/write implementation Function Parameters # def dataset(*args, **kwargs): # args[0]: sqlList - Dataset editor input split by semicolons [sql1, sql2. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/EmailSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/EmailSource/ Introduction # SmartChart supports SMTP-based email sending as a data source. Send HTML or plain text emails through configured SMTP servers, useful for scheduled report delivery and alert notifications. Use Cases # Scheduled report auto-sending Exception alert email notifications Data submission result notifications Configuration # Driver: smtp Connection address: smtp server address (e.g., smtp.qq.com) Port: 465 (SSL) or 587 (TLS) Username: email account Password: email password or authorization code Usage # Write email content in the dataset editor: https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/DingTalkBotSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/DingTalkBotSource/ Introduction # SmartChart supports wrapping DingTalk group robot Webhook as a data source, sending text, markdown, and other message types to specified DingTalk groups. Suitable for scheduled task notifications, exception alert pushing, and daily report auto-sending. Get Webhook URL (3 simple steps) # Open DingTalk → find a group you use Click … in top right → select Smart Group Assistant Click Add Robot → select Custom Important: Security setting must select “Custom Keywords”, then enter a word like “Alert” or “Activity” After creation, you’ll see: Webhook URL: https://oapi. https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/FeishuSheetSource/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/2.Datasets/SpecialSources/FeishuSheetSource/ Introduction # SmartChart supports reading and writing Feishu (Lark) spreadsheet data as a data source. Access Feishu sheet data through the Feishu Open API, enabling data synchronization between SmartChart and Feishu. Configuration # Driver: feishu_sheet Connection address: https://open.feishu.cn Username: App ID Password: App Secret Usage # Write query configuration in the dataset editor: def dataset(*args, **kwargs): sqlList = args[0] config = args[1] # Get tenant access token import requests token_url = f"{config['host']}/open-apis/auth/v3/tenant_access_token/internal" token_resp = requests.