HighchartsPHP

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)

<?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(Highchart::HIGHSTOCK);

$chart->chart->renderTo = "container";
$chart->chart->alignTicks = false;
$chart->rangeSelector->selected = 1;
$chart->title->text = "AAPL Stock Volume";

$chart->series[] = array(
    'type' => "column",
    'name' => "AAPL Stock Price",
    'data' => new HighchartJsExpr("data"),
    'dataGrouping' => array(
        'units' => array(
            array(
                "week",
                array(
                    1
                )
            ),
            array(
                "month",
                array(
                    1,
                    2,
                    3,
                    4,
                    6
                )
            )
        )
    )
);



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

//$hc_renderOptions =  $chart->renderOptions();
$hc_renderOptions =  $chart->render("chart");

//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">
            	$.getJSON(\'http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?\', function(data) {'
	                . $hc_renderOptions . ';
            });
        </script>
            </body>
</html>';

echo $s;
?>

Ergebnis:

<?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->renderTo = 'container';
$chart->chart->polar = true;
$chart->chart->type = 'line';
$chart->title->text = 'Budget vs spending';
$chart->title->x = -80;
$chart->pane->size = '80%';
$chart->pane->endAngle = 360;
$chart->xAxis->categories = array(
    'Sales',
    'Marketing',
    'Development',
    'Customer Support',
    'Information Technology',
    'Administration'
);
$chart->xAxis->tickmarkPlacement = 'on';
$chart->xAxis->lineWidth = 0;
$chart->yAxis->gridLineInterpolation = 'polygon';
$chart->yAxis->lineWidth = 0;
$chart->yAxis->min = 0;
$chart->tooltip->shared = true;
$chart->tooltip->pointFormat = '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>';
$chart->legend->align = 'right';
$chart->legend->verticalAlign = 'top';
$chart->legend->y = 70;
$chart->legend->layout = 'vertical';
$chart->series = array(
    array(
        'name' => 'Allocated Budget',
        'data' => array(43000 /*[Objekt #43000 existiert nicht]*/, 19000, 60000 /*[Objekt #60000 existiert nicht]*/, 35000, 17000 /*[WebFronts\Kategorien\Türen\Dummy Module\Hauseingangstür]*/, 10000),
        'pointPlacement' => 'on'
    ),
    array(
        'name' => 'Actual Spending',
        'data' => array(50000 /*[Objekt #50000 existiert nicht]*/, 39000, 42000 /*[Objekt #42000 existiert nicht]*/, 31000, 26000 /*[Objekt #26000 existiert nicht]*/, 14000),
        'pointPlacement' => 'on'
    )
);

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" >

            $(\'#container\').highcharts('
				. $hc_renderOptions . ',

            // Add some life
            function (chart) {
                if (!chart.renderer.forExport) {
                    setInterval(function () {myFunc(chart)}, 1000);
                }
            }
            );
        </script>
    </body>
</html>';
echo $s;

?>

Hallo khc,

noch sehr statisch das Ganze.

Ich hoffe Du verwirrst jetzt nicht die User die derzeit noch deine 2.02 nutzen.

Ich habe auf Basis von Raketenschneckes Ansatz auch schön die Hälfte deiner ehemaligen HighCharts-Implementation umgebaut und ich muss sagen, einfach super, flexibel und wie RS schon sagte, einmal eingearbeitet ersetzt es einiges.

Als kleines Zuckerl…

… die 3D-Option ist ruckzuck eingebaut und lässt sich per Variable umschalten.

Alles auf Basis von Highcharts4, HighChartsPHP und Raketenschneckes Hilfe (DANKE) :loveips:

Im scripts-Ordner von IP-Symcon anlegen, falls jemand es auch falsch gemacht hat :wink:

Danke für die Spielerei …

Gruß
Bruno

Hi Mädels,

