Highcharts - Multigraph

[Raketenschnecke]

Hallo (K)HC-Fans,

ich hab hier eine kleine Erweiterung für KHC's HighChart-Implementierung gebaut. Es handelt sich um die Funktion "plotBands", mit deren Hilfe man Farbbänder über den Diagramm-Hintergrund legen kann, z.B. um besondere Wertebereiche besonders hervor zu heben. HighCharts lässt dies jeweils unabhängig für die x- und y-Achse zu. Ich habe zunächst die y-Achse implementiert. Die folgende Beschreibung bezieht sich auf die KHC-Version 1.0005.

Features:

• beliebige Anzahl von plotBands definierbar
• Definition der plotBands ist an die jeweilige yAchse gekoppelt
• plotBands skalieren dynamisch mit der jeweiligen y-Achse
• plotBands werden automatisch ausgeblendet, wenn die Achse den für das plotBand definierten Wertebereich nicht beinhaltet (siehe Bild 3 unten)
• jedes plotBand ist per Freitext beschriftbar (optional)
• die Definition der plotBands in den y-Achsen ist optional und kann weggelassen werden (fördert durchaus die Übersichtlichkeit im Config-Script)
• die plotBands werden automatisch ausgeblendet, wenn die dazugehörige y-Achse deaktiviert ist (siehe Bild2 unten)
  

Installation:

1. Einbau der plotBand-Option ins HighChart-Script: folgenden Code ins HighChart-Script (Funktion "CreateYAxis", nach Zeile 747) einfügen:

if (array_key_exists ('plotBands', $Axis))
                    $s .=" plotBands: ".$Axis["plotBands"].","; 

wichtig ist, das der obige Code nicht nach der bereits vorhanden If-Bedingung (Zeile 748):

if (array_key_exists ('Unit', $Axis))
                    $s .=" labels: {    formatter: function() { return this.value +' " . $Axis["Unit"]."'; }},"; 

eingefügt wird.

2. Einbau der plotBand-Definitionen ins HighChart-ConfigScript:
Man wählt die y-Achse aus, die man um die plotBand-Definitionen erweitern will
Beispiel-y-Achse aus KHC's-original-Scripts:

// Y-Achsen
    $CfgDaten["yAxis"][] = array("Name" =>"Temperaturen", "Unit"=>"°C","Opposite"=>false,"TickInterval"=>5); 

und hier der um die plotBand-Definitionen ergänzte Code (definiert sind 4 plotBands)

    // Y-Achsen
    $CfgDaten["yAxis"][] = array("Name" =>"Temperaturen", "Unit"=>"°C","Opposite"=>false,"TickInterval"=>5,
                                "plotBands"=>"[
                                     { // Eistag
                                        from: -20.0,
                                        to: 0.0,
                                        color: 'rgba(68, 170, 213, 0.1)',
                                        label:
                                        {
                                            text: 'Eistag',
                                            style:
                                            {
                                                color: '#606060'
                                            }
                                        }
                                     },
                                     { // kalter Tag
                                            from: 0.0,
                                            to: 15.0,
                                            color: 'rgba(255, 255, 0, 0.1)',
                                            label:
                                            {
                                                text: 'kalter Tag',
                                                style:
                                                {
                                                    color: '#606060'
                                                }
                                            }
                                     },
                                     { // Sommertag
                                            from: 25.0,
                                            to: 30.0,
                                            color: 'rgba(255, 90, 0, 0.1)',
                                            label:
                                            {
                                                text: 'Sommertag',
                                                style:
                                                {
                                                    color: '#606060'
                                                }
                                            }
                                     },
                                     { // heißer Tag
                                            from: 30.0,
                                            to: 50.0,
                                            color: 'rgba(255, 0, 0, 0.1)',
                                            label:
                                            {
                                                text: 'heißer Tag',
                                                style:
                                                {
                                                    color: '#606060'
                                                }
                                            }
                                     },
                                    ]"
                                ); 

