Display wind direction with apache echart plugin

Grafana InfluxDB
,
1

Hi,
im using my raspberry pi as a local server with grafana and influxdb installed on it, and i want to display ma wind direction data that is received with angles and actual direction.
I was able to use single state to display the direction, but i found the apache echart plugins and a nice visualisation on the internet that i would like to use, but i dont know how to get it working since it coded in javascript i guess and im not familiare with it.
The issue is how to make it use my data that is stored in influxdb and disblay it in reel time, i watched tutorial on how to setup a data source with apche echart but i didnt get it.
If anyone can help me find the solution i would appreciate it. If there is a solution using a grafana dashboard as a datasouce in the pannel setting i would take it as well.

This is the code of the visualisation that i want to use, it using predefined values with the direction and the speed, i want it in real time

const wind = [
  {
    value: ['2022-06-15T00:00:00', 4.9],
    symbolRotate: 262
  },
  {
    value: ['2022-06-15T01:00:00', 9.6],
    symbolRotate: 37
  },
  {
    value: ['2022-06-15T02:00:00', 1.1],
    symbolRotate: 332
  },
  {
    value: ['2022-06-15T03:00:00', 0.3],
    symbolRotate: 353
  },
  {
    value: ['2022-06-15T04:00:00', 0],
    symbolRotate: 0
  },
  {
    value: ['2022-06-15T05:00:00', 3],
    symbolRotate: 110
  },
  {
    value: ['2022-06-15T06:00:00', 5],
    symbolRotate: 200
  },
  {
    value: ['2022-06-15T07:00:00', 7],
    symbolRotate: 250
  },
  {
    value: ['2022-06-15T08:00:00', 9],
    symbolRotate: 50
  },
  {
    value: ['2022-06-15T09:00:00', 6],
    symbolRotate: 0
  }
];

return {
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    orient: 'horizontal',
    left: 'center',
    min: 0,
    max: 10,
    text: ['High', 'Low'],
    dimension: 1,
    inRange: {
      color: ['#65B581', '#FFCE34', '#FD665F']
    }
  },
  series: [
    {
      data: wind,
      type: 'line',
      symbol: 'path://M31 24.7343L21.7917 24.7343V0L9.20826 0L9.20826 24.7343H0L15.5 45L31 24.7343Z',
      symbolSize: 20,
      lineStyle: {
        width: 0.3
      }
    }
  ]
};

wind

2

@samybendiabdallah5 This use case is described in the documentation with a code example.

3

the exemple is using a static datasource, i need to use influxdb datasource for the query, but i dont know how to use it. i tried this( SELECT “vitesse_du_vent”, “angle” FROM “test_2” WHERE $timeFilter) query with the example code in which i modified this lines for my data names:
const vitesse = s.fields.find((f) => f.name === “vitesse_du_vent”).values.buffer;
const angle = s.fields.find((f) => f.name === “angle”).values.buffer;
And it showes me this error :
ECharts Execution Error

Cannot read properties of undefined (reading ‘values’)

4

All data sources return data frames and look the same for the Apache ECharts panel.
This error means one of the fields was not found. The name of the fields should match the code.

Check out this tutorial on how to work with Data Sources.

Playlist with all tutorials to get started:

5

Please provide as much sample data as you can from test_2 as follows

vitesse_du_vent,angle
33.5,99

Merci

1 Like