Skip to main content

Inuatek DCC Widget Customization Guide

This guide shows how to customize Inuatek's default chart and gauge widgets using Apache ECharts, with real examples used in your platform. It includes:

  • Base widget configurations
  • Progressive modifications
  • Hints to empower users to make their own visualizations

NOTE: A prerequisite for fully understanding the below is some knowledge about the structure of JS and JSON formats.

🧭 Simple View vs. Advanced View​

When you open the configuration panel for a custom chart widget, you will find a toggle in the top-left corner of the Configuration accordion: Custom chart configuration

IconMode
Simple Toggle ActiveSimple view – form UI that maps data sources to chart series
Advanced Toggle ActiveAdvanced view – raw JSON editor (the focus of this guide)

👀 Simple View​

The Simple View is designed for quickly connecting data sources to chart series without editing raw JSON. It exposes only the datasource assignment for each series — specifically the data field (or value inside a data array entry for pie/bar charts). All other ECharts properties remain untouched.

Each row in Simple View shows:

  • A Series name field (auto-managed when using a datasource alias).
  • A Datasource alias selector — choose from the aliases added to the widget, or type a custom static value.

Changes made in Simple View write back to the same JSON that the Advanced editor reads, so the two views are always in sync. Switching between them never loses data.

In simple cases — where every series slot uses a datasource alias directly as the data value (line/bar with one datasource per series) — adding a new datasource to the widget automatically creates a new series entry in the JSON. The series is pre-filled with the alias as its value and the datasource sample name as its display name. No manual JSON editing is required.

Scope limitation

Simple View only surfaces datasource assignment. For structural changes — changing chart type, configuring axes, colors, or thresholds — use Advanced View (JSON editor). Removing or reordering series also requires Advanced View.

🔧 Advanced View​

The Advanced View is a full JSON editor and is the subject of the rest of this guide. Use it for any configuration beyond connecting data sources.

📊 Line Chart Widget​

🟢 Base Widget (Time Series Line Chart)​

{
  "xAxis": {
    "type": "time",
    "axisLabel": {
      "hideOverlap": true
    }
  },
  "yAxis": {
    "type": "value"
  },
  "legend": {
    "show": true,
    "type": "scroll",
    "right": "20%"
  },
  "grid": {
    "bottom": 27,
    "top": 30
  },
  "backgroundColor": "rgb(0 0 0 / 0%)",
  "tooltip": {
    "show": true,
    "trigger": "axis"
  },
  "dataZoom": [
    {
      "type": "inside",
      "disabled": true,
      "start": 0,
      "end": 100
    }
  ],
  "series": [
    {
      "data": "Datasource_unique_id",
      "type": "line",
      "name": "Name",
      "sampling": "lttb",
      "symbol": "none"
    }
  ]
}

🛠 Modified Version – With Area Fill, Stepped Line & VisualMap​

{
  "backgroundColor": "rgb(0 0 0 / 0%)",
  "dataZoom": [
    {
      "disabled": true,
      "end": 100,
      "start": 0,
      "type": "inside"
    }
  ],
  "grid": {
    "bottom": 27,
    "top": 30
  },
  "legend": {
    "right": "20%",
    "show": true,
    "type": "scroll"
  },
  "series": [
    {
      "areaStyle": {},
      "data": "Datasource_unique_id",
      "lineStyle": {},
      "name": "Name",
      "sampling": "lttb",
      "step": "start",
      "symbol": "none",
      "type": "line"
    }
  ],
  "tooltip": {
    "show": true,
    "trigger": "axis"
  },
  "visualMap": {
    "outOfRange": {
      "color": "#999"
    },
    "pieces": [
      {
        "color": "#93CE07",
        "gt": 0,
        "lte": 1
      },
      {
        "color": "#FBDB0F",
        "gt": 1,
        "lte": 2
      },
      {
        "color": "#FC7D02",
        "gt": 2,
        "lte": 3
      },
      {
        "color": "#FD0100",
        "gt": 3,
        "lte": 4
      },
      {
        "color": "#AA069F",
        "gt": 4,
        "lte": 5
      },
      {
        "color": "#AC3B2A",
        "gt": 5
      }
    ],
    "right": 10,
    "top": 50
  },
  "xAxis": {
    "axisLabel": {
      "hideOverlap": true
    },
    "type": "time"
  },
  "yAxis": {
    "type": "value"
  }
}

In the DCC Widget editor, the real variable data source BadSampleCount is selected and automatically assigned the alias "a". You must replace "Datasource_unique_id" in your JSON configuration with "a" to bind this data source.

Using Simple View for datasource assignment

For a line chart, the Simple View is the fastest way to connect datasources. Each series appears as a row where you select the alias from a dropdown. Even better — if every series already uses a datasource alias, simply adding a new datasource to the widget will automatically append a new series to the JSON, inheriting the chart type and structure from the existing series. No JSON editing needed at all. Once the datasources are wired up, switch to Advanced View to further customize the JSON. See Simple View vs. Advanced View above.

Custom Chart Editing

Key Modifications:​