Ergebnis:
Und zum Mund wässig machen noch ein paar Beispiele (aktuell auch für mich zum Ausprobieren hier live):

Beispiel1: Ansicht mit fast allen definierten plotBands


Beispiel2: selbes Diagramm, Ansicht mit ausgeblendeten Temperaturwerten => plotbands werden zusammen mit der nicht genutzten Temperatur-Achse ausgeblendet


Beispiel3: anderes Diagramm mit identischen plotBands--Definitionen, nur der aktuelle Wertebereicht ist eingeschränkt (und damit sind [bei dynamischer y-Achse] nicht alle plotBands sichtbar)

[Raketenschnecke]

bitte Lösungsdiskussionen nur im Q&A-Thread!!!
wozu macht man sich die Mühe und schreibt das groß und breit über und unter die Threads?

[khc]

Hier findet Ihr die Aufstellung der Änderungen von V1.x zur V2.0.

• Einige Parameter wurden angepasst.
• Es wurden die Original-Highchcarts Paremter in der ursprünglichen Schreibweise zu belassen - daher kann die Highcharts Dokumentation der API genutzt werden: Highcharts - Options Reference
• Alle Original-Highchcarts Parameter beginnen mit Kleinbuchstaben.
• Alle im IPS-Highchcarts-Script zusätzlich verwendeten Parameter beginnen mit Großbuchstaben.
• Die Datenübergabe bei den Pies wurde überarbeitet und an die grundlegende Highcharts Systematik angepasst.

Gegenüberstellung der geänderten / entfallenen Parameter:

HighChartCfg entfallen, durch neue Parmetrierungsmöglichkeiten können allen Einstellungen direkt gemacht werden
Name veraltet -> verwende ['title']['text']
SubTitle veraltet -> verwende ['subtitle']['text']
SubTitleDateTimeFormat veraltet -> verwende ['subtitle']['Ips']['DateTimeFormat']
SubTitleFormat entfallen -> unnötiger Paramter, wird jetzt in ['subtitle']['text'] angegeben

Im Bereich yAxis:
Name veraltet -> verwende ['yAxis']['name']
TitleText veraltet -> verwende ['yAxis']['name']
Min veraltet -> verwende ['yAxis']['min']
Max veraltet -> verwende ['yAxis']['max']
Opposite veraltet -> verwende ['yAxis']['opposite']
TickInterval veraltet -> verwende ['yAxis']['tickInterval']
PlotBands entfallen -> verwende ['yAxis']['plotBands']
YAxisColor entfallen -> verwende ['yAxis']['title']['style']
TitleStyle entfallen -> verwende ['yAxis']['title']['style']

Im Bereich serie:
Name veraltet -> verwende ['series']['name']
Param veraltet -> verwende ['series']-Einstellungen (z.B.: ['series']['type'], ['series']['yAxis'], usw.)
Dataveraltet -> verwende ['series']['data']

[khc]

Um die Konfigurationssystemaik von IPS-Highcharts V2.x besser zu veranschaulichen folgen hier ein paar Beispiele:


Um diese Beispiele zum laufen zu bekommen bitte wie folgt vorgehen:

• String Variable (Profil ~HTML-String) anlegen
• darunter das "leere" Konfigurationsscript aus diesem Anhang in IPS einfügen
• auf der selben Ebene einfach die einzlnen Beispiele (Bsp: ....)

In den Beispielscript müssten dann noch in jedem Fall:

• die Highcharts-Id eingetragen werden (im Bsp.Script ganz oben 'HighChartScriptId')
• die entsprechenden Variablen-Ids ausgetauscht werden
• die Id des leeren Cfg-Scripts eingetragen werden (im Bsr.Script ganz unten)

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

