MindLogic LogoMindLogic Manual
/
Dashboard

Native Charts & Data Interface

MindLogic features a powerful built-in native chart rendering engine, capable of seamlessly transforming any node into a data visualization panel. Through simple property configuration or script assignment, you can easily present complex data.

1. Basic API & Property Settings

To render a node as a chart, you only need to set two core properties:

  1. node.contentType: Must be set to "chart".
  2. node.contentPayload: Stores the data required for chart rendering (supports JSON strings, directly assigned JS objects/arrays, or third-party format conversion results).

Script Assignment Example:

// 1. Set the content type to chart
node.contentType = "chart";

// 2. Assign the chart data (supports direct JS objects, engine handles JSON serialization automatically)
node.contentPayload = {
    chartType: "bar",
    xAxisTitle: "Quarter",
    yAxisTitle: "Revenue (k)",
    series: [
        { x: "Q1", y: 120, category: "Product A" },
        { x: "Q1", y: 80, category: "Product B" }
    ]
};

2. All Supported Chart Types & Example Data (JSON String)

If you are not using scripts but pasting data directly through the interface's property panel, you must use standard JSON string format. Below are the 5 basic chart types currently supported by the engine and their corresponding raw JSON formats.

1) Bar Chart

Suitable for comparing numerical sizes across categorical data. chartType: bar

JSON Example Data:

{
  "chartType": "bar",
  "xAxisTitle": "Month",
  "yAxisTitle": "Sales",
  "series": [
    { "x": "Jan", "y": 150, "category": "Online" },
    { "x": "Jan", "y": 90, "category": "Offline" },
    { "x": "Feb", "y": 200, "category": "Online" },
    { "x": "Feb", "y": 120, "category": "Offline" }
  ]
}

2) Line Chart

Suitable for showing continuous trends over time. chartType: line

JSON Example Data:

{
  "chartType": "line",
  "xAxisTitle": "Time",
  "yAxisTitle": "Temp (°C)",
  "series": [
    { "x": "08:00", "y": 15, "category": "Beijing" },
    { "x": "12:00", "y": 25, "category": "Beijing" },
    { "x": "16:00", "y": 22, "category": "Beijing" }
  ]
}

3) Area Chart

Emphasizes the magnitude of change over time and draws attention to the total value trend. chartType: area

JSON Example Data:

{
  "chartType": "area",
  "xAxisTitle": "Year",
  "yAxisTitle": "Users (k)",
  "series": [
    { "x": "2021", "y": 50, "category": "Free User" },
    { "x": "2022", "y": 150, "category": "Free User" },
    { "x": "2023", "y": 300, "category": "Free User" },
    { "x": "2021", "y": 10, "category": "Paid User" },
    { "x": "2022", "y": 40, "category": "Paid User" },
    { "x": "2023", "y": 90, "category": "Paid User" }
  ]
}

4) Pie Chart (Donut Chart)

Suitable for showing proportional relationships between parts and a whole. chartType: pie

JSON Example Data:

{
  "chartType": "pie",
  "series": [
    { "x": "R&D", "y": 45, "category": "R&D" },
    { "x": "Marketing", "y": 25, "category": "Marketing" },
    { "x": "Sales", "y": 20, "category": "Sales" },
    { "x": "HR", "y": 10, "category": "HR" }
  ]
}

5) Point / Scatter Chart

Used for displaying and comparing numerical values, showing correlations between variables. chartType: point

JSON Example Data:

{
  "chartType": "point",
  "xAxisTitle": "Height (cm)",
  "yAxisTitle": "Weight (kg)",
  "series": [
    { "x": "165", "y": 55, "category": "Female" },
    { "x": "170", "y": 60, "category": "Female" },
    { "x": "175", "y": 70, "category": "Male" },
    { "x": "180", "y": 75, "category": "Male" }
  ]
}

6) Heatmap

Shows the magnitude of a phenomenon as color in two dimensions. Here, x is the horizontal axis (e.g., date), category is the vertical axis (e.g., product line), and y maps to the color intensity. chartType: heatmap

JSON Example Data:

{
  "chartType": "heatmap",
  "xAxisTitle": "Day",
  "yAxisTitle": "Employee",
  "series": [
    { "x": "Mon", "y": 8, "category": "Alice" },
    { "x": "Mon", "y": 12, "category": "Bob" },
    { "x": "Tue", "y": 9, "category": "Alice" },
    { "x": "Tue", "y": 7, "category": "Bob" }
  ]
}

7) Rule Line (Reference Line)

Usually not used alone, but inside composite charts to draw a horizontal reference line (e.g., target line, average line) across the entire canvas. y indicates the height position, and category represents the line's label and legend color. chartType: rule

3. Composite Charts

MindLogic natively supports rendering multiple shapes within the same coordinate system (e.g., a "Bar + Line" dual-axis effect, or a Bar chart with an "Average Line"). To enable mixed rendering, you don't specify a global chartType; instead, provide a seriesTypes dictionary to tell the engine which shape corresponds to each data category.

JSON Example Data (Bar + Line + Rule):

{
  "xAxisTitle": "Month",
  "yAxisTitle": "Revenue (k)",
  "seriesTypes": { 
    "Actual Sales": "bar", 
    "Target": "line",
    "Annual Target": "rule"
  },
  "series": [
    { "x": "Jan", "y": 120, "category": "Actual Sales" },
    { "x": "Feb", "y": 150, "category": "Actual Sales" },
    { "x": "Mar", "y": 210, "category": "Actual Sales" },
    
    { "x": "Jan", "y": 140, "category": "Target" },
    { "x": "Feb", "y": 160, "category": "Target" },
    { "x": "Mar", "y": 180, "category": "Target" },
    
    { "y": 150, "category": "Annual Target" }
  ]
}

4. Seamless Integration with Third-Party Charts (ECharts & Chart.js)

If you already have configuration data that complies with ECharts or Chart.js specifications (e.g., returned via a backend API or generated by an LLM), you don't need to manually refactor the data.

MindLogic's script engine has built-in global formatting functions:

  • FromECharts(option)
  • FromChartJs(config)

They intelligently extract labels, datasets, and categories from third-party formats, flattening them automatically into MindLogic's natively supported format.

Example Usage:

// Suppose this is a native ECharts config generated by an LLM or backend
let myEchartsOption = {
    xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },
    yAxis: { type: 'value', name: 'Sales' },
    series: [
        { type: 'bar', name: 'Direct', data: [320, 332, 301] },
        { type: 'line', name: 'Search', data: [820, 932, 901] }
    ]
};

// 1. Set the content type
node.contentType = "chart";

// 2. Use the global conversion function for one-line data injection
node.contentPayload = FromECharts(myEchartsOption);