Diagramm in Form Windrose / Kompas-Rose

Hallo,

hat von euch jemand zufällig die eigenen (gesammelten) Winddaten (Richtung, Stärke) im WF in Form einer Windrose bzw. Compasrose dargestellt. Grundsätzlich kann das wohl Highcharts als auch Grafana?! Ich hab es bislang aber nicht hinbekommen.
Kann mir da jemand helfen?

Gruß
hardlog

Meinst du sowas?

Screenshot 2021-01-13 220247.png

das habe ich mit HighchartsPHP gemacht. Siehe https://www.symcon.de/forum/threads/24643-HighchartsPHP?highlight=highchartsphp

<?php
    if (!isset($_IPS['getHTML'])){
       $idOfContentVariable = IPS_GetParent($_IPS['SELF']);  // eine String Variable mit Profil ~HTML
        $scriptId = $_IPS['SELF'];
        $s = "<iframe src='./user/IPS-HighchartsPHP.php?ScriptId=$scriptId' width='350' height='350' frameborder='0' scrolling='no' ></iframe>";
        SetValueString($idOfContentVariable, $s);
        return;
    }

$varId = 12345; //Variable welche angezeigt werden soll

require_once "Ghunti/HighchartsPHP/Highchart.php";
require_once "Ghunti/HighchartsPHP/HighchartJsExpr.php";
require_once "Ghunti/HighchartsPHP/HighchartOption.php";
require_once "Ghunti/HighchartsPHP/HighchartOptionRenderer.php";

use Ghunti\HighchartsPHP\Highchart;
use Ghunti\HighchartsPHP\HighchartJsExpr;

$chart = new Highchart();
$chart->includeExtraScripts();
$chart->credits = array (
  'enabled' => false
);
$chart->exporting = array (
  'enabled' => false
);

$chart->chart = array(
    'type' => 'gauge',
    'backgroundColor' => "rgba(255,255,255, 0)",
    'plotBackgroundColor' => null,
    'plotBackgroundImage' => null,
    'plotBorderWidth' => 0,
    'plotShadow' => false,
    'height' => 350
);
$chart->title->text = '';
$chart->pane->startAngle = 0;
$chart->pane->endAngle = 360;
$chart->pane->size = '75%';
$chart->pane->background = null; 

$chart->yAxis = array(
    'min' => 0,
    'max' => 360,
    'minorTickInterval' => 11.25,
    'minorTickPosition' => 'outside',
    'tickInterval' => 22.5,
    'tickPosition' => 'outside',
    'showLastLabel' => false,
    'title' => array(
    'text' => 'Windrichtung'
    ),
    'labels' => array(
        'style' => array(
        	'color' => '#FFF',
			'fontSize' => '11px'
        	),
        'formatter' => new HighchartJsExpr("function() {
				var direction,
					directions = {
						0: 'N', 22.5: 'NNO', 45: 'NO', 67.5: 'ONO', 90: 'O', 112.5: 'OSO',135: 'SO', 157.5: 'SSO', 180: 'S', 202.5: 'SSW', 225: 'SW', 247.5: 'WSW', 270: 'W', 292.5: 'WNW', 315: 'NW', 337.5: 'NNW'
					};
				direction = directions[this.value] || '';
				return '<b>' + direction + '</b>'
			}"
		),
    )
);

$chart->plotOptions->gauge->dataLabels->enabled = false;
$chart->plotOptions->gauge->dial->backgroundColor = 'red';
$chart->plotOptions->gauge->dial->borderColor = 'silver';
$chart->plotOptions->gauge->dial->borderWidth = 1;
$chart->plotOptions->gauge->dial->baseWidth = 15;
$chart->plotOptions->gauge->dial->baseLength = '-100%';
$chart->plotOptions->gauge->dial->rearLength = '100%';
$chart->plotOptions->gauge->dial->topWidth = 1;
$chart->plotOptions->gauge->dial->radius = '111%';
$chart->tooltip->enabled = false;
$chart->series[] = array(
    'name' => 'Windrichtung',
    'data' => array(GetValue($varId)),
    'animation' => true,
    'tooltip' => array(
        'valueSuffix' => '°'
    )
);

ob_start();
$chart->printScripts();
$hc_scripts = ob_get_contents();
ob_end_clean();

$hc_renderOptions =  $chart->renderOptions();


$s='
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          '.$hc_scripts.'
    </head>
    <body>
        <div id="container"></div>

        <script type="text/javascript" >


            function getvalCallback(callback){
                $.getJSON(\'GetValueFromIPSVariable.php?VarId='.$varId.'\', function(data) {
                    callback(data);
                });
            }

            function CallbackFunc(data){
                var chart = $(\'#container\').highcharts();
                var point = chart.series[0].points[0],
                            newVal = Number(data),
                            oldVal = point.y;
                            if (oldVal - newVal > 180) {
                                point.update(359.5, true, true);
                                point.update(0, true, false);
                                point.update(newVal, true, true);
                            }
                            else if (newVal - oldVal > 180){
                                point.update(0.5, true, true);
                                point.update(360, true, false);
                                point.update(newVal, true, true);
                            }
                            else {
                                point.update(newVal, true, true);
                            }
            };

                $(\'#container\').highcharts(
                '. $hc_renderOptions . ',
                // Add some life
                function (chart) {
                    if (!chart.renderer.forExport) {
                        setInterval(function () {getvalCallback(CallbackFunc) }, 1000);
                    }
                }
            );
        </script>
    </body>
</html>';
echo $s;

Nur der Übergang Nordost zu Nordwest und umgekehrt ist nicht so elegant. Highcharts kennt diesen „Weg“ nicht. Das ging nur über einen Sprung über Nord. Falls da jemand eine Idee zur Verbesserung hätte? Habe mit Javascript nicht wirklich Erfahrung.

Gruß
erpe

Hi,

sieht schon mal gut aus.
Ich meinte aber nicht nur die Richtung, sondern auch noch die Stärke und Häufigkeit:
13b518c46cf1569c162147fbb3c8dbda7b39e9c3.jpg

Gruß hardlog

13b518c46cf1569c162147fbb3c8dbda7b39e9c3.jpg

Das obere Diagramm sieht Hammermässig aus!
Wird aber wieder mal nicht mir hauseigenen Webfrontmitteln zu machen sein…

Ich bin da leider noch nicht weiter gekommen.
Ich denke es müsste mit dem Module „JSLive“ → ChartRadar von @Acer90 gehen bekomme es aber allein nicht hin…

Nachtrag: Hab gerade gesehen, das Swen auf meine Frage in anderem Post darauf geantwortet hat, ich probiere es gerade aus…

hardlog