[khc]

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung als Columns.

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

   // ---->  hier muss EURE HighChartScriptId eingebenen werden
    $CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;                  // ID des Highcharts Scripts
    
      // Überschriften
    $CfgDaten['title']['text']= "Columns";
    $CfgDaten['subtitle']['text']= "Photovoltaik Produktion: Jan. 2012";     // "" = Automatisch über Zeitraum
    $CfgDaten['subtitle']['Ips']['DateTimeFormat']= "(D) d.m.Y H:i";             // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

    // Zeitraum welcher dargestellt werden soll
    $CfgDaten['StartTime'] = mktime(0,0,0, 1,1,2012); 
    $CfgDaten['EndTime'] = mktime(23,59,59, 1,31,2012);

    // damit wird die Art des Aufrufes festgelegt
    $CfgDaten['RunMode'] = "script";     // file, script oder popup

    // Achse
    $CfgDaten["yAxis"][0]['title']['text'] = "Produktion";
    $CfgDaten["yAxis"][0]['Unit'] = "kWh";
    $CfgDaten["yAxis"][0]['opposite'] = false;

   // ---->  hier mussen in folge natürlich EURE Variablen IDs eingebenen werden
     // Column
    $serie = array();
    $serie['Id'] = 33441 /*[Devices\SpecialDevices\WebLogPro\Akt-Werte\Aktuelle Werte\E_TOTAL]*/;
    $serie['name'] = "Photovoltaik - Produktion";
    $serie['Unit'] = "kWh";
    $serie['AggType'] = 1;  // Tageswerte
    $serie['ReplaceValues'] = false;
    $serie['RoundValue'] = 2;
    $serie['type'] = "column";
    $serie['yAxis'] = 0;
//    $serie['shadow'] = true;
    $CfgDaten["Series"][] = $serie;

   // ---->  hier muss die ScriptId des "leeren Cfg-Scripts" eingetragen werden
    $id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
    $s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
    include($s['ScriptFile']); 

