windDir graph not available?

[guidocioni]

I would like to have a simple graph of wind direction (not the wind rose).
Is that possible?

Using windDir in the skin.conf produces an empty graph.

[W0CHP]

Yep it's possible.¹
I added a scatter plot² of windDir as follows:

Declare line graph config and chart in the .tmpl template:

var graph_line_config = {
    #include "graph_line_config.inc"
}
[...]
$getChartJsCode("windDir", "windDirchart", "line", "windDir")

Declare windDir chart in skin.conf

charts_order = outTemp, windchill, outHumidity, appTemp, barometer, windSpeed, windDir, windvec, rain, UV, radiation, soilMoist1, cloudbase

Create a line graph config; graph_line_config.inc

#encoding UTF-8
## +---------------------------------------------------------------------------+
## |    graph_line_config.inc             JS config for default line charts    |
## +---------------------------------------------------------------------------+

colors: ['#008FFB', '#00E396', '#FF4560', '#775DD0', '#FEB019'],

chart: {
    type: 'line',
},

dataLabels: {
    enabled: false
},

stroke: {
    width: 0,
},

markers: {
    size: 3,
    strokeWidth: 1,
    strokeOpacity: 0.9,
    strokeDashArray: 0,
    fillOpacity: 1,
    shape: "circle",
    radius: 1,
},

xaxis: {
    type: 'datetime',
    tickAmount: 8,
    trim: true,
    labels: {
        hideOverlappingLabels: true,
        tickAmount: 8,
        rotateAlways: false,
        hideOverlappingLabels: true,
        showDuplicates: false,
        trim: true,
        formatter: function(val, timestamp) {
            return moment.unix(timestamp).format("$Extras.Formatting.datetime_graph_label");
        }
    }
},

yaxis: {
   max: 360,
   min: 0,
},

grid: {
    show: true,
    borderColor: '#647279',
    strokeDashArray: 0,
    position: 'back',
    xaxis: {
        lines: {
            show: true
        }
    },
    yaxis: {
        lines: {
            show: true
        }
    },
},

Footnotes

1. My windDir scatter plot in action: https://wx.w0chp.net/ ↩

2. I am fully aware that ApexCharts has a scatter chart-type, but it was flaky AF, and a line chart with no stroke and markers worked as I desired. 🤷‍♂️ ↩

[guidocioni]

Thank you, that worked out pretty well!
Would be good to have this integrated in the main package :)

[Pogs2004]

This is great, I've been looking for a way to chart wind direction. I have modified it slightly (marker size reduced from 3 to 2, grid colour changed to grey, removed trim on x axis labels, x axis on grid removed) to display more like the built-in charts, you can see it here: https://www.360shetland.co.uk/weather

There is a bug in that the Y axis scale will display up to 400º even though the max value for the axis is 360, not sure how to fix this one. What would be nice is instead of scaling to the current direction variance it displays the full 0 - 360º scale on the Y axis like the Seasons wind direction chart, not sure how easy this would be.

[seehase]

Hi Pogs2004

I like your two graphics for "Pressure, Wind and Six Day Forecast" and "Satellite Map"
Did you add the iFrames hardcoded or via configuration?

This is great, I've been looking for a way to chart wind direction. I have modified it slightly (marker size reduced from 3 to 2, grid colour changed to grey, removed trim on x axis labels, x axis on grid removed) to display more like the built-in charts, you can see it here: https://www.360shetland.co.uk/weather

[W0CHP]

There is a bug in that the Y axis scale will display up to 400º even though the max value for the axis is 360, not sure how to fix this one. What would be nice is instead of scaling to the current direction variance it displays the full 0 - 360º scale on the Y axis like the Seasons wind direction chart, not sure how easy this would be.

I submitted PR #61 two days ago, which is more complete/pristine. Still haven't figured out the 0-360 ApexCharts min/max bug :-/

[Pogs2004]

Hi Pogs2004

I like your two graphics for "Pressure, Wind and Six Day Forecast" and "Satellite Map" Did you add the iFrames hardcoded or via configuration?

This is great, I've been looking for a way to chart wind direction. I have modified it slightly (marker size reduced from 3 to 2, grid colour changed to grey, removed trim on x axis labels, x axis on grid removed) to display more like the built-in charts, you can see it here: https://www.360shetland.co.uk/weather

