Custom Chart

Overview

Custom charts can assemble and render data through two methods: Automation and Expression, and support three rendering types: Chart, HTML, and Markdown. Compared to Chart and Rich Text cards, they offer higher freedom but also have a steeper learning curve.

Settings

Setting Item	Description
Data Source Type	Configure the type of data source. Options: Call Automation, Use Expression Calculation
Automation Return Data	Automation called when data source type is Call Automation. Return data through the Set Automation Return Value step
Expression Calculation Data	Expression executed when data source type is Use Expression Calculation.
Rendering Type	Configure the display method of the custom chart. Options: Chart, HTML, Markdown. Different rendering types require different data structures for returned data. For details, refer to the Rendering Types and Data Structures documentation below
Call Automation After Clicking	Automation triggered after clicking on custom chart content.
Call Automation After Double-clicking	Automation triggered after double-clicking on custom chart content.
Refresh Chart When Following Data Table Changes	Refresh card data when the configured data table data changes (including data table record creation, data table record deletion, data table record modification)

Rendering Types and Data Structures

• Chart rendering type: The returned data is a JSON object, and the configuration items are consistent with ECharts, supporting the use of JSON objects as ECharts configuration items for chart rendering. Data structure example:

{
    "xAxis": {
      "type": 'category',
      "data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    "yAxis": {
      "type": 'value'
    },
    "series": [
      {
        "data": [150, 230, 224, 218, 135, 147, 260],
        "type": 'line'
      }
    ]
}

• HTML rendering type: The returned data is of string type, supporting the rendering of HTML format strings as DOM nodes. Data structure example:

`
<h1>hellow world</h1>
`

Note: Since HTML is rendered directly, it is easy to cause XSS attacks. Please only use the HTML rendering type for trusted content, never use user-provided content as returned data.

• Markdown rendering type: The returned data is of string type, supporting the rendering of Markdown format strings as DOM nodes. Data structure example:

`
# hellow world
`

Interaction

• Chart rendering type: Clicking or double-clicking on the chart can trigger an automation program. The automation program accepts a parameter with the following type:

{
    name:String,//Category name
    color:String,//Color of data graphic
    seriesName:String,//Chart name
    seriesType:String,//Chart type
    type:String,//Event type click dblclick
    value:Object,//Clicked value
}

Note: Only available under Chart rendering type

Usage Example

Suppose a weather monitoring station needs to view a comparison chart of annual rainfall and evaporation, and needs to display the maximum, minimum, and average values of annual rainfall and evaporation. We can use the rendering type as Chart and return the corresponding data through the Set Automation Return Value step of automation:

{
  "title": { "text": "Rainfall and Evaporation", "subtext": "Virtual Data" },
  "tooltip": { "trigger": "axis" },
  "legend": { "data": ["Rainfall", "Evaporation"] },
  "toolbox": {
    "show": true,
    "feature": {
      "dataView": { "show": true, "readOnly": false },
      "magicType": { "show": true, "type": ["line", "bar"] },
      "restore": { "show": true },
      "saveAsImage": { "show": true }
    }
  },
  "calculable": true,
  "xAxis": [
    {
      "type": "category",
      "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    }
  ],
  "yAxis": [{ "type": "value" }],
  "series": [
    {
      "name": "Rainfall",
      "type": "bar",
      "data": [2, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3],
      "markPoint": {
        "data": [
          { "type": "max", "name": "Max" },
          { "type": "min", "name": "Min" }
        ]
      },
      "markLine": { "data": [{ "type": "average", "name": "Avg" }] }
    },
    {
      "name": "Evaporation",
      "type": "bar",
      "data": [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3],
      "markPoint": {
        "data": [
          { "name": "Max", "value": 182.2, "xAxis": 7, "yAxis": 183 },
          { "name": "Min", "value": 2.3, "xAxis": 11, "yAxis": 3 }
        ]
      },
      "markLine": { "data": [{ "type": "average", "name": "Avg" }] }
    }
  ]
}