[khc]

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung von Werten aus unterschiedlichen Zeiträumen (hier aktueller Monat, Vormonat und Vorjahr) in einem Chart.

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

      $CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;                  // ID des Highcharts Scripts

    // Überschriften
    $CfgDaten['title']['text']= "Offset - Unterschiedliche Zeiträume in einem Chart";
    $CfgDaten['subtitle']['text']= "Temperaturen: %STARTTIME% + Vormonat + Vorjahr";
    $CfgDaten['subtitle']['Ips']['DateTimeFormat']= "M Y";                 // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

    // Zeitraum welcher dargestellt werden soll
    $CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time()), date("Y",time())-1); // ab heute 00:00 Uhr
    $CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time();   // = bis jetzt

    // damit wird die Art des Aufrufes festgelegt
    $CfgDaten['RunMode'] = "script";     // file, script oder popup

    // Tooltip anpassen
    $CfgDaten['tooltip']['shared']=true;
    $CfgDaten['tooltip']['crosshairs']=true;
    $CfgDaten['tooltip']['formatter']="";
    $CfgDaten['tooltip']['useHTML ']=true;
    $CfgDaten['tooltip']['valueSuffix ']= " °C";
    

    // y-Achse
    $CfgDaten["yAxis"][0]['title']['text'] = "Temperaturen2";
    $CfgDaten["yAxis"][0]['Unit'] = "°C";
    $CfgDaten["yAxis"][0]['opposite'] = true;
    $CfgDaten["yAxis"][0]['tickInterval'] = 5;
    $CfgDaten["yAxis"][0]['min'] = - 10;
    $CfgDaten["yAxis"][0]['max'] = 50;

    $pb['from'] = -10.0;
    $pb['to'] = 0.0;
    $pb['color'] = 'rgba(68, 170, 213, 0.1)';
    $pb['label']['text'] = 'Eistag';
    $pb['label']['style']['color'] = '#606060';
    $CfgDaten["yAxis"][0]['plotBands'][] = $pb;

    $pb['from'] = 0;
    $pb['to'] = 15;
    $pb['color'] = 'rgba(255, 255, 0, 0.1)';
    $pb['label']['text'] = 'kalter Tag';
    $pb['label']['style']['color'] = '#606060';
    $CfgDaten["yAxis"][0]['plotBands'][]= $pb;

    $pb['from'] = 25;
    $pb['to'] = 30;
    $pb['color'] = 'rgba(255, 90, 0, 0.1)';
    $pb['label']['text'] = 'Sommertag';
    $pb['label']['style']['color'] = '#606060';
    $CfgDaten["yAxis"][0]['plotBands'][]= $pb;

    $pb['from'] = 30;
    $pb['to'] = 50;
    $pb['color'] = 'rgba(255, 0, 0, 0.1)';
    $pb['label']['text'] = 'heißer Tag';
    $pb['label']['style']['color'] = '#606060';
    $CfgDaten["yAxis"][0]['plotBands'][]= $pb;



    // akt Monat
    $tStart1 = mktime(0,0,0, date("m", time()), 1, date("Y",time()));
    $tEnd1 = mktime(23,59,59, date("m", time())+ 1, 0, date("Y",time()));
    $offset1 =  0;

    //Vormonat
    $tStart2 = mktime(0,0,0, date("m", time())-1, 1, date("Y",time()));
    $tEnd2 = mktime(23,59,59, date("m", time())+1-1, 0, date("Y",time()));
    $offset2 =  -($tStart2 - $tStart1);

    //Vorjahr
    $tStart3 = mktime(0,0,0, date("m", time()), 1, date("Y",time())-1);
    $tEnd3 = mktime(23,59,59, date("m", time())+1, 0, date("Y",time())-1);
    $offset3 = -($tStart3 - $tStart1);

    // Zeitraum welcher dargestellt werden soll
    $CfgDaten["StartTime"] = $tStart1; 
    $CfgDaten["EndTime"] = $tEnd1; 

    // Serie - akt. Monat
    $serie = array();
    $serie['Id'] = 23960 /*[Devices\Aussen\Aussenthermostat Balkon\TEMPERATURE]*/;
    $serie['name'] = "Aktueller Monat";
    $serie['Unit'] = NULL;  // Einheit automatisch aus Variablenprofil
    $serie['AggType'] = 0;  // Stundenwerte
    $serie['ReplaceValues'] = false;
    $serie['RoundValue'] = 2;
    $serie['type'] = 'spline';
    $serie['step'] = false;
    $serie['yAxis'] = 0;
    $serie['shadow'] = true;
    $serie['lineWidth'] = 2;
    $serie['states']['hover']['lineWidth'] = 2;
    $serie['marker']['enabled'] = false;
    $serie['marker']['states']['hover']['enabled'] = true;
    $serie['marker']['states']['hover']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['radius'] = 4;
    $serie['marker']['states']['hover']['lineWidth'] = 1;
    $serie['StartTime'] = $tStart1;
    $serie['EndTime'] = $tEnd1;
    $serie['Offset'] = $offset1;
    $CfgDaten['series'][] = $serie;

    // Serie - Vormonat
    $serie = array();
    $serie['Id'] = 23960 /*[Devices\Aussen\Aussenthermostat Balkon\TEMPERATURE]*/;
    $serie['name'] = "Vormonat";
    $serie['Unit'] = NULL;  // Einheit automatisch aus Variablenprofil
    $serie['AggType'] = 0;  // Stundenwerte
    $serie['ReplaceValues'] = false;
    $serie['RoundValue'] = 2;
    $serie['type'] = 'spline';
    $serie['step'] = false;
    $serie['yAxis'] = 0;
    $serie['shadow'] = true;
    $serie['lineWidth'] = 2;
    $serie['dashStyle '] = 'Dot';
    $serie['states']['hover']['lineWidth'] = 2;
    $serie['marker']['enabled'] = false;
    $serie['marker']['states']['hover']['enabled'] = true;
    $serie['marker']['states']['hover']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['radius'] = 4;
    $serie['marker']['states']['hover']['lineWidth'] = 1;
    $serie['StartTime'] = $tStart2;
    $serie['EndTime'] = $tEnd2;
    $serie['Offset'] = $offset2;
    $CfgDaten['series'][] = $serie;

    // Serie - Vorjahr
    $serie = array();
    $serie['Id'] = 23960 /*[Devices\Aussen\Aussenthermostat Balkon\TEMPERATURE]*/;
    $serie['name'] = "Vorjahr";
    $serie['Unit'] = NULL;  // Einheit automatisch aus Variablenprofil
    $serie['AggType'] = 0;  // Stundenwerte
    $serie['ReplaceValues'] = false;
    $serie['RoundValue'] = 2;
    $serie['type'] = 'spline';
    $serie['step'] = false;
    $serie['yAxis'] = 0;
    $serie['shadow'] = true;
    $serie['lineWidth'] = 2;
    $serie['dashStyle '] = 'ShortDot';
    $serie['states']['hover']['lineWidth'] = 2;
    $serie['marker']['enabled'] = false;
    $serie['marker']['states']['hover']['enabled'] = true;
    $serie['marker']['states']['hover']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['radius'] = 4;
    $serie['marker']['states']['hover']['lineWidth'] = 1;
    $serie['StartTime'] = $tStart3;
    $serie['EndTime'] = $tEnd3;
    $serie['Offset'] = $offset3;
    $CfgDaten['series'][] = $serie;


    $id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
    $s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
    include($s['ScriptFile']); 

