Skip to main content

Context Parameters

context.echarts​

Apache ECharts library.

Usage​

context.echarts;

Example​

const libraryECharts = context.echarts;

context.ecStat​

A statistical and data mining tool for Apache ECharts.

Usage​

context.ecStat;

Example​

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

Visual Editor​

editor.dataset​

ECharts dataset in Visual mode.

Usage​

context.editor.dataset;

Example​

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​

context.editor.series;

Example​

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",
  },
};

Panel​

panel.chart​

Instance of the Apache ECharts library.

Usage​

context.panel.chart;

Example​

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​

context.panel.data;

Example​

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

Grafana​

grafana.eventBus​

Publish and subscribe to application events.

Usage​

context.grafana.eventBus;

Example​

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

grafana.locationService​

The locationService works with the browser location and history.

Usage​

context.grafana.locationService;

Example​

context.grafana.locationService.reload();

const history = context.grafana.locationService.history;

grafana.replaceVariables()​

The replaceVariables() function to interpolate variables.

Usage​

context.grafana.replaceVariables();

Example​

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

grafana.notifyError([header, message])​

Displays an error notification.

Usage​

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

Example​

//
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​

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

Example​

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

Arguments​

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

grafana.theme​

Contains grafana Theme object.

Usage​

context.grafana.theme;

Example​

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

grafana.refresh()​

Function to refresh dashboard panels using application events.

Usage​

context.grafana.refresh();