Attempt to build Node Graph using Business Charts. ECharts Execution Error data is not defined

[unclegasya]

• Grafana v11.2.2 (c47b921ef4)

• What are you trying to achieve?
  Want to build a job flow Node Graph using volkovlabs Business Charts. Ultimately, nodes will have fixed coordinates.

• How are you trying to achieve it?
  There is a Postgres DB with 2 tables: nodes and edges. grafana-postgres-datasource is used as a data source.
  SELECT statements are simple and produce necessary basic results.:
  connections:
  select source, target from edges where env = 'nea' and batch_dt = '2024-10-23'
  nodes:
  select title, color from nodes where env = 'nea' and batch_dt = '2024-10-23'

Pulling correct data confirmed in Table view:

The same data (definitely slightly reformatted) works with graphviz directional graph.

I used code similar to the one from Daria in her video with adjustments.

let sources = [];
let targets = [];

let titles = [];
let colors = [];

context.panel.data.series.map((s) => {
  if (s.refId === "connections") {
    sources = s.fields.find((f) => f.name === "source").values;
    targets = s.fields.find((f) => f.name === "target").values;
  }
  else if (s.refId === "nodes") {
    titles = s.fields.find((f) => f.name === "title").values;
    colors = s.fields.find((f) => f.name === "color").values;
  }
});

const connections = sources.map(function (value, i) {
  return { source: value, target: targets[i] };
});

const nodes = titles.map(function (value, i) {
  return { title: value, color: colors[i] };
});

return {
  series: [
    {
      type: "graph",
      layout: "none",
      animation: true,
      data: nodes,
      edges: connections
    }
  ]
};

• What happened?
  Getting error as in the Subject.
  I read couple posts and pasted console.log(data) at the very top of the code. I have to admit Java/JavaScript are not my languages and I have a limited knowledge how to troubleshoot code in the browser. So if someone can give clear step-by-step instructions for Firefox or Chrome I will appreciate.

• What did you expect to happen?
  I would expect a data structure populated and at least some nodes (with default shape, etc.) to display. Then I can work on nodes/edges properties to tune up. I do not care about defining x/y coordinates at this point.
  The concept works for static data.
  

  

return {
  tooltip: {},
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'graph',
      layout: 'none',
      symbolSize: 50,
      roam: true,
      force: {
        edgeLength: 130
      },
      label: {
        show: true
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 20
      },
      data: [
        {
          id: '1',
          name: 'sod',
          x: 0,
          y: 0
        },
        {
          id: '2',
          name: 'extract',
          x: -300,
          y: 500
        },
        {
          id: '3',
          name: 'ksync',
          x: -100,
          y: 500
        },
        {
          id: '4',
          name: 'dat_prepare',
          x: 100,
          y: 500
        },
        {
          id: '5',
          name: 'symlink_prepare',
          value: 'Started: Finished',
          x: 300,
          y: 500
        },
        {
          id: '6',
          name: 'release',
          x: 0,
          y: 1000
        }

      ],
      // links: [],
      links: [
        {
          source: '1',
          target: '2'
        },
        {
          source: '1',
          target: '3'
        },
        {
          source: '1',
          target: '4'
        },
        {
          source: '1',
          target: '5'
        },
        {
          source: '4',
          target: '6'
        },
        {
          source: '5',
          target: '6'
        }
      ],
      lineStyle: {
        opacity: 0.9,
        width: 2,
        curveness: 0.1
      }
    }
  ]
};

• Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
  ECharts Execution Error
  data is not defined

anonymous@http://chlc:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.4.1 line 265 > Function:3:13
r@http://chlc:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.4.1:265:6526
jee@http://chlc:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.4.1:153:49
a@http://chlc:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.4.1:265:6956
Gae</Gae</a</r<@http://chlc:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.4.1:265:7017
Tt@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:1139:2421
Gae</Gae</a<@http://chlc:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.4.1:265:6893
Gae</Gae</r@http://chlc:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.4.1:265:7058
Gae</Gae<@http://chlc:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.4.1:265:7091
Pd@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:963:26125
hl@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:963:45491
Bu@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:963:39315
ca@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:961:3402
ma@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:963:44280
ga@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:963:43214
Bd@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:963:38366
T@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:1054:1550
M@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:1054:1913
EventHandlerNonNull*7463@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:1054:2082
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
69982@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:1054:3871
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
22551@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:956:22
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
40961@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:963:61844
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
34743@http://chlc:3000/public/build/8470.f8cb2ce1e447ab8995c7.js:1199:22954
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
56034@http://chlc:3000/public/build/1359.664655d7f836b91ea890.js:155:81321
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
76892@http://chlc:3000/public/build/1359.664655d7f836b91ea890.js:82:2725
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
14186@http://chlc:3000/public/build/1359.664655d7f836b91ea890.js:82:1219
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
53478@http://chlc:3000/public/build/1359.664655d7f836b91ea890.js:2857:76702
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
31193@http://chlc:3000/public/build/1359.664655d7f836b91ea890.js:3465:18248
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
246@http://chlc:3000/public/build/1359.664655d7f836b91ea890.js:5263:50993
d@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:141
e@http://chlc:3000/public/build/app.b6f1cadcd2fa04233553.js:6144:806353
@http://chlc:3000/public/build/app.b6f1cadcd2fa04233553.js:6144:806394
d.O@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:1:588
@http://chlc:3000/public/build/app.b6f1cadcd2fa04233553.js:6144:806409
t@http://chlc:3000/public/build/runtime.d8e098a7c0decf874239.js:2:231
@http://chlc:3000/public/build/app.b6f1cadcd2fa04233553.js:1:57

