Use of datasource in Apache eChart

[Seji]

Hello,

I’m currently having trouble displaying some data through the Apache eChart plugin. Indeed, I retrieved the data as below but nothing is displayed on the curve.

So I would like to know how to solve this problem?

Regards,

[yosiasz]

What do you see when you add

console.log('Sunny Seattle', series)

on line 11 and check your console

[mikhailvolkov]

@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

[Seji]

Thanks for your answer @yosiasz. When i add this console.log('Sunny Seattle', series), i have those lines :

[yosiasz]

Sorry meant to say

console.log('Sunny Seattle', wind)

put it in line 15.

[Seji]

Thank you for the tutorial but I couldn’t find where my error came from.

[mikhailvolkov]

@Seji You don’t need to redefine as constants tws, twd and time variables inside map function as they are already defined with let at the beginning.

Please remove const and try again.

[Seji]

I removed the const but I still have the same error.

[mikhailvolkov]

@Seji, It’s an error for the wind array, which has an undefined element. You should push elements to the wind array or define it with three elements from the start like

const wind = [[], [], []]

It’s not clear which visualization you are using. To have an array with three nested arrays following your logic, I would suggest:

const wind = data.series.map((s) => {
  const tws = s.fields.find((f) => f.name === 'tws').values.buffer;
  const twd = s.fields.find((f) => f.name === 'twd').values.buffer;
  const time = s.fields.find((f) => f.type === 'time').values.buffer;

  return [tws, twd, time];
});

[yosiasz]

I always wondered about this .values.buffer
What pattern is this?

[mikhailvolkov]

I believe it’s defined in DataFrames, grafana/processDataFrame.ts at main · grafana/grafana · GitHub.

[Seji]

Thanks for your help @yosiasz and @mikhailvolkov. I used another graphic and changed the part of the code that didn’t fit. I think I was not using the parameters in their correct form.

However, I have another problem as it does not display the last value in the table but the first value.

[yosiasz]

So wack and unusual, wonder why didnt they leave it just at values

[mikhailvolkov]

@Seji, Great that it works.

You should be able to limit the number of returned records from PostgreSQL to the latest one, which will be the optimal solution.

[Seji]

Thanks, I used the following query to retrieve the last value : SELECT horaire AS "time", twd FROM of50 ORDER BY horaire DESC LIMIT 1

[mikhailvolkov]

@Seji, thank you for confirming. Let us know if there is anything else.

[rbologna]

Hi, I have a similar problem. I saw the video but I can not get any values from database. I made some transformation on the data, but they are showed in table view.
If I send capture arrays to console log is always empty and I do not know where is the problem, can you help me?

[mikhailvolkov]

If you are using Grafana 10, use .values to get values. It’a a breaking change in G10, values.buffer was deprecated.

[rbologna]

Thanks for answering. I made changes, but the result is the same.

[rbologna]

I reduce a little the code and it does not recognize s.fields.find

I deleted asking query name “if (s.refId === “A”) {” because s.refId was always undefined.