FeatureFrom BaseModified
Filled areaNo "areaStyle"Add "areaStyle": {}
Stepped LineNo "step"Add "step": "start"
Color zonesNot presentAdd visualMap.pieces
Line stylingBasicAdd lineStyle object for future extension

🕹️ Gauge Widget​

🟢 Base Widget (Circular Gauge)​

{
  "backgroundColor": "rgb(0 0 0 / 0%)",
  "tooltip": {
    "formatter": "{a} : {c} ",
    "alwaysShowContent": false,
    "hideDelay": 100,
    "confine": true
  },
  "grid": {
    "top": 0,
    "left": 0,
    "right": 0,
    "bottom": 0,
    "show": false,
    "containeLabel": true
  },
  "series": [
    {
      "name": "name",
      "center": {
        "0": "50%",
        "1": "55%"
      },
      "progress": {
        "show": false
      },
      "type": "gauge",
      "detail": {
        "formatter": "{value} °C",
        "show": true,
        "valueAnimation": true,
        "offsetCenter": [0, "60%"],
        "fontSize": 10,
        "fontWeight": "bold"
      },
      "min": 0,
      "max": 100,
      "radius": "100%",
      "splitNumber": 10,
      "itemStyle": {},
      "axisLine": {
        "lineStyle": {
          "color": [
            [0.3, "#67e0e3"],
            [0.8, "#37a2da"],
            [1, "#fd666d"]
          ],
          "width": 10
        }
      },
      "axisLabel": {
        "fontSize": 12,
        "distance": 15
      },
      "axisTick": {
        "length": 6,
        "splitNumber": 5,
        "distance": 10,
        "show": true,
        "lineStyle": {
          "width": 1,
          "type": "solid"
        }
      },
      "splitLine": {
        "length": 10,
        "distance": 10,
        "show": true,
        "lineStyle": {
          "width": 3,
          "type": "solid"
        }
      },
      "pointer": {
        "show": true,
        "length": "60%",
        "width": 6,
        "itemStyle": {
          "color": "auto"
        }
      },
      "data": "Datasource_unique_id"
    }
  ]
}

🛠 Modified Version – Tank-Style Bar Chart​

{
    "grid": {
        "bottom": "15%",
        "height": "70%",
        "left": "35%",
        "right": "35%",
        "top": "15%"
    },
    "series": [
        {
            "animation": false,
            "barCategoryGap": 0,
            "barGap": "-100%",
            "barWidth": 180,
            "data": [
                {
                    "value": 100
                }
            ],
            "itemStyle": {
                "borderColor": "#333",
                "borderRadius": [
                    30,
                    30,
                    30,
                    30
                ],
                "borderWidth": 4,
                "color": "transparent"
            },
            "label": {
                "show": false
            },
            "name": "Tank Container",
            "tooltip": {
                "show": false
            },
            "type": "bar",
            "z": 3
        },
        {
            "backgroundStyle": {
                "opacity": 0
            },
            "barWidth": 180,
            "data": "Datasource_unique_id",
            "itemStyle": {
                "borderRadius": [
                    30,
                    30,
                    30,
                    30
                ],
                "color": "#007bff"
            },
            "label": {
                "color": "#000",
                "fontSize": 24,
                "formatter": "{c}",
                "position": "top",
                "show": true
            },
            "name": "Tankniveau",
            "type": "bar"
        }
    ],
    "tooltip": {
        "formatter": "{b}: {c}%"
    },
    "xAxis": {
        "data": [
            "tank"
        ],
        "show": false,
        "type": "category"
    },
    "yAxis": {
        "axisLabel": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "inverse": false,
        "max": 100,
        "min": 0,
        "splitLine": {
            "show": false
        },
        "type": "value"
    }
}

In the DCC Widget editor, the real variable data source Temperature is selected, and in this case translates to a which replaces Datasource_unique_id. The outer tank frame is static (data: [{ "value": 100 }]), so no second datasource alias is required.

Using Simple View for pie/bar data entries

For charts like the tank-style bar chart where the data field is an array of { name, value } entries, the Simple View renders one row per array entry. You can assign datasource aliases to each entry individually without touching the JSON. The outer series structure, bar widths, colors, and borders must still be configured in Advanced View. See Simple View vs. Advanced View above.

📌 Tip: Hover over the clipboard icon next to each data source to auto-copy its alias.

Custom Gauge Editing

Key Modifications:​

FeatureFrom Gauge WidgetModified
Visualization typegaugeTwo stacked bar series
Visual structureCircular needleTank-like rectangle with fill
Dummy containerNot presentStatic frame value 100 (data: [{ "value": 100 }])
Label format"formatter": "{value} °C""formatter": "{c}" and position on top

🧪 Option: Testing in ECharts Editor​

  1. Wrap JSON as Javascript and paste the JavaScript option = { ... } snippet into ECharts Editor.
  2. Replace "Datasource_unique_id" with dummy data, e.g. data: [[timestamp, value]] or data: [value].
  3. Visualize and iterate interactively.

🟡 Step 1: Wrap JSON in JavaScript​

