Wind Direction & Speed Timeline

Grafana Time Series Panel
6

It can be done with the Apache ECharts plugin in 15 minutes: GitHub - VolkovLabs/volkovlabs-echarts-panel: Apache ECharts Panel for @grafana..

Screen Shot 2022-07-31 at 16.06.40
Screen Shot 2022-07-31 at 16.06.40844×483 17.1 KB

  • you can specify your own path for the arrow,
  • color palette and range is customizable,
  • data should be taken from the data source. I just used a constant,
  • can hide line with width: 0

Here is the code:

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
      }
    }
  ]
};
4 Likes