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?
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:
Gruß hardlog
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