Creating custom visualizations¶

Using the ECharts library, you can create custom widgets with a wide range of visualizations, including bar charts, line charts, pie charts, and scatter plots. Widgets support interactive features such as tooltips, zooming, and panning, and you can customize their appearance, including colors, labels, legends, and animations.

For more information, refer to:

Procedure¶

To create a custom widget, follow the steps below:

Create a new widget and choose type "Custom".
Choose the data you want to visualize.

Performance impact of data density

If you choose raw data for parameters please check the data density. Otherwise the widget will take long to load.

To configure the visualization in the details section, follow the guidelines below:

Use the following placeholders:

Placeholder	Description
`__data[n]`	Array of data values for parameter `n`
`__time[n]`	Array of time values for parameter `n`
`__parameterName[n]`	Name of parameter `n`
`__parameterUnit[n]`	Unit of parameter `n`
`__parameterAspect[n]`	Aspect of parameter `n`
`__parameterDecimalPlaces[n]`	Decimal places of parameter `n`
`__parameterColor[n]`	Color of parameter `n`
`__parameterCount`	Number of parameters
`__from`	Start of date range
`__to`	End of date range
`__locale`	User locale

To run the configuration correctly, always include return {}.

Ensure that your configuration always return a valid JSON object, for example:

return {
  title: {
    text: 'Example Chart'
  },
  tooltip: {},
  legend: {},
  toolbox: {},
  xAxis: [],
  yAxis: [],
  series: []
};

Define the appearance (labels, type, formatting) of the axis: xAxis, yAxis.
Note that series and datasets contain the actual data but which charts require these elements depends on the selected chart type.
Transform the data before using it.
- System data often has the following format:
```
{ timestamp: 1678886400000, value: 25 }
```
- ECharts expects the following format:
```
[1678886400000, 25]
```
To select multiple parameters, follow the guidelines below:
- Create multiple series.
- Iterate over __parameterCount.
Parameters

Each parameter is represented as one line in the chart.

If your changes are not visible:
- Reload the page manually.
- OR open developer tools and disable cache.

Example: Pie Chart¶

Create a pie chart by mapping:

Field	Placeholder
`value`	`__data[n]`
`name`	`__parameterName[n]`

Example¶

return {
  series: [
    {
      type: 'pie',
      data: __data.map((value, i) => ({
        value: value,
        name: __parameterName[i]
      }))
    }
  ]
};

Example: Line Chart (Time Series)¶

Line charts require data for two axes.

X-Axis (Time)¶

xAxis: {
  type: 'time',
  axisLabel: {
    rotate: 45
  }
}

Use type: 'time' for time series data.
Use the axisLabel property to apply custom formatting and prevent unwanted automatic formatting, such as month names.

Y-Axis (Value + Unit)¶

yAxis: {
  type: 'value',
  name: __parameterUnit[0]
}

The name property displays the unit of the parameter on the axis.

Example: Series data transformation¶

Example transformation:

const seriesData = __time[0].map((t, i) => [t, __data[0][i]]);

Then use:

series: [
  {
    type: 'line',
    data: seriesData
  }
]

Except where otherwise noted, content on this site is licensed under the Siemens Inner Source License .