Noch eine Anmerkung vorweg: hat nichts mit meinen Highcharts 2.x Scripten zu tun.
Es handelt sich hier um eine Implementierung mit Hilfe von HighchartsPHP.
Hallo Community,
anbei mal den einen oder anderen Testscript.
Was ist zu machen:
1.) HighchartsPHP herunterladen (siehe http://www.goncaloqueiros.net//goncaloqueiros/highcharts.php)
2.) Im entpackten Verzeichnis „src“ befinden sich ein paar PHP-Dateien (config.php, Highchart.php, HighchartJsExpr.php, HighchartOption.php und HighchartOptionRenderer.php), welche ich in ein neu erstellte Verzeichnis „Ghunti\HighchartsPHP“ (als Unterordner von scripts) kopiert habe.
3.) Die Datei „IPS-HighchartsPHP.php“ kommt ins webfront\user Verzeichnis.
4.) Eine String Variable - Typ HTML anlegen
5.) Den Beispielscript unter die String Variable legen und aufrufen
… und es müsste was angezeigt werden
Beispielscript:
<?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='100%' height='600' frameborder='0' scrolling='no' ></iframe>";
SetValueString($idOfContentVariable, $s);
return;
}
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->chart = array(
'type' => 'gauge',
'plotBackgroundColor' => null,
'plotBackgroundImage' => null,
'plotBorderWidth' => 0,
'plotShadow' => false
);
$chart->title->text = 'IPS Temp.';
$chart->pane->startAngle = -150;
$chart->pane->endAngle = 150;
$chart->background = array(
array(
'backgroundColor' => array(
'linearGradient' => array(
'x1' => 0,
'y1' => 0,
'x2' => 0,
'y2' => 1
),
'stops' => array(
array(0, '#FFF'),
array(1, '#333')
)
),
'borderWidth' => 0,
'outerRadius' => '109%'
),
array(
'backgroundColor' => array(
'linearGradient' => array(
'x1' => 0,
'y1' => 0,
'x2' => 0,
'y2' => 1
),
'stops' => array(
array(0, '#333'),
array(1, '#FFF')
)
),
'borderWidth' => 1,
'outerRadius' => '107%'
),
array(
'backgroundColor' => '#DDD',
'borderWidth' => 0,
'outerRadius' => '105%',
'innerRadius' => '103%'
)
);
$chart->yAxis = array(
'min' => 0,
'max' => 200,
'minorTickInterval' => 'auto',
'minorTickWidth' => 1,
'minorTickLength' => 10,
'minorTickPosition' => 'inside',
'minorTickColor' => '#666',
'tickPixelInterval' => 30,
'tickWidth' => 2,
'tickPosition' => 'inside',
'tickLength' => 10,
'tickColor' => '#666',
'labels' => array(
'step' => 2,
'rotation' => 'auto'
),
'title' => array(
'text' => '°C'
),
'plotBands' => array(
array(
'from' => 0,
'to' => 120,
'color' => '#55BF3B'
),
array(
'from' => 120,
'to' => 160,
'color' => '#DDDF0D'
),
array(
'from' => 160,
'to' => 200,
'color' => '#DF5353'
)
)
);
$chart->series[] = array(
'name' => 'Speed',
'data' => array(70),
'tooltip' => array(
'valueSuffix' => '°C'
)
);
ob_start();
$chart->printScripts();
$hc_scripts = ob_get_contents();
ob_end_clean();
$hc_renderOptions = $chart->renderOptions();
//echo $hc_renderOptions;
//return;
$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" >
$(\'#container\').highcharts('. $hc_renderOptions . ',
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 1000);
}
}
);
</script>
</body>
</html>';
echo $s;
?>
und als Ergebnis müsste dann ungefähr sowas rauskommen:
IPS-HighchartsPHP.rar (300 Bytes)