Documentationbreadcrumb arrow Pluginsbreadcrumb arrow Business Chartsbreadcrumb arrow Charts functionbreadcrumb arrow Context parameters
Grafana Cloud Enterprise Open source

Context parameters

context.echarts

Apache ECharts library.

Usage

JavaScript 
context.echarts;

Example

JavaScript 
const libraryECharts = context.echarts;

context.ecStat

A statistical and data mining tool for Apache ECharts.

Usage

JavaScript 
context.ecStat;

Example

JavaScript 
context.echarts.registerTransform(context.ecStat.transform.regression);

Visual Editor

editor.dataset

ECharts dataset in Visual mode.

Usage

JavaScript 
context.editor.dataset;

Example

JavaScript 
return {
  dataset: context.editor.dataset,
  series: context.editor.series,
  grid: {
    bottom: "3%",
    containLabel: true,
    left: "3%",
    right: "4%",
    top: "4%",
  },
  toolbox: {
    left: "center",
    feature: {
      dataZoom: {
        yAxisIndex: "none",
      },
      restore: {},
    },
  },
  xAxis: {
    type: "category",
  },
  yAxis: {
    type: "value",
  },
};

editor.series

ECharts series in Visual mode.

Usage

JavaScript 
context.editor.series;

Example

JavaScript 
return {
  dataset: context.editor.dataset,
  series: context.editor.series,
  grid: {
    bottom: "3%",
    containLabel: true,
    left: "3%",
    right: "4%",
    top: "4%",
  },
  toolbox: {
    left: "center",
    feature: {
      dataZoom: {
        yAxisIndex: "none",
      },
      restore: {},
    },
  },
  xAxis: {
    type: "category",
  },
  yAxis: {
    type: "value",
  },
};

Grafana

grafana.eventBus

Publish and subscribe to application events.

Usage

JavaScript 
context.grafana.eventBus;

Example

JavaScript 
const subscriber = eventBus.getStream(RefreshEvent).subscribe(() => {
  // to do
});

grafana.locationService

The locationService works with the browser location and history.

Usage

JavaScript 
context.grafana.locationService;

Example

JavaScript 
context.grafana.locationService.reload();

const history = context.grafana.locationService.history;

grafana.notifyError([header, message])

Displays an error notification.

Usage

JavaScript 
context.grafana.notifyError([header, message]);

Example

JavaScript 
//
context.grafana.notifyError(["Error Title", `Show error message`]);

Arguments

  • header string. Error title
  • message string. Error message

grafana.notifySuccess([header, message])

Displays a success notification.

Usage

JavaScript 
context.grafana.notifySuccess([header, message]);

Example

JavaScript 
context.grafana.notifySuccess(["Success Title", `Success message`]);

Arguments

  • header string. Success title
  • message string. Success message

grafana.refresh()

Function to refresh dashboard panels using application events.

Usage

JavaScript 
context.grafana.refresh();

grafana.replaceVariables()

The replaceVariables() function to interpolate variables.

Usage

JavaScript 
context.grafana.replaceVariables();

Example

JavaScript 
const variable = context.grafana.replaceVariables("${variable}");
console.log(variable.toUpperCase());

grafana.theme

Contains grafana Theme object.

Usage

JavaScript 
context.grafana.theme;

Example

JavaScript 
const theme = context.grafana.theme;
console.log(theme);

Panel

panel.chart

Instance of the Apache ECharts library.

Usage

JavaScript 
context.panel.chart;

Example

JavaScript 
context.panel.chart.on("brushSelected", function (params) {
  var brushed = [];
  var brushComponent = params.batch[0];
  for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
    var rawIndices = brushComponent.selected[sIdx].dataIndex;
    brushed.push("[Series " + sIdx + "] " + rawIndices.join(", "));
  }
  context.panel.chart.setOption({
    title: {
      backgroundColor: "#333",
      text: "SELECTED DATA INDICES: \n" + brushed.join("\n"),
      bottom: 0,
      right: "10%",
      width: 100,
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
    },
  });
});

panel.data

Object containing a time range, series, and request information.

Usage

JavaScript 
context.panel.data;

Example

JavaScript 
context.panel.data.series.map((s) => {
  categories = s.fields.find((f) => f.name === "Category").values;
  values = s.fields.find((f) => f.name === "Value").values;
});