Mapping multiple series from queries to Les Miserables chart

Grafana Dashboards
,
1

Hi all, @mikhailvolkov

Using results from 3 Elastisearch queries to populate the Les Miserables chart. Working from the template provided by Volkov Labs but having trouble converting from the static data to mapped series.

I’m trying to build the series ‘graph’ with sub-series ‘nodes’, ‘links’, and ‘categories’ inside it to mimic the static data from the example.

eChart

Getting this error:
image

Could anyone provide suggestions on next steps/suggestions? I did watch the video [How to use Data Source in Apache ECharts in 90 seconds | Grafana Data attribute … but it was not specific enough for what I’m trying to do.

Thanks,
Christine

1 Like
2

@christinevonschrott1 nodes, links, and categories are empty because you did not return anything from the map function. Take a look at the documentation: Data Sources | Volkov Labs

Have you seen our 2 part tutorials on how to display Directed Graphs, it’s explained there in details: Directed Graph | Volkov Labs

Let me know if it helps.

3

Hi @mikhailvolkov,
Thank you for the links. Your videos are excellent! I’m a novice and have no JS experience so I’m having trouble with the return statement.

Would I need to create a return for each series inside it’s code body? (Started over just trying to create the nodes to get that code working but still getting errors. Ex:

image
image

4

@christinevonschrott1 There are multiple Les Miserables charts in the examples. Which one are you trying to do?

graph.nodes is undefined and you can’t do forEach of undefined - exactly as Error said.

5

Thanks for your reply. Trying to build this graph:
image

I’ve declared arrays, mapped from my queries and returned the results. Not sure how to push all the arrays into the ‘graph’ array (per the example code). Am showing blank display when I remove the ‘graph’ prefix from the code.

image
image720×500 23.6 KB

image

6

Documentation was updated with the example: Data Sources | Volkov Labs