+ Antworten
Ergebnis 1 bis 3 von 3
  1. #1
    Registriert seit
    Aug 2011
    Beiträge
    1,017

    Standard 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
    IPS 5.0unlim, 3x W&T WebIO12, diverse 1wire (LAN), FritzOS 7, z-Wave, DMX/ArtNet-Node, M-Bus, ESP8266 via MQTT

    "Prognosen sind schwierig, besonders wenn sie die Zukunft betreffen" N. Bohr

  2. #2
    Registriert seit
    Feb 2013
    Ort
    Grünstadt
    Beiträge
    107

    Meinst du sowas?

    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Screenshot 2021-01-13 220247.png 
Hits:	45 
Größe:	27.8 KB 
ID:	57294

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


    PHP-Code:
    <?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

  3. #3
    Registriert seit
    Aug 2011
    Beiträge
    1,017

    Hi,

    sieht schon mal gut aus.
    Ich meinte aber nicht nur die Richtung, sondern auch noch die Stärke und Häufigkeit:
    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	13b518c46cf1569c162147fbb3c8dbda7b39e9c3.jpg 
Hits:	23 
Größe:	16.7 KB 
ID:	57296

    Gruß hardlog
    Angehängte Grafiken Angehängte Grafiken  
    IPS 5.0unlim, 3x W&T WebIO12, diverse 1wire (LAN), FritzOS 7, z-Wave, DMX/ArtNet-Node, M-Bus, ESP8266 via MQTT

    "Prognosen sind schwierig, besonders wenn sie die Zukunft betreffen" N. Bohr

Ähnliche Themen

  1. Stromverbrauch im Diagramm
    Von DennisGesen im Forum Haustechnik
    Antworten: 5
    Letzter Beitrag: 10.06.20, 17:12
  2. Diagramm Anleitung
    Von quicksim im Forum WebFront
    Antworten: 0
    Letzter Beitrag: 12.03.11, 21:01
  3. Windrose Grafik
    Von Torro im Forum IP-Symcon WIIPS für Version 1.0
    Antworten: 6
    Letzter Beitrag: 01.09.06, 10:02
  4. Antworten: 1
    Letzter Beitrag: 14.02.06, 20:50