Apache ECharts panel for Grafana | How to create modern dashboards in Grafana | ECharts Tutorial
Vložit
- čas přidán 4. 07. 2024
- 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.
Become a member of our fan club / @volkovlabs and earn loyalty badges!
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
👉 Documentation: docs.volkovlabs.io
👉 Blog: blog.volkovlabs.io
👉 GitHub: github.com/VolkovLabs
GET IN TOUCH
👉 Issues and questions: github.com/VolkovLabs
👉 GitHub Sponsor: github.com/sponsors/VolkovLabs
👉 LinkedIn: / volkovlabs
#Grafana #GrafanaPlugins #Visualization #ApacheECharts #ECharts #visualización #cuadro - Věda a technologie
Please share your experience using the Apache ECharts panel.
Check out documentation to get started: volkovlabs.io/plugins/volkovlabs-echarts-panel/
Thank you so much for detailed explanation. I love the way you explain everything in detail.
You are welcome! It is great you liked the video.
Fantastic videos! Thank you!
Excellent presentation! Very helpful 👍
OMG... This is just what i need. Thank you! This video is very helpflu
thank you so much for the explanation and for the plugin, i am using it. God bless you.
You are welcome! We just published a new video called Business Charts, which explains all the latest features of this plugin which we renamed recently.
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!
Appreciate the feedback. We love to hear what community is doing with ECharts in Grafana! Let us know if you interested to share your use case, tips&tricks on our blog.
--
Mikhail
What a professional and well-made video and tool. Astonishing.
Thank you! Appreciate the feedback.
🎉 thank you!
Спасибо!
Glad it helps! We are working on a new video for Apache ECharts. It should be ready end of next week.
@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
If you are using Grafana 10, `values.buffer` needs to be updated to `values`. Everything else should work as expected.
Check our documentation for the latest examples: volkovlabs.io/plugins/volkovlabs-echarts-panel/
Thank you very much. My grafana cannot load the unsigned plugin. What variable do i need to declare in the configuration file?
Our plugins are signed for the default Root URL localhost:3000. If you are using a different URL:
1) You can allow unsigned plugins and delete MANIFEST.txt file. Take a look at github.com/grafana/grafana/issues/31125. Unfortunately, official Grafana documentation is broken at the moment.
2) Another option is to use NGINX reverse proxy and keep the default root URL for which the plugin was signed.
3) We can sign the plugin for your domain and help you install and configure it by sponsoring our open-source plugins: github.com/sponsors/VolkovLabs.
Please let us know if you have any issues in the repository github.com/VolkovLabs/volkovlabs-echarts-panel/issues
Deleted manifest file. It works.
Thanks !!!
@@namtruong7516 Great! Let us know if there is anything else.
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?
You need to use replaceVariable function as described in the documentation: volkovlabs.io/plugins/volkovlabs-echarts-panel/variables/
@@volkovlabs oh!thanks!!
@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?
You can return this graphic if results are empty:
```
option = {
graphic: {
elements: [
{
type: 'text',
left: 'center',
top: 'center',
style: {
text: 'No Data',
fontSize: 80,
fontWeight: 'bold',
lineDash: [0, 200],
lineDashOffset: 0,
stroke: '#000',
lineWidth: 1
},
}
]
}
};
```
Awesome! Thats great. Thanks@@volkovlabs
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;
Take a look at the blog post volkovlabs.io/blog/stacked-bar-graph-20221004/ and documentation volkovlabs.io/plugins/volkovlabs-echarts-panel/datasources/
--
Mikhail
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.
Grafana updated the structure of the data frames in Grafana 10. If you use `values.buffer` just update to `values`: github.com/VolkovLabs/volkovlabs-echarts-panel/issues/174
Let me know if it helps.
--
Mikhail.
@@volkovlabs Hi, it does not work.
@@volkovlabs Now I don't have the error message anymore, but still graph is not showing, only the tooltip showing with no data.
@@AhmadFirdausIdris_AFNAN Try to save and refresh? Sometimes chart not updating automatically. Please open an issue in GitHub repository with your code snippet if you still have an issue.
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
You can download the plugin and update the minimum requirements to 7.5 to try it out in the `plugin.json` file ` "grafanaDependency": ">=7.5.0" `. Let me know if it works.
@@volkovlabs it says ''ERROR LOADING"
@@volkovlabs PFA Screenshot drive.google.com/file/d/11zHxv5KkFFmfUGRC5I0zdMUWp8Q8vH7j/view?usp=sharing
@@nolimit2343 Take a look at volkovlabs.io/plugins/grafana/allow-unsigned/
Дарья, здравствуйте!
Использую apache echarts в работе для построения дашбордов.
Столкнулся с проблемой, что если я разрабатываю дашборды на большом мониторе, то человек с маленьким монитором видит другую картинку... Не происходит пропорционального уменьшения размеров дашбордов, вместо этого легенда может наехать на график. Т.е. я не могу быть уверен, что пользователь будет видеть мои дашборды такими же красивыми, какими их вижу я на своём мониторе. Хотелось бы, чтобы графики и текст на графиках и легенде уменьшались(или увеличивались) пропорционально размеру экрана. Возможно ли это как сделать?
We are using grid in percentage to positioning and avoid collisions.
```
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
```
You can check various ECharts examples on echarts.volkovlabs.io
@@volkovlabs возможно ли как-то сделать пропорциональное уменьшение графиков? Например, на маленьком экране 14 шрифт уже не нужен, пусть там будет 10. А сейчас сохраняется размер шрифта и получает пересечение и обрезка слов на маленьком экране.
@@arcanisarcanis2080 Check out the documentation: localhost:3100/plugins/volkovlabs-echarts-panel/instance/#scale-when-resizing
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?
Apache ECharts Panel supports any data source. You can find InfluxDb example in the guest blog: volkovlabs.io/blog/stacked-bar-graph-20221004. Take a look at this video explaining how to work with Data Sources: czcams.com/video/K5YNMSIm9AM/video.html
@@volkovlabs thanks a lot
@@teohkelvin9751 You got it working?
@@volkovlabs still got some confusing
@@teohkelvin9751 You can open an issue in the GitHub repo with the question and we can take a look.
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!
When using transformations, Grafana updates the structure of the data frames. There is a community post with a solution: community.grafana.com/t/sort-the-bar-values-in-a-bar-chart-of-echarts-panel-from-max-to-min-numbers/86765/3. I will update documentation now.
Let me know if it helps.
--
Mikhail
Documentation updated: volkovlabs.io/plugins/volkovlabs-echarts-panel/transformations/
Thank you so much! I’ll give it another shot
Let us know if it works for you.
@@lawhoisun I just realised I posted dev URL. Here is the correct one: volkovlabs.io/plugins/volkovlabs-echarts-panel/transformations/
omg, grafana is fucking impossible
We make a lot of things possible with our plugins. Apache ECharts, Dynamic Text and others are good examples what is possible with Grafana.
Table output is possible in echarts ?
What do you mean table output? Legend or Table view of data? There is a table view in the toolbar.
@@volkovlabs I want to display my output in table format which is row and column format. Reason is I want to download that as png format
@@kk77781 Unfortunately, it's not supported: github.com/apache/echarts/issues/6058