Hi Seehase, they are iFrames in an include file, then called from the *.tmpl files as required. I have two inc files, forecast.inc and meteoblue.inc. Here's the code for the "Pressure, Wind and Six Day Forecast" forecast.inc file:

forecast.inc

## +-------------------------------------------------------------------------+
## | iFrame to display Windy.com forecast and wind map                       |
## +-------------------------------------------------------------------------+

<div class="col-12 mb-4 text-center">
  <h2 class="h2-responsive text-dark">Pressure, Wind and Six Day Forecast</h2>
</div>

<iframe width="100%" height="800" style="padding:14px;border:2px;" src="https://embed.windy.com/embed2.html?lat=58.124&lon=-1.187&detailLat=60.160&detailLon=-1.15>

Here's where it's called in the index.html.tmpl file:

<!DOCTYPE html>
<html lang="$Extras.language">
<head>
  <title>
    $Extras.Translations[$Extras.language].current | $station.location
  </title>
  <meta http-equiv="refresh"         content="300;url=index.html">
  #include "head.inc"
</head>
<body class="${Extras.Appearance.mode}-theme main-bg" ontouchstart="">

#attr $active_nav = 'current'
#include "header.inc"

<main>
  <div class="container-fluid d-flex-xxl">
    <div class="row my-4 temprow align-content-start">

    <div class="col-12 mb-4 text-center">
        <h2 class="h2-responsive text-dark">Current Conditions</h2>
    </div>
      #for $x in $Extras.Appearance.values_order

      #if $x == "ET"
        #if $day.ET.has_data and $day.ET.sum.raw is not None and $day.ET.sum.raw > 0.0
          $valuesCard('ET')
        #end if
      #else
        $valuesCard($x)
      #end if

      #end for

## +-------------------------------------------------------------------------+
## | iFrame to display Windy.com forecast and wind map                       |
## +-------------------------------------------------------------------------+

  #include "forecast.inc"
  #include "meteoblue.inc"

  </div>

Change the iFrame contents as required and call it where you want it to show. I have it in all the templates, index, yesterday, week, month and year.

[Pogs2004]

There is a bug in that the Y axis scale will display up to 400º even though the max value for the axis is 360, not sure how to fix this one. What would be nice is instead of scaling to the current direction variance it displays the full 0 - 360º scale on the Y axis like the Seasons wind direction chart, not sure how easy this would be.

I submitted PR #61 two days ago, which is more complete/pristine. Still haven't figured out the 0-360 ApexCharts min/max bug :-/

Thanks @W0CHP, I've updated all my templates now, looking good! I notice on your website you have help explanations on some of your headings, e.g Apparent Temperature and Air Quality Index. I would like to implement the same, where did you code this? Thanks!

[W0CHP]

I notice on your website you have help explanations on some of your headings, e.g Apparent Temperature and Air Quality Index. I would like to implement the same, where did you code this? Thanks!

@Pogs2004 Yep! I use <dfn> tags for those (conditional, based on the observation specified/desired), with some CSS for styling.

As an example; in the main index template for the observation <h3> card headings:

#def valuesCard($name)
  #if $getVar('day.' + name + '.has_data')
  <div class="col-12 col-md-6 col-xl-4 mb-4">
    <div class="card">
      <div class="card-body text-center">
        <h3 class="h5-responsive $Extras.color-text">
          #if $name == "UV"
            <dfn data-info='Ultraviolet Index - exposure risk levels: 0-2 = low; 3-5 = moderate; 6-7 = high; 8-10 = very high; 11+ = extreme.'>UV Index</dfn>
          #else if $name == "ET"
            <dfn data-info='Evapotranspiration is the sum of evaporation from the land surface plus transpiration from plants.'>Evapotranspiration</dfn>
          #else if $name == "windrun"
            <dfn data-info='Wind run is a meteorological term used to categorize or determine the total distance (or amount) of the traveled wind over a period of time. The readings are collected using an anemometer (usually part of a weather station).'>Wind Run</dfn>
          #else if $name == "appTemp"
            <dfn data-info='Apparent temperature, also known as "feels like", is the temperature equivalent perceived by humans, caused by the combined effects of air temperature, relative humidity and wind speed. The measure is most commonly applied to the perceived outdoor temperature.'>Apparent Temperature</dfn>
          #else
            $getVar('obs.label.' + name)
          #end if

(...rinse, repeat)

