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