Skip to main content

ECharts Function

setOption(options) is the primary function in the Apache ECharts library. It is depicted as a square on the right in the schema below. This function gets called by the Apache ECharts panel (the ECharts Function) with only one required parameter options.

The parameter options describes the charts in the JSON format.

To configure the Apache ECharts panel mainly means writing the ECharts Function. Generally, this function contains two parts:

  • JavaScript to read data points from the data source.
  • JSON to specify a graph as options.

Both parts can use parameters passed into the ECharts function. You can find the complete list of parameters in the table below.

See the schema and the print screen below for illustration.

The ECharts function receives many parameters from Grafana and sends one to the setOption() function.
The ECharts function receives many parameters from Grafana and sends one to the setOption() function.

Options

The return clause is where you need to specify the options parameter to be passed into the setOption(options) Apache ECharts function.

Apache ECharts Panel provides the code editor to specify ECharts function.
Apache ECharts Panel provides the code editor to specify ECharts function.

Parameters

ParameterDescription
dataObject containing a time range, series, and request information.
echartsECharts library.
echartsInstanceInstance of the ECharts library. See the example in the screenshot above.
ecStatA statistical and data mining tool for Apache ECharts.
eventBusPublish and subscribe to application events.
locationServiceWorks with browser location and history.
notifyError(['Header', 'Error Message'])Display error notifications.
notifySuccess(['Header', 'Message'])Display success notifications.
replaceVariablesFunction to interpolate variables.
themeTheme object.

To inspect those parameters, use the browser's developer console.

console.error(
data,
theme,
echartsInstance,
echarts,
replaceVariables,
locationService
);

Notifications

You can display success and error notifications when handling specific events.

notifySuccess(["Update", "Values updated successfully."]);
notifyError(["Update", `An error occurred while updating values.`]);