For observation cards and the <h4> headings example:

        #else if $name == "luminosity"

        <div class="row">
          <div class="col-3 text-muted font-small lo-text">
          </div>
          <div class="col-6">
            <h4 class="h2-responsive">$current.luminosity.nolabel('%.0f') <dfn data-info="The lux is the SI derived unit of illuminance, measuring luminous flux per unit area. It is equal to one lumen per square meter.">Lux</dfn></h4>
          </div>
          <div class="col-3 text-muted font-small hi-text">
            $day.luminosity.max <br>
            ($day.luminosity.maxtime.format($Extras.Formatting.datetime_today))
          </div>
        </div>

(...again; rinse, repeat)

And the accompanying CSS:

dfn {
  border-bottom: 1px dotted;
  cursor: help;
  font-style: normal;
  position: relative;

}
dfn::after {
  content: attr(data-info);
  display: inline;
  position: absolute;
  top: 22px; left: 0;
  opacity: 0;
  width: 230px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5em;
  padding: 0.5em 0.8em;
  background: rgba(0,0,0,0.8);
  color: #fff;
  pointer-events: none;
  transition: opacity 250ms, top 250ms;
}
dfn::before {
  content: '';
  display: block;
  position: absolute;
  top: 12px; left: 20px;
  opacity: 0;
  width: 0; height: 0;
  border: solid transparent 5px;
  border-bottom-color: rgba(0,0,0,0.8);
  transition: opacity 250ms, top 250ms;
}
dfn:hover {z-index: 2;} 
dfn:hover::after,
dfn:hover::before {opacity: 1;}
dfn:hover::after {top: 30px;}
dfn:hover::before {top: 20px;}

[Pogs2004]

Yep! I use <dfn> tags for those (conditional, based on the observation specified/desired), with some CSS for styling.

@W0CHP Many thanks! I have added the code to the h3 headings on my index page: https://www.360shetland.co.uk/weather/index.html

I'll add the others over the weekend, looks good!

[W0CHP]

There is a bug in that the Y axis scale will display up to 400º even though the max value for the axis is 360, not sure how to fix this one. What would be nice is instead of scaling to the current direction variance it displays the full 0 - 360º scale on the Y axis like the Seasons wind direction chart, not sure how easy this would be.

@Pogs2004 I fixed the 0-360deg. range bug with my most recent commits, which is all now in PR #61

[Pogs2004]

There is a bug in that the Y axis scale will display up to 400º even though the max value for the axis is 360, not sure how to fix this one. What would be nice is instead of scaling to the current direction variance it displays the full 0 - 360º scale on the Y axis like the Seasons wind direction chart, not sure how easy this would be.

@Pogs2004 I fixed the 0-360deg. range bug with my most recent commits, which is all now in PR #61

Hi @W0CHP Thanks for the update, looking much better now! Just to point out there is a typo in one of the changed files, year-%Y.html.tmpl on line 264, yaxis: { should not be removed, it breaks the yearly graphical reports.

[W0CHP]

Hi @W0CHP Thanks for the update, looking much better now! Just to point out there is a typo in one of the changed files, year-%Y.html.tmpl on line 264, yaxis: { should not be removed, it breaks the yearly graphical reports.

Ooops! 🤦‍♂️ Good catch. PR #61 updated - thanks!

[guidocioni]

Hey @W0CHP , I may have missed that, but how can I enable the "stats" page in the template?

[seehausen]

@guidocioni
you can get the stats from #54 ;-)
including the winDir

[guidocioni]

@guidocioni you can get the stats from #54 ;-) including the winDir

Thanks @seehausen . This is maybe a dumb question but...what's the easiest and quickest way to integrate the #54 and #61 in my neowx/weewx installation? I always installed with a zip of the release so I don't really have a place where the git repo is cloned where I could fetch and merge the PRs.

[seehausen]

@guidocioni I think the easiest way is to download the zip file
https://github.com/seehase/neowx-material/archive/refs/heads/feature/history-report.zip
take the files and override your local files, and adapt the skin.conf as your wishes

[danitus13]

Hi @W0CHP Thanks for the update, looking much better now! Just to point out there is a typo in one of the changed files, year-%Y.html.tmpl on line 264, yaxis: { should not be removed, it breaks the yearly graphical reports.

Ooops! 🤦‍♂️ Good catch. PR #61 updated - thanks!

Hi, how do you reduce the time on the chart. I would put a circle every 5 minutes