• Did you follow any online instructions? If so, what is the URL?
  I am following instructions from these 2 videos:
  Build directed graph in Grafana using Apache ECharts | Tutorial part 1 and 2 (can’t paste more than 2 links in my post)

I know few things have changed since.
context.panel.data.series.map used now instead of data.series.map

ECharts - "Execution Error: data is not defined"

I have dashboard using Apache EChart plugin and working fine. When I upgraded the pluging to Business Charts, in same code I have the ERROR message: ReferenceError: data is not defined let RAW_it = , FIN_it = , TOTAL_it = , WIP_it = ; Transit_it = ; Target_it = ; const datablock = data.series.map((s) => { const RAW_it = s.fields.find((f) => f.name === ‘RAW’).values.buffer || s.fields.find((f) => f.name === ‘RAW’).values; const FIN_it = s.fields.find((f) => f.name === ‘FIN’).values.buff…

Use of datasource in Apache eChart

@Seji Take a look at the video where we explained how to use Data sources in Apache ECharts. [How to use Data Source in Apache ECharts in 90 seconds | Grafana Data attribute]

Just to avoid basic responses: Grafana is installed in container
NAME=“Red Hat Enterprise Linux Server”
VERSION=“7.9 (Maipo)”
Grafana service was restarted few times. Other dashboard/panels/plugins work as expected.
Built-in Node Graph while producing visually pleasant output does not work for me. Nodes are scattered without any recognizable pattern (even when data fed is sorted by rank). Correspondingly, edges (connections) point in any direction absolutely ignoring the concept of directional graph. I have 100-200 tasks with complex relations and would like them to go either left-to-right or top-to-bottom. Ideally. I am ok to generate x/y myself.
graphviz handles it even without coordinates. Need to feed it with rank-sorted data.
I definitely did my homework but am missing some basics I guess.

[yosiasz]

context.editor.series

Can you please provide documentation for

context.panel.data.series

[unclegasya]

If it was some sort of suggestion/tip it was not clear. I would prefer a longer version.
Where to go, what to do, etc. I am relatively new to Grafana.

[unclegasya]

I believe I found what I did wrong.
volkovlabs is a big help to troubleshoot the issue.
https_here://echarts.volkovlabs.io/d/oKc5di54k/graph?orgId=1&viewPanel=5&editPanel=5

Two lessons learned:

1. I forgot that the nodes should have ‘id’, not ‘title’.
2. ECharts require x and y if layout is “none”.

nodes SQL. added x an y:
select title as id, color, x, y from nodes...

Code:

let sources = [];
let targets = [];

let ids = [];
let colors = [];
let x_values = [];
let y_values = [];

context.panel.data.series.map((s) => {
  if (s.refId === "connections") {
    sources = s.fields.find((f) => f.name === "source").values;
    targets = s.fields.find((f) => f.name === "target").values;
  }
  else if (s.refId === "nodes") {
    ids = s.fields.find((f) => f.name === "id").values;
    x_values = s.fields.find((f) => f.name === "x").values;
    y_values = s.fields.find((f) => f.name === "y").values;
    colors = s.fields.find((f) => f.name === "color").values;
  }
});

const connections = sources.map(function (value, i) {
  return { source: value, target: targets[i] };
});

const nodes = ids.map(function (value, i) {
  return {
    id: value, name: value,
    x: x_values[i], y: y_values[i], itemStyle: { color: colors[i] }
  };
});

return {
  series: [
    {
      type: "graph",
      layout: "none",
      animation: true,
      label: {
        show: true
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 20
      },
      data: nodes,
      edges: connections
    }
  ]
};