[khc]

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Pies.

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

      $CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;                  // ID des Highcharts Scripts

  // Überschriften
    $CfgDaten['title']['text']= "Pie - Daten aus gespeicherten Variable";
    $CfgDaten['subtitle']['text']= "Zeitraum: %STARTTIME% - %ENDTIME%";     // "" = Automatisch über Zeitraum
    $CfgDaten['subtitle']['Ips']['DateTimeFormat']= "M Y";             // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

    // Zeitraum welcher dargestellt werden soll
    $CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time()), date("Y",time())-1); // ab heute 00:00 Uhr
    $CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time();   // = bis jetzt

    // damit wird die Art des Aufrufes festgelegt
    $CfgDaten['RunMode'] = "file";     // file, script oder popup

    $serie = array();
    $serie['Id'] = 33441 /*[Devices\SpecialDevices\WebLogPro\Akt-Werte\Aktuelle Werte\E_TOTAL]*/;
    $serie['name'] = "Photovoltaik - Produktion";
    $serie['Unit'] = "kWh";
    $serie['AggType'] = 3;  // jedes Stück des pies ist stellt ein Monat dar
    $serie['ReplaceValues'] = false;
    $serie['RoundValue'] = 1;
    $serie['type'] = 'pie';
    $serie['allowPointSelect'] = true;
    $serie['size'] = 220;
    $serie['cursor'] = 'pointer';
    $serie['center'] = array(300,300);
    $serie['dataLabels']['enabled'] = true;
    $CfgDaten['series'][] = $serie;



    $id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
    $s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
    include($s['ScriptFile']); 

[khc]

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Pies.

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

Achtung! Der Tooltip für die Binären Werte funktioniert aktuell in diesem Beispiel nicht nicht so wie ich mir das vorstelle.

      $CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;                  // ID des Highcharts Scripts

  // Überschriften
    $CfgDaten['title']['text']= "ReplaceValues - Drehgriffkontakte und TF-Kontakte";
    $CfgDaten['subtitle']['text']= "Zeitraum: %STARTTIME% - %ENDTIME%";     // "" = Automatisch über Zeitraum
    $CfgDaten['subtitle']['Ips']['DateTimeFormat']= "(D) d.m.Y H:i";             // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

    // Zeitraum welcher dargestellt werden soll
    $CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time())-3, date("Y",time())); // ab heute 00:00 Uhr
    $CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time();   // = bis jetzt

    // damit wird die Art des Aufrufes festgelegt
    $CfgDaten['RunMode'] = "script";     // file, script oder popup

