Page 1 of 1

Highcharts Question

Posted: Fri 20 Aug 2021 7:15 pm
by Mapantz
I've been spending some time playing around with some highcharts graphs recent, and got a little carried away.. :lol:

https://warehamwx.co.uk/graphs_monthly.php

I have plans for a few more, one of them was using windbarb.js

I did get a windbarb chart working, but I ran in to a problem with it, so I scrapped it. I wanted to try again, but thought I'd see if anyone here has used it.

I used HighWindGust and HWindGBear from the Dayfile table in SQL, and put it in to an array. I put a chart together for area, as well as the windbarbs. I noticed that the windbarbs had a lot of pennants, meaning that it was showing high winds. Sure enough, the tooltips were showing 'hurricane' and 'violent storm'. After some faffing around, I realised that the windbarb.js is using metres per second. It was interpreting a 56mph gust as 56m/s (125mph).

I then thought that perhaps I might be able to convert my readings from mph to m/s, then only show the beaufort description in the windbarb tooltip. I did just that and thought I'd solved it. However, the windbarbs on the charts were still showing too many pennants, which didn't relate to the actual wind speeds.

It now seems that coding may be needed for the barbs themselves, to properly do a conversion so that the correct pennants show up on them. It's not as simple as just converting the actual value to m/s.

I've had a look, but I cannot seem to find any information on it. I find it rather strange that they would lock it to a single unit?!

Simple question; Has anyone managed to do it?

Re: Highcharts Question

Posted: Sat 21 Aug 2021 10:57 am
by HansR
@Mapantz: Yes, I used the windbarbs in my AirLink module of CumulusUtils (See here menu choose Extra=>AirLink=>Grafiek Out.

Indeed the windbarbs only use the m/s, all figures are taken as m/s. Afaik the conversion should be enough.
My code for the chart as seen can be seen here

The relevant parts are:

Code: Select all

      if (idx in resp) {
        if (idx == 'wind') {
           let convertedWindbarbData = convertToMs(resp[idx]);
          chart.addSeries({name: titles[idx], xAxis: 1, color: 'black', type: 'windbarb', visible: true, tooltip: {valueSuffix: ' m/s'}, data: convertedWindbarbData }, false);
        }
        else {
          chart.addSeries({name: titles[idx], id: titles[idx], data: resp[idx]}, false);
        }
      }
and the conversion function:

Code: Select all

function convertToMs(data){data.map(s => {s[1] = s[1] * 0.27778 }); return data}
I had help from HighCharts support on their own forum and on StackOverflow.

That should do it.

Re: Highcharts Question

Posted: Sat 21 Aug 2021 12:48 pm
by Mapantz
Hi Hans

Thanks for the reply.

The problem is, I don't want the chart to show my speeds in m/s. It was easy enough converting mph to m/s, I did that in the php file that grabs the data from my sql table

Code: Select all

$HGustDir[] = array((float)$row[13]  * 0.44704, (float)$row[21]);
Converting the data within the highchart itself is the problem.

I can make it show the wind speed values in mph, but the windbarb icons themselves will always read the data as m/s, that's the problem I have..

Added a windbarb chart at the bottom of the page: https://warehamwx.co.uk/graphs_monthly.php

Re: Highcharts Question

Posted: Sat 21 Aug 2021 2:31 pm
by HansR
Search the highcharts forum/stackoverflow vor windbarbs, I know the code to modify the windbarbs pennants is in there for sure. I have seen it but did not note the link as that was not what i was looking for. But it is published by highcharts how to deal with this.

Re: Highcharts Question

Posted: Sat 21 Aug 2021 4:01 pm
by Mapantz
I think I may have found it, Hans.

Re: Highcharts Question

Posted: Sat 21 Aug 2021 4:23 pm
by beteljuice
@ Map ...

$HGustDir[] = direction not speed ?

Re: Highcharts Question

Posted: Sat 21 Aug 2021 4:43 pm
by HansR
Mapantz wrote: Sat 21 Aug 2021 4:01 pm I think I may have found it, Hans.
Good. Any use of publishing ot here for completeness?

Re: Highcharts Question

Posted: Sat 21 Aug 2021 5:02 pm
by Mapantz
beteljuice wrote: Sat 21 Aug 2021 4:23 pm @ Map ...

$HGustDir[] = direction not speed ?
Row 13 is the gust speed in my script (now changed it to max wind speed) row 21 is now the dominant direction of the day.
HansR wrote: Sat 21 Aug 2021 4:43 pm Good. Any use of publishing ot here for completeness?
I'll put a zip together later if folks are interested?!

Re: Highcharts Question

Posted: Sat 21 Aug 2021 5:40 pm
by HansR
Well, i am. Is that enough 8-)