Echarts wind direction and speed

[province7056]

• Grafana v12.4.0 on Docker 28.5.1 on Debian 12.12

• using Echarts (Business charts) plugin to create chart displaying wind direction and wind speed (y axis) over time (x axis)

• using code snippets found here in * previous threads enhanced by google AI

• II can only see what is on the attached picture

  

const series = context.panel.data.series.map((s) => {
  const windSpeedField = s.fields.find((f) => f.name === 'windspeedmph');
  const windDirField = s.fields.find((f) => f.name === 'winddir');
  const timeField = s.fields.find((f) => f.name === 'Time');

  // Skip this series if any required field is missing to avoid the "undefined" error
  if (!windSpeedField || !windDirField || !timeField) return { data: [] };

  const windspeedmph = windSpeedField.values;
  const winddir = windDirField.values;
  const Time = timeField.values;

  return {
    name: s.name,
    type: 'line',
    symbol: 'path://M31 24.7343L21.7917 24.7343V0L9.20826 0L9.20826 24.7343H0L15.5 45L31 24.7343Z',
    symbolSize: 15,
    lineStyle: { width: 0.5 },
    data: Time.map((d, i) => ({
      value: [d, windspeedmph[i]],
      symbolRotate: winddir[i]
    }))
  };
});

return {
  xAxis: { type: 'time' }, // Note: lower-case 'time' is standard for ECharts
  yAxis: { type: 'value' },
  visualMap: {
    orient: 'horizontal',
    left: 'center',
    min: 0,
    max: 25,
    text: ['High', 'Low'],
    dimension: 1,
    inRange: {
      color: ['#65B581', '#FFCE34', '#FD665F']
    }
  },
  series: series
};

[yosiasz]

What do you see in your browser console?

[province7056]

[yosiasz]

Looks clean. What if you added

Console.log(‘windy’, windSpeedField) right before // Skip this series

and do that for all 3 variables

[province7056]

[yosiasz]

There is your answer. 2 of them are undefined

[province7056]

I guess that means windspeed and win direction..? Can you push me in the right direction how to solve that?

[yosiasz]

Are you referencing the proper field maes for those two

Please console log

The s.fields in

context.panel.data.series.map((s)

And see if those undefined values are being properly referenced in your .fields

This is more js issue than grafana issue