Wind Speed and Direction with Grafana ECCharts plugin

00doc.md

Using https://volkovlabs.io/plugins/volkovlabs-echarts-panel/ you can create a pretty nice graph showing both wind speed & direction.

0wind.png

function.js

const ecData = []

if (data.series.length === 0) {
  return {}
}

const time = data.series[0].fields[0].values
const direction = data.series[0].fields[1].values
const speed = data.series[1].fields[1].values

for (let i = 0; i < data.series[0].length; i++) {
  ecData.push({ value: [time.get(i), Number(speed.get(i)).toFixed(2)], symbolRotate: (direction.get(i) / Math.PI * 180) - 90 })
}


const series = {
  name: data.series[0].refId,
  type: 'line',
  showSymbol: true,
  symbol: "path://m13.022 14.999v3.251c0 .412.335.75.752.75.188 0 .375-.071.518-.206 1.775-1.685 4.945-4.692 6.396-6.069.2-.189.312-.452.312-.725 0-.274-.112-.536-.312-.725-1.451-1.377-4.621-4.385-6.396-6.068-.143-.136-.33-.207-.518-.207-.417 0-.752.337-.752.75v3.251h-9.02c-.531 0-1.002.47-1.002 1v3.998c0 .53.471 1 1.002 1z",
  symbolSize: 15,
  areaStyle: {
    opacity: 0.1,
  },
  lineStyle: {
    width: 1,
  },
  data: ecData
};


/**
 * Enable Data Zoom by default
 */
setTimeout(() => echartsInstance.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'dataZoomSelect',
  dataZoomSelectActive: true,
}), 500);

/**
 * Update Time Range on Zoom
 */
echartsInstance.on('datazoom', function (params) {
  const startValue = params.batch[0]?.startValue;
  const endValue = params.batch[0]?.endValue;
  locationService.partial({ from: startValue, to: endValue });
});

return {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    left: '0',
    bottom: '0',
    data: ['Wind Speed & Angle'],
    textStyle: {
      color: 'rgba(128, 128, 128, .9)',
    },
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none',
        icon: {
          zoom: 'path://',
          back: 'path://',
        },
      },
      saveAsImage: {},
    }
  },
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'value',
    min: 'dataMin',
  },
  grid: {
    left: '2%',
    right: '2%',
    top: '2%',
    bottom: 24,
    containLabel: true,
  },
  series,
};

ECharts Execution Error
data is not defined
ReferenceError: data is not defined
at eval (eval at (http://lucasvm:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.0.0), :5:1)
at eval (http://lucasvm:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.0.0:163:6248)
at Mf (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:25631)
at Es (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:44739)
at http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:42932
at T (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:474:1591)
at MessagePort.he (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:474:196

i got this error, can you help me ? 

The Query :
SELECT timestamp AS "Time", wind_speed AS "Speed", wind_deg AS "Direction" FROM weather ORDER BY timestamp

Use context.panel.data.series.... rather than just data.series
Make sure you use the Editor in "Code" mode, not "Visual" mode...

context.panel.data.series

Does this needs to be changed in the whole code (meaning everywhere)?

Is it possible to write the wind direction in letters on the graph, synchronously with the interval indicated on the time scale?

Now it's like this:

Is it possible to write the wind direction in letters on the graph, synchronously with the interval indicated on the time scale?

Now it's like this:
I want something like this (Photoshop):

@tkurki The png looks nice and thanks for the function.js but what other settings must be done in the panel to get to this result?
To start with, what is the data source? I see nowhere the paths pointing to the metrics. Should that be InfuxDB and make sure SignalK send it to InfluxDB?