I want to recreate the ambientweather wind direction dot-chart

[Viss]

The ambientweather charts seem to do a pretty good job of tracking wind direction, heres a screenshot:

I’m currently using the ‘windrose’ integration, and while it looks neat and tells me what directions the wind has been blowing, the thing it doesnt do is show me what time the wind changed direction:

Is there a way to use maybe apex charts or another integration to copy the design of the ambientweather dot-chart, so its possible to see what direction the wind was blowing at a given time during the day?

[tom_l]

Plotly can do this:

https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/369#discussioncomment-9132126

Shading that line according to wind speed would give you everything in one graph, speed, direction and time.

Plotly interactive Graph Card

[demo] [attributes] [216764329-94b9cd7e-fee9-439b-9134-95b7be626592] [image] [image] [215353175-97118ea7-778b-41b7-96f2-7e52c1c396d3] [image] Here is my first Lovelace card, similar to the history card but leveraging plotly.js to make it interactive. You can scroll and zoom and the missing data will be automatically fetched. Click on the Index of examples with images in the readme The yaml is compatible with the history card, instructions in the repo link. I’d love your to hear fee…

[Viss]

whoa, this looks pretty rad! Thanks for the recco, I’ll give it a shot!

[Unconnected]

If people are still interested, it is possible in apexcharts!

[vingerha]

Please share the code too…

[Viss]

yes, what vingerha said - please share the code!

[Unconnected]

Here you go! It is in Dutch so you need to translate the Z to S and the O to E for English. Rest should be okay

type: custom:apexcharts-card
header:
  show: true
  title: Windrichting
  show_states: true
  colorize_states: true
chart_type: scatter
graph_span: 2d
series:
  - entity: sensor.buienradar_wind_direction_azimuth
    name: Windrichting
    group_by:
      func: max
      duration: 30m
    show:
      in_chart: true
      name_in_header: false
apex_config:
  yaxis:
    labels:
      formatter: |
        EVAL:function(value) {
          if (value > 11.25 && value <= 33.75) { return 'NNO'; }
          else if (value > 33.75 && value <= 56.25) { return 'NO'; }
          else if (value > 56.25 && value <= 78.75) { return 'ONO'; }
          else if (value > 78.75 && value <= 101.25) { return 'O'; }
          else if (value > 101.25 && value <= 123.75) { return 'OZO'; }
          else if (value > 123.75 && value <= 146.25) { return 'ZO'; }
          else if (value > 146.25 && value <= 168.75) { return 'ZZO'; }
          else if (value > 168.75 && value <= 191.25) { return 'Z'; }
          else if (value > 191.25 && value <= 213.75) { return 'ZZW'; }
          else if (value > 213.75 && value <= 236.25) { return 'ZW'; }
          else if (value > 236.25 && value <= 258.75) { return 'WZW'; }
          else if (value > 258.75 && value <= 281.25) { return 'W'; }
          else if (value > 281.25 && value <= 303.75) { return 'WNW'; }
          else if (value > 303.75 && value <= 326.25) { return 'NW'; }
          else if (value > 326.25 && value <= 348.75) { return 'NNW'; }
          else { return 'N'; }
        }
      offsetX: 15
    min: 0
    max: 360
    tickAmount: 10
  grid:
    padding:
      left: 30
  markers:
    size: 5

[hendrik001973]

Thanks for the code. However I would propose two small improvements.:

1. As function you may want to use median . If you use max wind directions will be biased more in direction Northwest, if you use min in direction Northeast. Especially in cases with a big variance the bias is significant. With median the middle value is used.
2. For the number of ticks in the yaxis prefer a number dividable by 4 (8, 12 or 16) so that the main directions NESW are displayed on the yaxis

Best whishes
Hendrik

type: custom:apexcharts-card
header:
  show: true
  title: Windrichting
  show_states: true
  colorize_states: true
chart_type: scatter
graph_span: 2d
series:
  - entity: sensor.buienradar_wind_direction_azimuth
    name: Windrichting
    group_by:
      func: median
      duration: 30m
    show:
      in_chart: true
      name_in_header: false
apex_config:
  yaxis:
    labels:
      formatter: |
        EVAL:function(value) {
          if (value > 11.25 && value <= 33.75) { return 'NNO'; }
          else if (value > 33.75 && value <= 56.25) { return 'NO'; }
          else if (value > 56.25 && value <= 78.75) { return 'ONO'; }
          else if (value > 78.75 && value <= 101.25) { return 'O'; }
          else if (value > 101.25 && value <= 123.75) { return 'OZO'; }
          else if (value > 123.75 && value <= 146.25) { return 'ZO'; }
          else if (value > 146.25 && value <= 168.75) { return 'ZZO'; }
          else if (value > 168.75 && value <= 191.25) { return 'Z'; }
          else if (value > 191.25 && value <= 213.75) { return 'ZZW'; }
          else if (value > 213.75 && value <= 236.25) { return 'ZW'; }
          else if (value > 236.25 && value <= 258.75) { return 'WZW'; }
          else if (value > 258.75 && value <= 281.25) { return 'W'; }
          else if (value > 281.25 && value <= 303.75) { return 'WNW'; }
          else if (value > 303.75 && value <= 326.25) { return 'NW'; }
          else if (value > 326.25 && value <= 348.75) { return 'NNW'; }
          else { return 'N'; }
        }
      offsetX: 15
    min: 0
    max: 360
    tickAmount: 16
  grid:
    padding:
      left: 30
  markers:
    size: 5

[/quote]

[Unconnected]

With median instead of max:

and with the change in tickamount:

Nice thanks! I wanted to have that ‘double north’ on the y-axis but didn’t know how and keep the O/W in there as well. Now it shows N at the bottom and the top like in the original post and the rest. Thanks for the tips!