Apache ECharts panel for Grafana | How to create modern dashboards in Grafana | ECharts Tutorial

Apache ECharts is a mighty tool. You do not need a senior Javascript developer to start displaying modern-looking animated visualizations. And if your use case is unique, Apache ECharts provides an excellent venue to develop visualizations of any complexity.

The Apache ECharts panel for Grafana is a bridge that has been missing and finally arrived. You can use the benefits of two great open-source products - Grafana and Apache ECharts in one solution tailored to your needs. This video has all the details, along with the easy-to-follow tutorial.

CHAPTERS
0:00 Intro
0:31 Where does Grafana come from
0:45 Three major Grafana components
1:08 The excellent Grafana feature
2:07 Introducing Apache ECharts
2:42 Apache ECharts demo
4:45 How to Use Apache ECharts in Grafana - introducing ECharts Panel
4:51 Step 1
5:15 Step 2
05:21 Step 3
05:33 Step 4
05:55 Step 5
06:10 Step 6
06:41 First redo - Grafana bar chart into Apache ECharts bar
08:38 Second redo - Grafana clock into Apache ECharts clock
08:54 How to use an SVG picture

DISCOVER

GET IN TOUCH

#Grafana #GrafanaPlugins #Visualization #ApacheECharts #ECharts #visualización #cuadro

[volkovlabs]

Please share your experience using the Apache ECharts panel.

[thz-code]

Thank you! we have a lots of charts written using echarts and we are using Grafana more and more. this allows us to reuse what we have. the video is simple and easy to follow. Very helpful!

[mmatthieu]

What a professional and well-made video and tool. Astonishing.

[Bigman]

Excellent presentation! Very helpful 👍

[LearningWithNisa]

Thank you so much for detailed explanation. I love the way you explain everything in detail.

[rubinwong]

OMG... This is just what i need. Thank you! This video is very helpflu

[felipegutierrezortiz]

thank you so much for the explanation and for the plugin, i am using it. God bless you.

[opgvbwi]

@volkovlabs
This is awesome stuff. I have use echarts for multiple panels now. Is there a way we can show "No Data" when the result of the query is NULL with this plugin?

[namtruong]

Thank you very much. My grafana cannot load the unsigned plugin. What variable do i need to declare in the configuration file?

[tamil-akilanamudhan]

Thank you, I am Using Grafana9.0, And the databse is influxdb, I can't able to differentiate the Data for for each refId( Queries A, B, C), as my requirment is to compare the Value of each refId and then Need to chnage the Colour automaticaly.

const series = data.series.map((s) => {
const sData = s.fields.find((f) => f.type === 'number').values.buffer;
const sTime = s.fields.find((f) => f.type === 'time').values.buffer;

[kavipriya]

@volkovlabs I have some troubleshooting erros ECharts Execution Error
data is not defined I am following exactly this video. Don't know whats going wrong

[ocgyuje]

In the Apache ECharts code (function)
I want to use ${__to} and ${__from} of grafana Variable, but it doesn't seem to work.
Is there a way to use them?

[AhmadFirdausIdris_AFNAN]

Hi. I have been using your Echart Panel for almost a year for my Grafana Cloud, thank you very much. However, Grafana has upgraded my version to the latest stable version last week, and since then the Echart Panel is no longer working, giving this error message "ECharts Execution Error
Cannot read properties of undefined (reading '0')". Appreciate it if you could share some input on the error.

[nolimit]

how can i use this plugin in Grafana 7.5? Please suggest. Since Grafana has changed their licence to APGLv3 in later version after 7.5

[teohkelvin]

after i copy the format then i paste on grafana but, my data is from InfluxDB so the query is like yours different then i can't get any own data dont know why ? is it because not support for influxDB?

[arcanisarcanis]

Дарья, здравствуйте!
Использую apache echarts в работе для построения дашбордов.
Столкнулся с проблемой, что если я разрабатываю дашборды на большом мониторе, то человек с маленьким монитором видит другую картинку... Не происходит пропорционального уменьшения размеров дашбордов, вместо этого легенда может наехать на график. Т.е. я не могу быть уверен, что пользователь будет видеть мои дашборды такими же красивыми, какими их вижу я на своём мониторе. Хотелось бы, чтобы графики и текст на графиках и легенде уменьшались(или увеличивались) пропорционально размеру экрана. Возможно ли это как сделать?

[lawhoisun]

Hi I can’t seem to get the panel to work when there are Grafana transformations applied. Is there a special way to make it work? It doesn’t seem to read data values after transformations are applied. When taking directly from queries, it is fine.
Thanks in advance!