The ECharts editor expects JavaScript format, so wrap your JSON like this:

option = {
  // your JSON here
};

So, for example, you take this JSON:

{
  "xAxis": {
    "type": "time"
  },
  "series": [
    {
      "data": "Datasource_unique_id",
      "type": "line"
    }
  ]
}

And convert it to this Javascript:

option = {
  xAxis: {
    type: 'time'
  },
  series: [
    {
      data: [], // We'll add dummy data here
      type: 'line'
    }
  ]
};

💡 Tip: When converting JSON to JavaScript:

  • Remove quotes from property names (e.g., type: 'line' instead of "type": "line")
  • Use single quotes around string values
  • Wrap the JSON in option = { ... }

✅ Replace "Datasource_unique_id" with actual test data (see below)

💡 HINT​

You can also do the reverse, i.e. starting from Echart JS, and convert to JSON. You can use ChatGPT or similar, or an online tool like this:

Custom Gauge Editing

🟡 Step 2: Add Dummy Data​

Define dummy data to simulate your widget's behavior without needing live data input. This is useful when testing in the ECharts Editor:

Time Series Chart Example:

data: [
  ['2025-01-01T00:00:00Z', 0.5],
  ['2025-01-01T01:00:00Z', 1.5],
  ['2025-01-01T02:00:00Z', 2.2],
  ['2025-01-01T03:00:00Z', 3.4],
  ['2025-01-01T04:00:00Z', 5.5],
  ['2025-01-01T05:00:00Z', 4.8]
]

For Tank-style Bar Chart

  • Static frame (outer tank):
data: [100] // always full
  • Fill level:
data: [72] // current level

🟡 Step 3: Paste into Editor​

Full working JS example for a time series line chart:

option = {
  backgroundColor: 'rgb(0 0 0 / 0%)',
  dataZoom: [
    {
      disabled: true,
      end: 100,
      start: 0,
      type: 'inside'
    }
  ],
  grid: {
    bottom: 27,
    top: 30
  },
  legend: {
    right: '20%',
    show: true,
    type: 'scroll'
  },
  series: [
    {
      areaStyle: {},
      data: [
        ['2025-01-01T00:00:00Z', 0.5],
        ['2025-01-01T01:00:00Z', 1.5],
        ['2025-01-01T02:00:00Z', 2.2],
        ['2025-01-01T03:00:00Z', 3.4],
        ['2025-01-01T04:00:00Z', 5.5],
        ['2025-01-01T05:00:00Z', 4.8]
      ],
      lineStyle: {},
      name: 'Name',
      sampling: 'lttb',
      step: 'start',
      symbol: 'none',
      type: 'line'
    }
  ],
  tooltip: {
    show: true,
    trigger: 'axis'
  },
  visualMap: {
    outOfRange: {
      color: '#999'
    },
    pieces: [
      { color: '#93CE07', gt: 0, lte: 1 },
      { color: '#FBDB0F', gt: 1, lte: 2 },
      { color: '#FC7D02', gt: 2, lte: 3 },
      { color: '#FD0100', gt: 3, lte: 4 },
      { color: '#AA069F', gt: 4, lte: 5 },
      { color: '#AC3B2A', gt: 5 }
    ],
    right: 10,
    top: 50
  },
  xAxis: {
    type: 'time',
    axisLabel: {
      hideOverlap: true
    }
  },
  yAxis: {
    type: 'value'
  }
};

Which gives this result in eCharts Editor

Custom Gauge Editing

Full working JS example for Tank-style Bar Chart:

option = {
  grid: {
    bottom: '15%',
    height: '70%',
    left: '35%',
    right: '35%',
    top: '15%'
  },
  xAxis: {
    type: 'category',
    data: ['tank'],
    show: false
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100,
    inverse: false,
    axisLabel: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { show: false }
  },
  tooltip: {
    formatter: '{b}: {c}%',
    trigger: 'axis'
  },
  series: [
    {
      name: 'Tank Container',
      type: 'bar',
      data: [100], // Static outer tank (always 100%)
      barWidth: 180,
      barGap: '-100%',
      barCategoryGap: 0,
      itemStyle: {
        color: 'transparent',
        borderColor: '#333',
        borderWidth: 4,
        borderRadius: [30, 30, 30, 30]
      },
      label: { show: false },
      tooltip: { show: false },
      z: 3
    },
    {
      name: 'Tank Level',
      type: 'bar',
      data: [72], // Current tank fill level (dummy value)
      barWidth: 180,
      backgroundStyle: { opacity: 0 },
      itemStyle: {
        color: '#007bff',
        borderRadius: [30, 30, 30, 30]
      },
      label: {
        show: true,
        position: 'top',
        fontSize: 24,
        color: '#000',
        formatter: '{c}%'
      }
    }
  ]
};

Which gives this result in eCharts Editor

Custom Gauge Editing

✅ Summary​

TaskHow
Convert JSON to JSWrap with option = { ... }, remove quotes around keys
Use dummy dataReplace "Datasource_unique_id" with sample values
Test output visuallyPaste into the ECharts Online Editor

🔗 Resources​