//    $CfgDaten['tooltip']['formatter'] = "@function() {return false;}@";
    $CfgDaten['tooltip']['formatter'] ="";
    $CfgDaten['tooltip']['valuePrefix'] = "";
    $CfgDaten['tooltip']['useHTML'] = true;
    $CfgDaten['tooltip']['xDateFormat'] = "%Y-%m-%d %H:%M";

    // Definition Y-Achsen
    $CfgDaten["yAxis"][0]['title']['text'] = "Temperaturen";
    $CfgDaten["yAxis"][0]['Unit'] = "°C";
    $CfgDaten["yAxis"][0]['opposite'] = false;
    $CfgDaten["yAxis"][0]['tickInterval'] = 5;
    $CfgDaten["yAxis"][0]['min'] = 0;
    $CfgDaten["yAxis"][0]['max'] = 40;

    $CfgDaten["yAxis"][1]['title']['text'] = "Luftfeuchte";
    $CfgDaten["yAxis"][1]['Unit'] = "%";
    $CfgDaten["yAxis"][1]['opposite'] = true;
    $CfgDaten["yAxis"][1]['min'] = 0;
    $CfgDaten["yAxis"][1]['max'] = 80;

    $CfgDaten["yAxis"][2]['title']['text'] = "Drehgriffkontakte / Türkontakte";
    $CfgDaten["yAxis"][2]['labels']['formatter'] = "@function() { if (this.value == 0) return 'geschlossen'; if (this.value == 1) return 'gekippt';if (this.value == 2) return 'geöffnet' }@";
    $CfgDaten["yAxis"][2]['opposite'] = true;
    $CfgDaten["yAxis"][2]['tickInterval'] = 1 ;
    $CfgDaten["yAxis"][2]['min'] = 0;
    $CfgDaten["yAxis"][2]['max'] = 8;

    // series
    $serie = array();
    $serie['Id'] = 23960;
    $serie['name'] = "Aussentemperatur";
    $serie['Unit'] = NULL;
    $serie['ReplaceValues'] = false;
    $serie['RoundValue'] = 1;
    $serie['type'] = 'spline';
    $serie['step'] = false;
    $serie['yAxis'] = 0;
    $serie['shadow'] = true;
    $serie['lineWidth'] = 1;
    $serie['states']['hover']['lineWidth'] = 2;
    $serie['marker']['enabled'] = false;
    $serie['marker']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['enabled'] = true;
    $serie['marker']['states']['hover']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['radius'] = 4;
    $serie['marker']['states']['hover']['lineWidth'] = 1;
    $serie['tooltip']['valueSuffix'] = " °C";
    $CfgDaten['series'][] = $serie;

    $serie = array();
    $serie['Id'] = 11590;
    $serie['name'] = "Luftfeuchte";
    $serie['Unit'] = NULL;
    $serie['ReplaceValues'] = false;
    $serie['RoundValue'] = 1;
    $serie['type'] = 'spline';
    $serie['step'] = false;
    $serie['yAxis'] = 1;
    $serie['shadow'] = true;
    $serie['lineWidth'] = 1;
    $serie['states']['hover']['lineWidth'] = 2;
    $serie['marker']['enabled'] = false;
    $serie['marker']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['enabled'] = true;
    $serie['marker']['states']['hover']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['radius'] = 4;
    $serie['marker']['states']['hover']['lineWidth'] = 1;
    $serie['tooltip']['valueSuffix'] = " %";
    $CfgDaten['series'][] = $serie;

    $serie = array();
    $serie['Id'] = 29410;
    $serie['name'] = "Tür/Fenster Kontakt";
    $serie['Unit'] = array(0=>'geschlossen', 1=>'geöffnet');
    $serie['ReplaceValues'] = array(0=>0, 1=>2);
    $serie['RoundValue'] = 1;
    $serie['type'] = 'line';
    $serie['step'] = true;
    $serie['yAxis'] = 2;
    $serie['shadow'] = true;
    $serie['lineWidth'] = 1;
    $serie['states']['hover']['lineWidth'] = 2;
    $serie['marker']['enabled'] = false;
    $serie['marker']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['enabled'] = true;
    $serie['marker']['states']['hover']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['radius'] = 4;
    $serie['marker']['states']['hover']['lineWidth'] = 1;
    $CfgDaten['series'][] = $serie;

    $serie = array();
    $serie['Id'] = 44451;
    $serie['name'] = "Drehgriffkontakt";
    $serie['Unit'] = array(0=>'geschlossen',1=>'gekippt',2=>'geöffnet');
    $serie['ReplaceValues'] =array(0=>0, 1=>1, 2=>2);
    $serie['RoundValue'] = 1;
    $serie['type'] = 'line';
    $serie['step'] = true;
    $serie['yAxis'] = 2;
    $serie['shadow'] = true;
    $serie['lineWidth'] = 1;
    $serie['states']['hover']['lineWidth'] = 2;
    $serie['marker']['enabled'] = false;
    $serie['marker']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['enabled'] = true;
    $serie['marker']['states']['hover']['symbol'] = 'circle';
    $serie['marker']['states']['hover']['radius'] = 4;
    $serie['marker']['states']['hover']['lineWidth'] = 1;
    $CfgDaten['series'][] = $serie;


    $id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
    $s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
    include($s['ScriptFile']); 

