Custom Chart

Custom charts allow for the display of data in graphical format based on user-defined logic.

How it Works

Custom chart widget

Once the logic for data retrieval is entered, the data will be displayed on the widget.

What sets the custom chart apart from others is that the data source can be external, internal, both, or even fabricated. Moreover, multiple charts can be combined within the same widget.

This widget is compatible with eCharts library version 5. Multiple examples can be accessed via the following link: eCharts

Configuration

General

  • Boxed: widget will be displayed with background in dahsboard.
  • About: widget description in Markdown format.
  • Title: widget title. It can be configured to remain fixed in the widget or only be displayed when it receives focus.
  • Toolbar: configures the behavior of the widget bar on the dashboard, allowing you to hide it, hide it when not in use, or leave it always visible.
  • Refresh Frequency: allows configuring the data refresh frequency displayed in the list.
  • Extra actions: allows user to add new specific actions to the widget with your own code.

Extra action config Extra action config

You can add a new one by pressing the New button.

Once you added a custom action it can be modified later by pressing the name in the list.

In order to remove the custom action click the delete icon button on the right.

In extra actions you can write your own code were you can open other dashboards, entities dashboards or execute wizards.

Extra action code Extra action code

You can find all available functions and methods in Extra parameters

  • Show widget filters instructs the widget to display its filters. These filters will be passed as an additional parameter to the data retrieval function.
Custom chart code configuration

Here, you input the necessary code to obtain the information to be displayed.

Depending on the selected options, the parameters received by the function will be displayed.

The function must always return a JSON object that is compatible with eCharts’ chart configuration.

Every time the code is updated, it must be evaluated where a preview of the result can be seen.

Custom chart code preview

Function

Depending of the configuration receives the following parameters:

  • entityData when the users uses a dashboard template
  • filters introduced by the user. These filters are:
    • generic widget generic filter
    • period widget date period filter
  • callback it is used for send data to the table when the api/http petitions are promised

An example of filters: { "filters": { "generic": "filter introduced by the user", "period": {"from":"2023-03-27T10:59:27+02:00","to":null} } }