Hello and welcome. My name is Daria Volkova, and this channel helps you utilize
Grafana to its full potential. Today I am covering the updated Apache
ECharts Panel. With the newest release hot off the press, this plugin
might seem to offer too much. Is it possible to get lost
in all existing features? Starting from the unbeatable
visualization variety, where you can attach the Theme file
to streamline your styling process. What about having 3d at the ready, along
with the built-in statistical functions? Also, ECharts can work with DOM, where
you can access HMTL elements directly and create elements like this button
or the dropdown for filtering purposes. This video demonstrates all features I
mentioned and many others. Along the way, I share helpful resources with
more information about this plugin. Feel free to use the chapters
from the description down below to jump to the topic you are most interested in! Are you ready?
Let's go! Let's start with architecture. First off, the Apache ECharts
is a charting library. Apache ECharts panel brings Apache
ECharts functionality into Grafana. Liquid Fill, Statistics, Maps, and 3D
are four Apache ECharts extensions we embedded into the plugin. There is also
very convenient Theme functionality. At some point, we realized that more
is not always better and created a lightweight variation of this plugin.
It is called Apache ECharts Panel Lite. It has the same core functionality
and no embedded extensions. The lite variance of the plugin is twice
smaller than the regular plugin. Also, this one is signed as Private, and the
regular one is signed as a Community plugin. This means you can install the
regular variance from the Grafana catalog. The Lite plugin is an excellent choice for IOT
devices and application plugin development. If the extensions do not bother you, the regular
plugin is your choice. Everything is included. Alright, so we have Lite and regular variations, and the main difference is in
extensions and the Theme functionality. What does the core functionality include?
I added a red suitcase to symbolize what these two have in common. Here
you go, visualization variety, Interactive display, DOM, Event Handlers,
and Streaming are all part of the core. Now I will demonstrate it all, one by one. Remember to like this video. It is the easiest way to say thank you for our work. Subscribe
and comment to keep this channel going! Visualization variety. Go to the
echarts.volkovlabs.io to witness what this variety is about. Click on any of these groups. I
click Bar and review examples in the Bar category. And this is what they are, just examples, the
template you can start with. When you spot the one that resembles what your data should look
like, go into Edit mode. I will open that one where stacked bars are mixed with regular bars,
one data series is much thinner than the rest, and the bonus line highlights the growth
between two time points (Monday and Friday). Copy the code from the Monaco
Code editor. Open my Grafana, add a visualization, select Apache
Echarts, and insert to code right here. That's it. Now I have StackedColumn
chart visualization on my dashboard and can further introduce as
many adjustments as needed. All examples have hardcoded data in them. Watch
this video from our channel to learn how to use data from the connected data source.
Alternatively, use our documentation page to review the snippets of the data retrieval scripts. The link is
in the description box down below. My favorite visualization of all time is
a graph. Here is what the examples from the Apache ECharts library look like,
and here is the graph we built for our internal purposes. The project is open to the
public. You are welcome to check it out, too. For instance, if I click on the
Apache EChart panel here, I get to this dashboard. All Volkov Labs activity related to this plugin. Plugin releases, Youtube
videos, blog posts, and projects like the one with tons of examples I showed in the previous chapter
and the LIVE project, the one we are in right now. Interactive display and DOM
By Interactive display, I mean the Apache ECharts panel's capability
to dynamically switch visualization types depending on the received data.
For instance, if in the data I have device1, then display a TimeSeries,
if I have device2, then show a bar chart. Alternatively, a visualization switch can be
triggered by a user. For this, there are two ways. One is using Apache ECharts Tool Box. It
looks like a set of buttons with vertical or horizontal orientation. You define an icon in
SVG format and onclick action for each button. Among actions like saving
visualization as an image, switching to a table view, and lasso select,
you also can have a function to switch to another visualization. In my example, I switch
between stacked bars and side-by-side bars. The other possible way to provide users with more interactivity is working with
DOM (document object model). DOM is advanced but is far more flexible. You
can create any input elements in the graph area, including buttons with custom icons,
dropdowns, radio buttons, text elements, etc. Event Handlers allow you to add more life to your
visualizations. I can click on this calendar plus graph visualization to trigger the popup window. Like this.
In this example, when I select a time range, two things follow. The line zooms in,
and the Grafana time range updates. To archive that, I copied the code from
our documentation, Event handling page, on mouse click code and then inserted it here,
in the Monaco code editor, at the very top. For the second example, I copied the whole
piece from our documentation and inserted it into the code editor. You can find more
information about actions and events on the Apache ECharts page here.
I will leave the link down below as well. Streaming
Streaming is the feature available in both variances, Lite and Regular.
Streaming displays the data as it changes in real-time.
As you know, Grafana supports streaming. And now you also know that any Apache
ECharts visualization can be updated in real-time, meaning any of ECharts visualization you
can come up with can support Streaming. In my examples here, I stream data into
TimeSeries and Gauge visualizations. If you are familiar with WebSocket API data
source, then here is an example where I connect Apache ECharts Bar visualization
to it and have these nice dancing bars. Themes configuration is only available in the Regular variance of the Apache ECharts plugin.
Themes convert a rusty, inconsistent style into an elegant design.
To create a theme, you can use the Theme builder. For that, go to echarts.apache.org,
then the 'Resources' menu, 'Theme builder'. Here you can choose from pre-configured
themes as they are or modify them using those parameters here.
When you are satisfied with the look, click download, then the 'JSON version'
tab and copy button. Go to your Grafana, and open a visualization in edit mode. In the
'Apache ECharts' Section, set 'Theme' to 'Custom'. That will open a configuration window below.
Go ahead and insert from the clipboard. Here, the visualization immediately applies
the Theme and looks much better. Using Themes is a huge step towards a consistent and memorable design that can make your
visualization instantly recognizable. Let's move to the 4 extensions that are embedded
into the regular Apache ECharts version. Statistics, I have an excellent detailed
video about that extension. It is still up to date with all major ins
and outs, examples, and demos. Check it out. 3d. Yes, 3d is possible in Grafana
if you were unaware of this just yet.
As the same implies, it allows
you to build 3d visualizations. Here are some examples to give you the
slightest idea of the possibilities. The question is, do you guys need a
separate video about 3d extension? Please, let me know in the comments
below. Liquid Fill extension. To learn
what this extension can do, go to the echarts.volkovlabs.io, scroll
down, click on the Liquid Fill group. So, this visualization is moving waves. The wave
can move inside any shape. For instance: circle, square, triangle, pin or your SVG
image, I have a fish and a rocket here. The moving wave visualization is calming
and stylish. It could be an intriguing addition to your home page or maybe
even a wall in the reception area. Maps functionality.
For Maps functionality, I wanted to mention
GeoJSON map and Google Maps. GeoJSON has two embedded maps - the USA
and the world map. We use the world map in our Website Analytics project to
track activities on our web resources. You can add more granularity by loading maps from external resources in the GeoJSON format. If, for instance, I load a detailed USA
map, I can zoom in, switch between maps, add any ECharts visualization on top using
Geo coordinates (for instance, a bar or pie next to a city of interest OR even can draw
a route, like a truck route or a ship route). Google Maps allow you to use
Google Maps API to display maps Similar to GeoJSON, you can add any other ECharts visualization on top of the map.
show pie next to the factory, etc I hope I have provided enough information to
get you started with the Apache ECharts panel for Grafana. Here are some helpful
resources to advance you further: My other videos about this plugin
on our channel. We have ten more, each exploring the topic from a different angle.
'Release' project to look at this plugin from a developer's point of view to answer questions like
how many days have passed since the last release, how many open issues are still
outstanding in Github, and others. LIVE project. LIVE collects all activities
related to every plugin we ever created, including the Apache ECharts panel.
If here I click on the Apache ECharts, I can get the detailed diagram along with
the number of total and daily downloads. VolkovLabs blog, these posts.
Documentation on our website. Documentation on the Apache
EChart libraries website. And this is the time when I remind
you to like this video! And yes, subscribe to our channel too! It is important to
us. The increasing number of followers inspires us. If we help you, write a comment.
We value comments more than you know! That's all for now. Thank you for
watching, and see you next time!
