Sineos opened an issue in the Apache ECharts repository asking for help with Stacked Bar Graph:
"I have three queries returning aggregated monthly values, which I would like to display as a Stacked bar graph. Turning it into a simple bar graph works but dividing the data too differently styled bars just ends up with errors."
The issue was successfully resolved, and Sineos created this example and attached
- Apache ECharts function,
- InfluxDB queries to retrieve data,
- Ready-to-go Dashboard using the Static Data Source.

InfluxDB Data Source
createEmpty: true
makes sure that the data of the individual bar segments stay aligned when data is missing in the series.set(key: "Source", value: "Self Consumption")
manipulates the field used for naming the series.
Query A
from(bucket: "home")
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|> filter(fn: (r) => r["_measurement"] == "vzlogger")
|> filter(fn: (r) => r["Source"] == "SML_Energy_Out")
|> filter(fn: (r) => r["_field"] == "Energy")
|> aggregateWindow(every: 1d, fn: sum, createEmpty: true)
|> set(key: "Source", value: "Grid Feed")
Query B
from(bucket: "home")
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|> filter(fn: (r) => r["_measurement"] == "vzlogger")
|> filter(fn: (r) => r["Source"] == "SML_Energy_In")
|> filter(fn: (r) => r["_field"] == "Energy")
|> aggregateWindow(every: 1d, fn: sum, createEmpty: true)
|> set(key: "Source", value: "Grid Consumption")
Query C
from(bucket: "home")
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|> filter(fn: (r) => r["_measurement"] == "vzlogger")
|> filter(fn: (r) => r["Source"] == "SelfConsumption")
|> filter(fn: (r) => r["_field"] == "Energy")
|> aggregateWindow(every: 1d, fn: sum, createEmpty: true)
|> set(key: "Source", value: "Self Consumption")
Apache ECharts function
loading...
Dashboard to Try
The following dashboard is a ready-to-go example that can be imported into Grafana as JSON. It requires
- Static data source
- Apache ECharts visualization panel plugin.
Make sure to install the Static data source via the Plugins Configuration and then add it to the Data Sources.
Import dashboard
Once the Static data source is installed and added and the Apache ECharts visualization panel is installed, go to the Dashboard menu and select Import.
In the Import dashboard window, insert the JSON code into the Import via the panel JSON field. Copy the JSON code from below.

Specify the dashboard name and Static data source, and click Import.

You should see the visualization working right away.

Dashboard
loading...
Any feedback and comments are welcome. Feel free to challenge us with your questions. It helps us to stay sharp!