[khc]

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Pies welchem die Daten aus dem Cfg-Script übergeben werden..

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

      $CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;                  // ID des Highcharts Scripts

  // Überschriften
    $CfgDaten['title']['text']= "Pie - Datenübergabe aus Script";
    $CfgDaten['subtitle']['text']= " ";     // "" = Automatisch über Zeitraum
    $CfgDaten['subtitle']['Ips']['DateTimeFormat']= "M Y";             // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

    // Zeitraum welcher dargestellt werden soll
    $CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time()), date("Y",time())-1); // ab heute 00:00 Uhr
    $CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time();   // = bis jetzt

    // damit wird die Art des Aufrufes festgelegt
    $CfgDaten['RunMode'] = "script";     // file, script oder popup

    // Tooltip abändern
    $CfgDaten['tooltip']['formatter'] = "@function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';}@";

    // Übergabe der Werte an das Pie direkt übergebene Werte
    $serie = array();
    $serie['Unit'] = '';
    $serie['type'] = 'pie';
    $serie['name'] = 'Browser share';
    
    $serie['data'][] = ['Firefox',   45.0];
    $serie['data'][] = ['IE',       26.8];
    $serie['data'][] = array(
                        'name'=> 'Chrome',
                        'y'=> 12.8,
                        'sliced'=> true,
                        'selected'=> true
                        );
    $serie['data'][] = ['Safari',    8.5];
    $serie['data'][] = ['Opera',     6.2];
    $serie['data'][] = ['Others',   0.7];

    $serie['allowPointSelect'] = true;
    $serie['cursor'] = 'pointer';
    $serie['size'] = 200;
    $serie['dataLabels']['enabled'] = true;
    $CfgDaten['series'][] = $serie;

    $id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
    $s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
    include($s['ScriptFile']); 

