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
Thank you very much, however i get Echarts Execution Error "echarts is not definied" each time I want to use echarts.init or something else and I cannot use import statement outside a module if I try to import in in the code
We implemented multiple breaking changes in the Business Charts panel since first releases of the Apache ECharts panel. Please refer to the latest videos and documentation: volkovlabs.io/plugins/business-charts/options/
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.
@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/
Hi, I am trying something similar and I am trying to populate data like this: data.series.map((s) => { apples = s.fields.find((f) => f.name === "apple").values.buffer; oranges = s.fields.find((f) => f.name === "orange").values.buffer; }); but it is not working properly and when I am trying to do apples.slice() I am getting the error : `Cannot read properties of undefined` can you help me with the error?
Check out the latest tutorials if you use Grafana 10/11: volkovlabs.io/plugins/business-charts/tutorials/. `values.buffer` should be replaced with `values` in the latest Grafana releases. Also, we recently introduced Visual Editor, which helps parse data source data. ruclips.net/video/vda3jbtLnMM/видео.html
@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?
Дарья, здравствуйте! Использую 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. А сейчас сохраняется размер шрифта и получает пересечение и обрезка слов на маленьком экране.
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?
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.
@@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.
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.
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: ruclips.net/video/K5YNMSIm9AM/видео.html
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 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
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
![Eminem - Fuel (feat. JID) [Official Lyric Video]](http://i.ytimg.com/vi/t5H_CewqpKA/mqdefault.jpg)
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.
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 very much, however i get
Echarts Execution Error "echarts is not definied" each time I want to use echarts.init or something else and I cannot use import statement outside a module if I try to import in in the code
We implemented multiple breaking changes in the Business Charts panel since first releases of the Apache ECharts panel.
Please refer to the latest videos and documentation: volkovlabs.io/plugins/business-charts/options/
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.
@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/
Excellent presentation! Very helpful 👍
Hi, I am trying something similar and I am trying to populate data like this:
data.series.map((s) => {
apples = s.fields.find((f) => f.name === "apple").values.buffer;
oranges = s.fields.find((f) => f.name === "orange").values.buffer;
});
but it is not working properly and when I am trying to do apples.slice() I am getting the error : `Cannot read properties of undefined` can you help me with the error?
Check out the latest tutorials if you use Grafana 10/11: volkovlabs.io/plugins/business-charts/tutorials/. `values.buffer` should be replaced with `values` in the latest Grafana releases.
Also, we recently introduced Visual Editor, which helps parse data source data. ruclips.net/video/vda3jbtLnMM/видео.html
OMG... This is just what i need. Thank you! This video is very helpflu
@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
Fantastic videos! Thank you!
Дарья, здравствуйте!
Использую 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
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!!
🎉 thank you!
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.
Спасибо!
Glad it helps! We are working on a new video for Apache ECharts. It should be ready end of next week.
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/
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
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: ruclips.net/video/K5YNMSIm9AM/видео.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.
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 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/
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.
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.