ich hab in den letzten Tagen (nach der Umstellung des RS Energy Forecasts auf HighCharts 4.0) auch ein wenig gespielt.
Ich hab für mich eine Spielwiese erstellt, die per Project Exporter exportiert habe. Der Vorteil: eine vollständige HighCharts 4.0 plus HighChartsPHP-Installation per One-Click. Incl. WFE-Visualisierung.

Zum Artikel geht es hier: klick

Weitere Infos und Updates dann suczessive auf der Beitragsseite.

Kleine Anmerkung.

Genau mit diesem Paket wurden meine Graphen erstellt.

Gesendet von meinem GT-I9100 mit Tapatalk

Bei diesem Beispiel wird alle Sekunden der Wert aus einer IPS Variable gelesen und in der Gauge dargestellt.

<?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();

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

$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,
                            inc = 0;

                var newVal =  Number(data);

                point.update(newVal);
            };

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

?>

Inhalt der Datei „GetValueFromIPSVariable.php“ welche sich auch im Webfront/user Verzeichnis befinden muss.

<?php
	if (!isset($_GET['VarId'])) {
		echo "Highcharts4IPS Fehler: Aufruf-Parameter 'VarId' fehlt";
		return;
	} 
   	else {
   		$id = (int)$_GET['VarId']; 
   		echo getValue($id);
   	}
?>

Hallo wgreipl

mit welchen Parameter stellst du auf 3D um…

Habs mal damit versucht aber ohne Erfolg

$chart->chart->type = "column";
$chart->chart->options3d->enabled = true;
$chart->chart->options3d->alpha = 15;
$chart->chart->options3d->beta = 15;
$chart->chart->options3d->depth = 50;
$chart->chart->options3d->viewDistance = 25;

Grüße Heinz.

JS-Bibliothek geladen?

Habs grade gesehen, dass bei der aktuellen Version von HighchartsPHP noch nicht die 3d.js Bibliotheken geladen werden.

Angepasst. Und Funktioniert.

Danke für die Info.
Heinz

Hallo zusammen,

versuche gerade mich hier ein wenig einzuarbeiten (Mit den Scripten von RS). Daten aus der IPS-DB darzustellen klappt auch schon.

Nun hab ich versucht Daten aus MySQL darzustellen. Leider bekomm ich keine Daten in den Chart. Die Achsen werden dargestellt. Der ToolTipp kommt auch. Halt leer. Und die X-Zeitachse stellt Blödsinn dar. Denke daran liegts.

Hat schon jemand mit den Scripten von RS MySQL-Daten dargestellt und kann mir einen Tipp geben?

Ich bekomme folgenden Fehler:

php_mbstring.dll fehlt wohl, wenn ich richtig geraten habe.

Gruß
Bruno

Wo Wie bekomme ich die in IPS? Wo soll die sein ?

Ich habe Version 3.1 drauf ?

Suche ist wohl kaputt

Hallo zusammen,

habe bei den RS Beispielscripten bemerkt, dass in den ToolTipss der falsche Wochentag angezeigt wird. Liegt wohl daran, dass bei HC die Woche am Sonntag beginnt. Hab in der Doku nix gefunden wo man das einstellen kann.

Lösung/Workaround: im Script unter $option->lang->weekdays den Sonntag an erste stelle setzen. Dann passts wieder.

Danke Wolfgang,

viel mir noch gar nicht auf :rolleyes:

Jetzt passt es.

@Raketenschnecke
Ich habe mit Hilfe Deiner Spielwiese versucht Highstocks anzulegen.
Dazu habe ich

$chart 	= new Highchart(Highchart::HIGHSTOCK);

in das Script eingebaut bzw. das alte Statement

 $chart = new Highchart();

ersetzt.
Leider ohne Erfolg.

Laut dem HighChartPHP script müsste das allerdings funktionieren.
Stehe im Moment auf dem Schlauch … Tipps ???

Hi BestEx,

die Erklärung ist einfach: ich hab die HighStock Library schlichtweg noch nicht in die RS HighChartsPHP -Spielwiese eingebaut. Geduld, Geduld, das kommt alles noch :wink: