Documentationbreadcrumb arrow Pluginsbreadcrumb arrow Business Chartsbreadcrumb arrow Charts function
Grafana Cloud Enterprise Open source

Charts function

The setOption(options) function is the primary method in the Apache ECharts library. The Business Charts panel calls this function with one required parameter: options.

The options parameter describes the chart in JSON format.

Getting started

To configure the Business Charts panel, write the Charts Function. This function usually has 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 Charts function. The following table lists all available parameters.

See the following schema and screenshot for illustration.

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

Options

Specify the options parameter in the return clause. This parameter is passed to the setOption(options) function in the Apache ECharts library.

The Business Charts panel provides the code editor to specify the Charts function.

Parameters

ParameterDescription
context.echartsApache ECharts library.
context.ecStatA statistical and data mining tool for Apache ECharts.
context.editor.dataset[Visual mode] ECharts dataset.
context.editor.series[Visual mode] ECharts series.
context.grafana.eventBusPublish and subscribe to application events.
context.grafana.locationServiceWorks with browser location and history.
context.grafana.notifyError(['header', 'message'])Display error notifications.
context.grafana.notifySuccess(['header', 'message'])Display success notifications.
context.grafana.refresh()Function to refresh dashboard panels using application events.
context.grafana.replaceVariables()Function to interpolate variables.
context.grafana.themeTheme object.
context.panel.chartInstance of the Apache ECharts library. See the example in the screenshot above.
context.panel.dataObject containing a time range, series, and request information.

Inspect

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

JavaScript 
console.log(
  context.panel.data,
  context.grafana.theme,
  context.panel.chart,
  context.echarts,
  context.grafana.replaceVariables,
  context.grafana.locationService
);

Notifications

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

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