[khc]

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Charts welches aus unterschiedlichen Serien-Typen besteht. Das Beispiel wurde aus der Highcharts-Demo-Gallery kopiert (JSON Originaleinstellungen siehe hier).

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

   // ---->  hier muss EURE HighChartScriptId eingebenen werden
    $CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;                  // ID des Highcharts Scripts

      // Überschriften
    $CfgDaten['title']['text']= "Combination chart";
    $CfgDaten['subtitle']['text']= " ";
    $CfgDaten['subtitle']['Ips']['DateTimeFormat']= "(D) d.m.Y H:i";             // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

    // Zeitraum welcher dargestellt werden soll
    $CfgDaten['StartTime'] = 0;
    $CfgDaten['EndTime'] = 0;

    // damit wird die Art des Aufrufes festgelegt
    $CfgDaten['RunMode'] = "script";     // file, script oder popup

    $CfgDaten['credits']['enabled'] = true;
    $CfgDaten['credits']['href'] = "http://www.highcharts.com/demo/combo";
    $CfgDaten['credits']['text'] = "... gehe zu Original-Highcharts-Beispiel @ Highcharts Demo Gallery";


    // Tooltip anpassen
    $CfgDaten['tooltip']['formatter'] = "@function() {
                var s;
                if (this.point.name) { // the pie chart
                    s = ''+
                        this.point.name +': '+ this.y +' fruits';
                } else {
                    s = ''+
                        this.x  +': '+ this.y;
                }
                return s;
            }@";
    $CfgDaten['tooltip']['formatter'] =" ";
    
    // X-Achse
    $CfgDaten['xAxis']['type'] = "linear";
    $CfgDaten['xAxis']['categories'] = ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'];
    $CfgDaten['xAxis']['min'] = false;     // mit false wird festgelegt, dass kein Min vorgegeben werden soll
    $CfgDaten['xAxis']['max'] = false;     // mit false wird festgelegt, dass kein Min vorgegeben werden soll
    
    // Y-Achse
    $axis = array();
    $axis['title']['text'] = "Y-Values";
    $axis['Unit'] = "";
    $CfgDaten['yAxis'][] = $axis;

    // Serien.....
    $serie = array();
    $serie['type'] = 'pie';
    $serie['name'] = 'Total consumption';
    $serie['data'] =     [[
                "name"=> 'Jane',
                "y"=> 13,
                "color"=> '#4572A7' // Jane's color
            ], [
                "name"=> 'John',
                "y"=> 23,
                "color"=> '#AA4643' // John's color
            ], [
                "name"=> 'Joe',
                "y"=> 19,
                "color"=> '#89A54E' // Joe's color
            ]];
    $serie['center'] = [100, 100];
    $serie['size'] = 100;
    $serie['showInLegend'] = false;
    $serie['dataLabels']['enabled'] = false;
    $CfgDaten['series'][] =$serie;

    // Beschriftung für pie
    $lbl['html'] ='Total fruit consumption';
    $lbl['style']['left'] = '40px';
    $lbl['style']['top'] = '8px';
    $lbl['style']['color'] = 'white';
   $CfgDaten['labels']['items'][] = $lbl;

    $serie = array();
    $serie['type'] = 'column';
    $serie['name'] = "Jane";
    $serie['data'] =     [3, 2, 1, 3, 4];
    $CfgDaten['series'][] =$serie;
    
    $serie = array();
    $serie['type'] = 'column';
    $serie['name'] = "John";
    $serie['data'] =     [2, 3, 5, 7, 6];
    $CfgDaten['series'][] =$serie;
    
    $serie = array();
    $serie['type'] = 'column';
    $serie['name'] = "Joe";
    $serie['data'] =     [3, 2.67, 3, 6.33, 3.33];
    $CfgDaten['series'][] =$serie;


    $serie = array();
    $serie['type'] = 'spline';
    $serie['name'] = 'Average';
    $serie['data'] = [3, 2.67, 3, 6.33, 3.33];
    $CfgDaten['series'][] =$serie;


   // ---->  hier muss die ScriptId des "leeren Cfg-Scripts" eingetragen werden
    $id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
    $s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
    include($s['ScriptFile']);