+ Antworten
Seite 2 von 12 ErsteErste 1 2 3 4 ... LetzteLetzte
Ergebnis 11 bis 20 von 115
  1. #11
    Registriert seit
    Oct 2010
    Ort
    HH
    Beiträge
    4,613

    Standard HigCharts - Erweiterung PlotBands yAxis

    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:
    PHP-Code:
    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):
    PHP-Code:
    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:
    PHP-Code:
    // 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)

    PHP-Code:
        // 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)
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke.net HC-Erweiterung plotBands Beispiel1.png 
Hits:	3999 
Größe:	130.2 KB 
ID:	16100   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke.net HC-Erweiterung plotBands Beispiel2.png 
Hits:	4081 
Größe:	87.7 KB 
ID:	16101   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke.net HC-Erweiterung plotBands Beispiel3.png 
Hits:	3875 
Größe:	59.4 KB 
ID:	16102  
    Geändert von Raketenschnecke (04.04.12 um 15:30 Uhr)
    mit gebücktem Gruss
    Raketenschnecke
    IPS-Projekte und -Tools auf
    www.raketenschnecke.net

  2. #12
    Registriert seit
    Oct 2010
    Ort
    HH
    Beiträge
    4,613

    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?
    mit gebücktem Gruss
    Raketenschnecke
    IPS-Projekte und -Tools auf
    www.raketenschnecke.net

  3. #13
    Registriert seit
    Mar 2007
    Ort
    Oberhausen-Rheinhausen
    Beiträge
    399

    Standard Änderungen von V1.x auf V2.x

    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']
    Geändert von khc (06.05.12 um 22:02 Uhr)

    iP-Symcon 5.2 (Windows 10 x64 auf ESXi 5)
    Z-Wave | Homematic | IRTrans (Ethernet) | WebLogPro' | eHZ | Bose Lifestyle 650 | SONOS | LAN-T 846 | verschiedene IP-Cams

  4. #14
    Registriert seit
    Mar 2007
    Ort
    Oberhausen-Rheinhausen
    Beiträge
    399

    Standard Beispiel Konfigurationen für Highcharts 2.x

    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 .
    Angehängte Dateien Angehängte Dateien
    Geändert von khc (07.05.12 um 08:07 Uhr)

    iP-Symcon 5.2 (Windows 10 x64 auf ESXi 5)
    Z-Wave | Homematic | IRTrans (Ethernet) | WebLogPro' | eHZ | Bose Lifestyle 650 | SONOS | LAN-T 846 | verschiedene IP-Cams

  5. #15
    Registriert seit
    Mar 2007
    Ort
    Oberhausen-Rheinhausen
    Beiträge
    399

    Standard Cfg V2.x - Bsp: Columns

    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 .

    PHP-Code:
       // ---->  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,01,1,2012); 
        
    $CfgDaten['EndTime'] = mktime(23,59,591,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']); 
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von khc (07.05.12 um 08:08 Uhr)

    iP-Symcon 5.2 (Windows 10 x64 auf ESXi 5)
    Z-Wave | Homematic | IRTrans (Ethernet) | WebLogPro' | eHZ | Bose Lifestyle 650 | SONOS | LAN-T 846 | verschiedene IP-Cams

  6. #16
    Registriert seit
    Mar 2007
    Ort
    Oberhausen-Rheinhausen
    Beiträge
    399

    Standard Cfg V2.x - Bsp: Offset - Unterschiedliche Zeiträume in einem Chart

    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 .

    PHP-Code:
          $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,0date("m"time()), date("d",time()), date("Y",time())-1); // ab heute 00:00 Uhr
        
    $CfgDaten['EndTime'] = mktime(23,59,59date("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,0date("m"time()), 1date("Y",time()));
        
    $tEnd1 mktime(23,59,59date("m"time())+ 10date("Y",time()));
        
    $offset1 =  0;

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

        
    //Vorjahr
        
    $tStart3 mktime(0,0,0date("m"time()), 1date("Y",time())-1);
        
    $tEnd3 mktime(23,59,59date("m"time())+10date("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']); 
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von khc (07.05.12 um 08:08 Uhr)

    iP-Symcon 5.2 (Windows 10 x64 auf ESXi 5)
    Z-Wave | Homematic | IRTrans (Ethernet) | WebLogPro' | eHZ | Bose Lifestyle 650 | SONOS | LAN-T 846 | verschiedene IP-Cams

  7. #17
    Registriert seit
    Mar 2007
    Ort
    Oberhausen-Rheinhausen
    Beiträge
    399

    Standard Cfg V2.x - Bsp: Pie - Daten aus gespeicherten Variable

    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 .


    PHP-Code:

          $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,0date("m"time()), date("d",time()), date("Y",time())-1); // ab heute 00:00 Uhr
        
    $CfgDaten['EndTime'] = mktime(23,59,59date("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']); 
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von khc (07.05.12 um 08:08 Uhr)

    iP-Symcon 5.2 (Windows 10 x64 auf ESXi 5)
    Z-Wave | Homematic | IRTrans (Ethernet) | WebLogPro' | eHZ | Bose Lifestyle 650 | SONOS | LAN-T 846 | verschiedene IP-Cams

  8. #18
    Registriert seit
    Mar 2007
    Ort
    Oberhausen-Rheinhausen
    Beiträge
    399

    Standard Bsp: ReplaceValues - Drehgriffkontakte und TF-Kontakte

    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.

    PHP-Code:
          $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,0date("m"time()), date("d",time())-3date("Y",time())); // ab heute 00:00 Uhr
        
    $CfgDaten['EndTime'] = mktime(23,59,59date("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'] = ;
        
    $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=>01=>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=>01=>12=>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']); 
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von khc (08.05.12 um 16:44 Uhr)

    iP-Symcon 5.2 (Windows 10 x64 auf ESXi 5)
    Z-Wave | Homematic | IRTrans (Ethernet) | WebLogPro' | eHZ | Bose Lifestyle 650 | SONOS | LAN-T 846 | verschiedene IP-Cams

  9. #19
    Registriert seit
    Mar 2007
    Ort
    Oberhausen-Rheinhausen
    Beiträge
    399

    Standard Bsp: Pie - Datenübergabe durch Script

    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 .

    PHP-Code:
          $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,0date("m"time()), date("d",time()), date("Y",time())-1); // ab heute 00:00 Uhr
        
    $CfgDaten['EndTime'] = mktime(23,59,59date("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']); 
    Angehängte Grafiken Angehängte Grafiken  

    iP-Symcon 5.2 (Windows 10 x64 auf ESXi 5)
    Z-Wave | Homematic | IRTrans (Ethernet) | WebLogPro' | eHZ | Bose Lifestyle 650 | SONOS | LAN-T 846 | verschiedene IP-Cams

  10. #20
    Registriert seit
    Mar 2007
    Ort
    Oberhausen-Rheinhausen
    Beiträge
    399

    Standard Bsp: Column, line and pie (Highcharts Demo Gallery)

    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 .


    PHP-Code:
       // ---->  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'] = [100100];
        
    $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'] =     [32134];
        
    $CfgDaten['series'][] =$serie;
        
        
    $serie = array();
        
    $serie['type'] = 'column';
        
    $serie['name'] = "John";
        
    $serie['data'] =     [23576];
        
    $CfgDaten['series'][] =$serie;
        
        
    $serie = array();
        
    $serie['type'] = 'column';
        
    $serie['name'] = "Joe";
        
    $serie['data'] =     [32.6736.333.33];
        
    $CfgDaten['series'][] =$serie;


        
    $serie = array();
        
    $serie['type'] = 'spline';
        
    $serie['name'] = 'Average';
        
    $serie['data'] = [32.6736.333.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']); 
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von khc (12.05.12 um 19:04 Uhr)

    iP-Symcon 5.2 (Windows 10 x64 auf ESXi 5)
    Z-Wave | Homematic | IRTrans (Ethernet) | WebLogPro' | eHZ | Bose Lifestyle 650 | SONOS | LAN-T 846 | verschiedene IP-Cams

Ähnliche Themen

  1. Q&A Highcharts - Multigraph V1.0
    Von khc im Forum Skripte, PHP, SQL
    Antworten: 784
    Letzter Beitrag: 25.08.19, 19:03
  2. MultiGraph mit GoogleChart
    Von meike0_0 im Forum Skripte, PHP, SQL
    Antworten: 456
    Letzter Beitrag: 15.06.19, 23:00
  3. Highcharts - Multigraph V1.0 - Dashboard
    Von UH368 im Forum Skripte, PHP, SQL
    Antworten: 13
    Letzter Beitrag: 23.05.12, 15:04
  4. HighCharts - Problem bei der Tooltip-Darstellung mit Pic's
    Von Raketenschnecke im Forum Skripte, PHP, SQL
    Antworten: 6
    Letzter Beitrag: 30.03.12, 08:27
  5. Größe bei Multigraph wird nicht geändert
    Von Heidewinkler im Forum IP-Symcon WIIPS für Version 1.0
    Antworten: 1
    Letzter Beitrag: 18.03.07, 12:04