Build directed graph in Grafana using Apache ECharts | Tutorial part 1

Data visualizations can and should be done in style.
I aim to explain everything step-by-step to ensure many more people can get creative and let their imaginations run wild, knowing that everything dreamed of can lend to the analytics dashboard.

LINKS FROM THE VIDEO

CHAPTERS
0:00 Intro
0:39 Who I am
1:09 Demo of the completed directional graph
4:04 Requirements - what was the initial goal?
6:10 Data structure
7:42 Javascript data structure
10:07 ‘Option’ is the key in Apache ECharts
10:25 Where to learn more about ‘option’
11:08 Changing the symbol for the Line chart
11:53 Apache ECharts graph basics

DISCOVER

GET IN TOUCH

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

[mikhail-vl]

Do you like the style of this video? Is it too detailed. Do you want more or less?

[sebastienbujold]

Thanks for all your ideas they're a great add-on to Grafana

[JJS]

Congratulations for this excellent and helpful channel! Content is always great, relevant, consistent and very well presented, well done!
To your question, Mikhail, style and content are about right, sometimes I feel lost in the javascript shallows (e.g. find() map(), ...), but I'm not a programmer at all. Regarding the digraph in this video and the underlying data structure. I buy your argument, Daria, of storing the data in multiple tables, so far I did it differently and I see the flexibility in this approach.
I'm not sure where Grafana Labs will develop the product into, but looking at it from a business risk perspective the eCharts/dynamic text, ...panels seem a deviation, a great one nonetheless. I wouldn't want to miss them.
As asked in the eChart video. I wouldn't spend to much effort with the 3D world. I assume once users have these needs they would want to move to scientific viz with other more powerful tools around. What I would, however, love to see and understand is concerned with trace and log and timeseries data - not the server and micro services, but "human services" and business processes. That's where I'm working in. Say, the journey a client goes from e.g. booking a hotel, traveling to the location, registering at the front desk, payment, maybe a complaint here and there, ..., you get the idea. Human transaction are usually not measured in milliseconds, nor do the respective log/trace/event data exist in a database or at all, and prometheus/Loki/jaeger are dealing with a different world.
That's my 2cents for today, regards, Jörg

[rafa]

Hello, great series of video about echart and plugin. It it possible to share the code of JS used in configuration of your plugin? Now I have to write to my panel from screenshot? It possible to prepare mini tutorial how to use basic configuration possibilites od JS under you plugin. I checked page of apache, but it seems a lot of docs.

[kk]

The required format is only json? Am directly quering the timescaledb and those columns how i will append in js ? Please give me one sample