Apache ECharts Panel 4.3.0/4.3.1

We released a new version of the Apache ECharts Panel 4.3.0/4.3.1 for Grafana. This feature release

• Added Alert State and Annotations.
• Added `getDataSourceSrv` parameter to retrieve the entry point to data sources.
• Updated USA and World GeoJSON.
• Updated to the latest Grafana 9.4.7 toolkit and Apache ECharts 5.4.2.

Grafana Catalog

During the Grafana teams review the getDataSourceSrv parameter was removed due to security reasons in v4.3.1.

The plugin was updated in Grafana Catalog on April 24, 2023.

100k downloads

The Apache ECharts panel was downloaded more than 100,000 times. Apache ECharts is not plug-an-play and has a learning curve. Our YouTube tutorials and documentation help to experience unbeatable customization capabilities.

100,000 downloads in 6 months since we forked the panel.

Alert State and Annotations

We added support for Annotations in Apache ECharts using mark lines. Data for mark lines should be retrieved from the data as explained in the documentation.

const annotations = [];
data.annotations.map((a) => {
  a.source.forEach((source) =>
    annotations.push({
      xAxis: source.time,
      label: source.text,
      lineStyle: {
        color: source.color,
        width: 2,
      },
    })
  );
});

/**
 * Data Sources
 */
const series = data.series.map((s) => {
  const sData =
    s.fields.find((f) => f.type === "number").values.buffer ||
    s.fields.find((f) => f.type === "number").values;
  const sTime =
    s.fields.find((f) => f.type === "time").values.buffer ||
    s.fields.find((f) => f.type === "time").values;

  return {
    name: s.refId,
    type: "line",
    showSymbol: false,
    areaStyle: {
      opacity: 0.1,
    },
    lineStyle: {
      width: 1,
    },
    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
    markLine: {
      data: annotations,
      label: {
        show: false,
      },
      symbol: ["none", "none"],
    },
  };
});

Annotations in Apache EChart looks similar to Time Series panels.

Entry point to data sources

Security

During the Grafana teams review this functionality was removed due to security reasons in v4.3.1.

We are experimenting with a safe approach in the Data Manipulation plugin and will look into implementing it for the Apache ECharts.

Apache ECharts panel allows retrieving the entry point to data sources. With the data source instance, you can execute any methods provided by the data source.

async () => {
  const targets = data.request?.targets;
  if (targets.length && targets[0].datasource) {
    const datasource = await getDataSourceSrv().get(targets[0].datasource);
    notifySuccess(["PostgreSQL Version", await datasource.getVersion()]);
  }
};

GeoJSON updates

GeoJSON files for USA and World were synchronized to the native maps found in Grafana GeoMap. Now you can easily switch to Apache ECharts from GeoMap to show visual maps as we did for the Website Analytics blog.

GeoJSON Map displays requests from users around the world.

Panel Variables

We continue to experiment with adding DOM elements directly to the Apache ECharts container to add interactivity. This time we added a select list to choose an option to update Apache ECharts or directly interact with the data source using an entry point.

Add a select list to select an option and update Apache EChart options.

docs/volkovlabs-echarts-panel/select.js

loading...

Getting Started

Apache ECharts visualization panel can be installed from the Grafana Catalog or utilizing the Grafana command line tool.

For the latter, use the following command.

grafana-cli plugins install volkovlabs-echarts-panel

YouTube Tutorial

The Apache ECharts plugin is a visualization panel for Grafana that allows you to incorporate the popular Apache ECharts library into your Grafana dashboard.

How to create modern dashboards in Grafana.

Apache ECharts is one of the three plugins that make Grafana complete. Dynamic Text, Data Manipulation and Apache ECharts are all you need to create functional real-world web applications.

Dynamic Text, Data Manipulation and Apache ECharts plugins.

Release Notes

Breaking changes in 4.3.1

• Due to security reasons getDataSourceSrv parameter was removed (#156)

Features / Enhancements

• Update to Grafana 9.4.7 (#146)
• Add getDataSourceSrv parameter to retrieve the entry point to data sources (#146)
• Update to Apache ECharts 5.4.2 (#147)
• Update USA and World GeoJSON used in GeoMap (#154)
• Add Alert State and Annotations (#155)

Apache ECharts 5.4.2

• [Feature][bar] Support borderRadius for polar bar and its background. #17995 (Ovilia)
• [Feature][i18n] Add Turkish(tr_TR) translation. #18012 (partitect)
• [Feature][i18n] Add Vietnamese(vi_VN) translation. #18279 (nghiepdev)
• [Fix][bar] Polar bar animation should start from r0 rather than 0. #17997 (Ovilia)
• [Fix][marker] Fix abnormal range of markArea in bar series. #18229 (Ovilia)
• [Fix][line] Fix labels don't show in line series when ssr is enabled. #18032 (plainheart)
• [Fix][svg] Fix defined CSS doesn't work due to unexpected encoding for style tag. #982 (plainheart)
• [Fix][sunburst] Fix labels might upside down in radial layout. #18240 (susiwen8)
• [Fix][dataset] Fix chart can't render when using object array and object item contains a property named length. #18276 (susiwen8)
• [Fix][tooltip] Fix tooltip still disappears after leaving the tooltip even if alwaysShowContent was enabled. #18221 (jianghaoran116)
• [Fix][text] Charsets like Cyrillic should break word the same as Latin. #973 (Ovilia)
• [Fix][type] Add missing treePathInfo property into sunburst formatter callback and add missing data option into SunburstSeriesOption. #18310 (plainheart)
• [Fix][type] Add missing callback function type for the symbol option of tree series. #18070 (ChepteaCatalin)

Feedback

We love to hear from you. There are various ways to get in touch with us.

• Ask a question, request a new feature, and file a bug with GitHub issues.
• Subscribe to our YouTube Channel and add a comment.
• Sponsor our open-source plugins for Grafana with GitHub Sponsor.
• Star the repository to show your support.