+ Antworten
Seite 1 von 12 1 2 3 11 ... LetzteLetzte
Ergebnis 1 bis 10 von 115
  1. #1
    Registriert seit
    Mar 2007
    Ort
    Neulußheim
    Beiträge
    353

    Standard Highcharts - Multigraph

    Thread der Übersicht halber aufgetrennt in Support-Thread und Script-Vorstellung " Highcharts - Multigraph" (dieser Thread).

    Fragen, Antworten und Support bitte nicht in diesem Thread sondern hier: LINK
    Hallo Community,

    hier die Implementierung von Highcharts in IPS. Damit sind recht einfach sehr ansprechende Multicharts zu realisieren.
    Highcharts ist für die nichtkommerzielle Nutzung frei, basiert auf Javascript und ist interaktiv. Ich finde die Ergebnisse lassen sich sehen und werten das WebFront enorm auf.

    Was muss gemacht werden um das Ding zum Laufen zu bringen (ab V3.00):
    1. IPS-Highcharts-Dateien aus Anhang herunterladen und entpacken.
    2. Daraus die “IPS-Highcharts.php” in das“webfront/user/“ Verzeichnis kopieren
    3. „Highcharts_Vxxxx“ Scripts in IPS einspielen
    4. Eine String-Variable mit dem Profil ~HTMLBox anlegen
    5. Einspielen und Parametrieren des ConfigScripts (siehe Anhang)
    6. Starten des ConfigScripts


    optional: wenn man die Highchart-Scripte und jQuery lokal halten will:
    1. Download der JavaScripts für Highcharts von highcharts.com
    2. und heruntergeladenes ZIP (von highcharts.com) ins Verzeichnis „webfront/user” entpacken
    3. In Config ['Ips']['ScriptsHighCharts'] anpassen

    1. Download der JavaScripts für jQuery -->
    2. in lokalen Verzeichnis ablegen und in Config ['Ips']['Scriptsjquery'] anpassen


    Bis zur V2.0003 war der Ablauf folgendermaßen:
    1. Download der JavaScripts für Highcharts von highcharts.com
    2. und heruntergeladenes ZIP (von highcharts.com) ins Verzeichnis „webfront/user” entpacken
    3. Aktuellste IPS-Highcharts-Dateien aus Anhang herunterladen und entpacken.
    4. Daraus die “IPS_Template.php” in das“webfront/user/Highcharts“ Verzeichnis kopieren
    5. „Highcharts_Vxxxx“ Scripts in IPS einspielen
    6. Eine String-Variable mit dem Profil ~HTMLBox anlegen
    7. Einspielen und Parametrieren des ConfigScripts (siehe Anhang)
    8. Starten des ConfigScripts

    ChangeLog:

    V1.0001
    • FIX: Keine Darstellung im Firefox
    • NEU: CfgDaten - Übernahme des Variablenprofils in die Einheit (Unit=NULL)
    • NEU: CfgDaten - Width und Height: Eingabe in px, bei Width=0 wird 100% verwendet

    V1.0002
    • NEU: Der komplette Highcharts-Parmeter-String (siehe auch Highcharts - Options Reference) kann über das Config-File-Script übergeben werden -> dadurch beliebige Anpassungen und Darstellungen möglich, u.a. Wunsch von @wgreipl (dynamische X-Achse) realisierebar
    • NEU: Wochentage, Monatsnamen auf Deutsch -> im IPS_Template.php
    • NEU: Im Tooltip wird zusättlich der Wochentag angezeigt
    • NEU: Möglichkeit des automatischen Aktualisierens der Daten beim Anzeigen der Content-HTML-Textbox (siehe hierzu am Ende des Config-Scripts) - alte Möglichkeit mit Übergabe der Daten in die tmp-Datei ist weiterhin funktionsfähig

    V1.0003
    • NEU: RunMode [Script oder File] über Parameter in CfgDaten einstellbar
    • NEU: CheckCfgDaten: Zum Prüfen bestimmter notwendiger Parameter im CfgDaten und Korrektur (wird in Config Script aufgerufen)
    • NEU: Einstellung per Config wann Werte als Stunden bzw. Tageswerte herangezogen werden (AggregatedValues)
    • NEU: AggregatedValues Einstellungen auch pro Serie möglich
    • NEU: AggregatedValues.MixedMode zum Kombinieren der Einstellungen (z.B.: x Tage alle Werte und danach x Tage nur Stunden Werte, usw.)
    • NEU: AggregatedValues.NoLoggedValues liest jetzt Werte bis zu diesem Zeitpunkt (zuvor wurden wenn der Zeitraum größer war wurden gar keine Werte gelesen)
    • FIX: IPS_Template.php: Umlaut im 'März' wurde nicht richtig angezeigt
    • FIX: Deutsche Tage im Zeitraum

    V1.0004
    • NEU: Integration Pie-Charts
    • NEU: CfgDaten: Wenn "ContentVarableId" = -1 und der Script unter der Content Variable angeordnet wird wird die ContentID selbständig ermittelt.
    • FIX: MixedMode. Wenn Zeitraum durch Berechnung kleiner als Startwert war, wurden diese Werte ebenfalls geladen

    V1.0005 (für IP-Symcon 2.5)
    • NEU: Pie-Charts: Automatisches Auslesen von AggValues, neuer Parameter: AggType und AggNameFormat
    • FIX: Aktueller Wert wird bei Zählern nicht eingeblesen
    • NEU: Darstellung von Zählern unabhängig von den Mixed Mode Einstellungen, z.B: als Column

    V1.0006
    • FIX: Sortieren der eingelesen Daten da sonst die aktuellste Highcharts Version 2.2.0 Probleme macht
    • NEU: Je Serie kann ein eigener Zeitbereich vorgeben werden ("StartTime" und "EndTime")
    • NEU: von @Neon: "Offset" je Serie, in Verbindung mit eigenem Zeitbereich ist es dadurch möglich die ein und selbe Variable zb. für den akt. Monat und Vormonat gleichzeitig darzustellen
    • NEU: von @Raketenschnecke: Je Serie kann optional über "RoundValue" festgelegt werden auf wie viele Nachkommastellen gerundet werden soll
    • NEU: von @axelp : Je Serie kann optional über "ScaleFactor" ein Skalierungsfaktor definiert werden
    • NEU: Konfigurationsmöglichkeiten für SubTitle ("SubTitleDateTimeFormat" und "SubTitleFormat")
    • NEU: von @Raketenschnecke: Je Serie kann optional über "AggValue" definiert werden welcher Value (Min, Max oder Avg) im Chart angezeigt wird
    • NEU: von @Raketenschnecke: Integration der Highcharts-PlotBands
    • NEU: Möglichkeit des Aufrufs als WFCPopup und der Darstellung von Highcharts in diesem Fenster.
    • NEU: Jeder Serie können über "Data" von extern Werte übergeben werden. Dann werden für diese Serie aber keine Werte aus der DB gelesen.

    V1.0007
    • FIX: Bugfix von V1.006 (AggType für Zählerwerte und AggregatedValues)
    • NEU: AggregatedValues können jetzt auch Weeks, Months und Years vorgegeben werden (Achtung! Die Parametrierungssystematik hat sich geändert (Beschreibung siehe Cfg-Script))
    • NEU: von @Raketenschnecke: Möglichkeit der Farbeinstellung für Achsen

    V2.00
    • Grundlegende Änderungen der Konfigurationsmöglichkeiten, dadurch sollten fast alle originalen Highcharts Parameter genutzer werden können. Eine genaue Beschreibung der nutzbaren Parameter ist hier zu finden Highcharts - Options Reference
    • V1.x Konfigurationen sollten weitestgehend unverändert oder durch kleiner Anpassungen laufen - Eine detaillierte Beschreibung der Änderungen ist hier zu finden
    • Achtung! Es die IPS_Template.php ausgetauscht werden. Dies ist nicht mit der V1.x kompatibel.

    V2.01
    • NEU: neues IPS_Template.php mit jquery 1.7.2
    • FIX: krsort durch array_reverse getauscht, da krsort Probleme beim json_encode macht
    • FIX: Tooltip bei ReplaceValues war fehlerhaft
    • FIX: Fehler beim Auswerten der AggregatedValues behoben
    • NEU: über 'CreateConfigFileByPathAndFilename($stringForCfgFi le, $path, $filename)' kann eine Tmp_datei mit bel. Namen geschrieben werden
    • Start- und Endzeitpunkt der X-Achse wurde automatisch um 5 Minuten korrigiert -> jetzt Start und Ende genau wie vorgegeben

    V2.02
    • NEU: Parameter ['Ips']['Dashboard'] für die Darstellung im Dashboard
    • FIX: RunType=file: Wenn Highstock vorgewählt wurde wurde das tmp File nicht in die Highstock-Verzeichnis geschrieben
    • NEU: Integration Highstock: ['navigator'], ['rangeSelector'] und ['scrollbar']
    • NEU: Integration Highstock: Zusätzliche series.type 'candlestick' und 'ohlc' erlauben

    V3.00
    • NEU: Entfernen der Prüfung des Highcharts-Types --> dadurch alle Highcharts-Charttypen verwendet werden können
    • NEU: Parameter falls Script Dateien lokal gehalten werden sollen: ['Ips']['ScriptsHighCharts'],['Ips']['ScriptsHighstock'],['Ips']['ScriptsTheme'], ['Ips']['Scriptsjquery']
    • NEU: ['Ips']['HtmlScript'] default = leer, dann wird der komplette HtmlCode erzeugt, kann aber auch
    • NEU: IPS-Highcharts.php ist die neue Template.php (kommt jetzt direkt in Users Verzeichnis)
    • NEU: ['HighChart']['AddScrips'][] Array von zusätzlichen Scripten (z.B.: higcharts-3d.js)

    V3.01
    • FIX: Umstellung auf IPS 4.0 -> $var['VariableValue']['ValueType'] --> $var['VariableValue']
    • FIX: Probleme mit Umlauten -> mb_detect_encoding an Stelle $item = utf8_encode($item);

    Schaut direkt beim Hersteller die Demos an, da bekommt man einen guten Eindruck was machbar ist (siehe Highcharts Demo Gallery).

    Hier ist auch noch ein Link mit welchen man die Performance der verschiedenen Chart-Typen gut testen kann.


    Viel Spaß!

    Anbei noch ein paar Screenshots zum "Heiß machen".....
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Screenshot1.png 
Hits:	3636 
Größe:	46.6 KB 
ID:	11972   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Screenshot2.png 
Hits:	3198 
Größe:	110.2 KB 
ID:	11973   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Screenshot3.png 
Hits:	2841 
Größe:	67.4 KB 
ID:	11974   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Screenshot4.png 
Hits:	2990 
Größe:	185.0 KB 
ID:	11975   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	V1.004-Screenshot_mitPie.png 
Hits:	2407 
Größe:	73.6 KB 
ID:	12542  

    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	V1.0005_Zählerwerte.png 
Hits:	2339 
Größe:	98.0 KB 
ID:	14371  
    Angehängte Dateien Angehängte Dateien
    Geändert von khc (25.11.16 um 16:47 Uhr) Grund: IPS-Template hinzugefügt

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

  2. #2
    Registriert seit
    Oct 2007
    Ort
    Villach,Kärnten,Österreich
    Beiträge
    2,807

    Ganz simpel mit drei Variablen und passenden Profilen in IPS.
    Ich hab den gleichen Container auf mehreren Seiten und blende ihn per Widget ein oder aus.

    Hier übrigens ein Vergleich mit dem Graph vom RRD tool. Ich lass das Highchart jetzt mal so spasseshalber mitlaufen.

    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	plotzeitraum.PNG 
Hits:	3221 
Größe:	80.8 KB 
ID:	12012

    gruß
    bb

  3. #3
    Registriert seit
    Oct 2007
    Ort
    Villach,Kärnten,Österreich
    Beiträge
    2,807

    Servus bernardo

    Na wenns so schlimm ist, und du gar nimmer warten kannst, dann findest hier meine Scripts für BAR & PIE Plots.
    Sie basierten auf KHCs Vorarbeit, sind aber wesentlich simpler aufgebaut.

    Ich habs mir für die Darstellung von Betriebsstunden und Betriebskosten hardgecodet.
    Die Daten werden (noch) nicht aus der Datenbank gelesen, sondern müssen als Variablen vorliegen.
    Ich denke mal für diesen Anwendungszweck ist das einfacher und flexibler, denn ich mag kleine einfache (hardgecodete) Module oft lieber als komplexe ALL-IN-ONE Lösungen.

    Installation und Konfiguration ist gleich wie das originale KHCs Highchart.
    Wennst das schon hast brauchst nur mehr die untenstehenden Scripte anlegen und nach Lust und Laune parametrieren.
    Konfiguration ist gleich wie beim Original und sollte eigentlich selbsterklärend sein.

    Alle Higchart spezifischen Konfigurationsparameter sind in der gleiche Syntax wie auf der Highchart Supportseite Supportseite. und können nach belieben von dort per Copy&Paste eingefügt werden.

    In den angehängten Scripten sind natürlich meine ID drinnen, die müssen natürlich an deine angepaßt werden.


    Hier das Highchart Script:
    sinnvollerweise sollte dies als Highchart_PIE_BAR gespeichert werden.

    PHP-Code:
    <?
        
    //--------------------------------------------------------------------------------------------------------------------------------
        // Für die Darstellung der Graphen wird das HTML5/JS Framework "Highcharts" der Fa. Highslide Software verwendet (www.highcharts.com)
        // Alle Rechte dieses Frameworks liegen bei Highslide Software
        // 'Highcharts' kann unter folgenden Bedinungen kostenlos eingesetzt werden:
        //     Namensnennung — Sie müssen den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen.
        //     Keine kommerzielle Nutzung — Dieses Werk bzw. dieser Inhalt darf nicht für kommerzielle Zwecke verwendet werden.
        // Download unter wwww.highcharts.com/download und die Dateien einfach in das Webfront
        // Demos siehe http://www.highcharts.com/demo/

        //--------------------------------------------------------------------------------------------------------------------------------
        // Changelog: V1.0001
        // 30.05.2011  KHC   FIX        Keine Darstellung im Firefox (embed -> iframe) und frameborder = 0 für Darstellung per iFrame
        // 30.05.2011  KHC   NEU          Über Unit=NULL im Serien-Parmeter kann definiert werden, dass das VariableProfile von IPS als Tooltip verwendet wird
        // 30.05.2011  KHC   NEU      CfgDaten: Width und Height werden in px eingegeben und nicht mehr als String, bei width = 0 für 100% möglich
        // Changelog: V1.0002
        // 30.05.2001     KHC   FIX      Wenn keine Series definiert sind - Fehler abgefangen (brauche ich noch später....)
        // 31.05.2011  KHC   NEU      Möglichkeit der Übergabe des vollständigen HighchartConfigStrings (bei keiner Übergabe wird der aktuelle als Defaul genommen)
        // 31.05.2011  KHC   NEU      "IPS_Template.php" - Format auf Deutsch (Tage, Monate)
        // 31.05.2011  KHC   NEU      Im Tooltip wird jetzt zusätzlich der Wochentag angezeigt
        // 03.06.2011  KHC   NEU      Möglichkeit dass beim Anzeigen der Textbox der Inhalt automatisch aktualisiert wird (siehe Bsp.) in Config Script
        // 03.06.2011  KHC   NEU         und dadurch 2 Möglichkeiten der Nutzung: 1. über Textfile, 2. über ScriptId.
        //--------------------------------------------------------------------------------------------------------------------------------


        //20.5.2011  BB:  Based on KHCs Highchart implementation this moded version to plot BAR & PIE Graph
        


        // ------------------------------------------------------------------------
        // WriteContentWithFilename
        //    Mit dieser Funktion wird der Content-String geschrieben.
        //    IN: $CfgDaten = ..
        //    IN: $tmpFilename = Der Dateiname welche die Config Daten enthält
        //    OUT: der erzeugte Config String
        // ------------------------------------------------------------------------
        
    function WriteContentWithFilename($CfgDaten$tmpFilename)
        {
            
    // damit das Ding auch sauber dargestellt wird
            
    $Height $CfgDaten["HighChart"]["Height"] + 16;

                
    SetValue($CfgDaten["ContentVariableId"], '<iframe src="./User/Highcharts/IPS_Template.php?CfgFile='$tmpFilename.'" width="100%" height="'$Height .'" frameborder="0" scrolling="no"></iframe>');
            }
        
    // ------------------------------------------------------------------------
        // WriteContentWithScriptId
        //    Mit dieser Funktion wird der Content-String geschrieben.
        //    IN: $CfgDaten = ..
        //    IN: $scriptId = Die Script Id welche den ConfigString enthält.
        //    OUT: der erzeugte Config String
        // ------------------------------------------------------------------------
        
    function WriteContentWithScriptId($CfgDaten$Self)
        {
            
    // damit das Ding auch sauber dargestellt wird
            
    $Height $CfgDaten["HighChart"]["Height"] + 16;

                if (
    $Self >= 0)
                
    SetValue($CfgDaten["ContentVariableId"], '<iframe src="./User/Highcharts/IPS_Template.php?ScriptId='$Self.'" width="100%" height="'$Height .'" frameborder="0" scrolling="no"></iframe>');
            else
                
    SetValue($CfgDaten["ContentVariableId"], 'Falsche Parameter beim Funktionsaufruf "WriteContentTextbox"');
        }

        
    // ------------------------------------------------------------------------
        // CreateConfigString
        //    Erzeugt den für Higcharts benötigten Config String und gibt diesen als String zurück
        //    IN: $CfgDaten = ..
        //    OUT: der erzeugte Config String
        // ------------------------------------------------------------------------
        
    function CreateConfigString($CfgDaten)
        {

            
    // Breite und Höhe anpassen
            
    if ($CfgDaten["HighChart"]["Width"] == 0)
                
    $CfgDaten["HighChart"]["Width"] ="100%";
            else
                
    $CfgDaten["HighChart"]["Width"] .="px";

            
    $CfgDaten["HighChart"]["Height"] .="px";

            
    // zusätzliche Daten für File (hat jetzt aber nichts mit den eigentlichen Highchart Config String zu tun
            // z.B.: Breite und Höhe für Container
            
    $AdditionalConfigData trim(print_r($CfgDaten["HighChart"], true), "Array\n()") ;

            
    // Zusätzliche Config in Highchart Config hinzufügren
        
    $StringForCfgFile $AdditionalConfigData "\n|||\n" .  $CfgDaten["AllConfigString"];
            return 
    $StringForCfgFile;
        }

        
    // ------------------------------------------------------------------------
        // CreateConfigFile
        //    Erzeuegt das tmp-Higcharts Config-File
        //    IN: $stringForCfgFile = String welcher in das File geschrieben wird
        // ------------------------------------------------------------------------
        
    function CreateConfigFile($stringForCfgFile,$Self)
        {
            
    // Standarddateiname .....
    //        Global $IPS_SELF;
            
    $tmpFilename IPS_GetKernelDir() . "webfront\user\Highcharts\HighChartsCfg$Self.tmp";      // für jede ScriptID wird eine eigene Tmp-Datei erzeugt

            // oder es wird einer übergeben
            //Global $FilenameFromExtern;
            //if ($FilenameFromExtern!=false)
            //    $tmpFilename = IPS_GetKernelDir() . "webfront\user\Highcharts\\" . $FilenameFromExtern;      // für jede ScriptID wird eine eigene Tmp-Datei erzeugt

            // schreiben der Config Daten
            
    $handle fopen($tmpFilename,"w");
            
    fwrite($handle$stringForCfgFile);
            
    fclose($handle);

            return 
    $tmpFilename;
        }
    ?>

    dann ein Config File um PIE zu erzeugen:
    Ich nenne es "Stromkosten_PIE"

    PHP-Code:
    <?

    $CfgDaten 
    = array();

    // IPS Variablen ID´s
    $CfgDaten["ArchiveHandlerId"]= 22801 /*[Archive Handler]*/;     // Archive Handler
    $CfgDaten["ContentVariableId"]=23666 /*[Programe\Highcharts\Aquarium\plot_Stromkosten_Pie\plot_Stromkosten_Pie]*/// ID der Content-Variable
    $CfgDaten["HighChartScriptId"]= 11712 /*[Programe\Highcharts\Highcharts_Pie]*/;                  // ID des Highcharts Scripts

    // Übergabe als File oder ScriptID
    $CfgDaten["File"]= true;

    // Überschriften
    $CfgDaten["Title"]= "Stromkosten";
    $CfgDaten["SubTitle"]= NULL// ""

    // Alle     $CfgDaten["HighChart"] Parameter werden an das IP_Template übergeben
    $CfgDaten["HighChart"]["Theme"]="IPS.js";   // created by KHC

    // Abmessungen des erzeugten Charts
    $CfgDaten["HighChart"]["Width"] = 0;     // in px,  0 = 100%
    $CfgDaten["HighChart"]["Height"] = 300;     // in px


    $CfgDaten["PlotType"]= 'pie';

    // add your Variables
    $Dataset["Data"][1] = 25220 /*[Aquarium\Kosten\Energieverbrauch als Float\Filter]*/;
    $Dataset["Data"][2] = 55859 /*[Aquarium\Kosten\Energieverbrauch als Float\Heizstab]*/;
    $Dataset["Data"][3] = 24533 /*[Aquarium\Kosten\Energieverbrauch als Float\LED]*/;
    $Dataset["Data"][4] = 52466 /*[Aquarium\Kosten\Energieverbrauch als Float\Licht Fensterseite]*/;
    $Dataset["Data"][5] = 48116 /*[Aquarium\Kosten\Energieverbrauch als Float\Licht Raumseite]*/;
    $Dataset["Data"][6] = 22648 /*[Aquarium\Kosten\Energieverbrauch als Float\Luftpumpe]*/;


    $CfgDaten["Daten"]=Null;
    $CfgDaten["Categories"]=Null;

    foreach (
    $Dataset["Data"] as $tmp) {
    $CfgDaten["Daten"] = $CfgDaten["Daten"].'["'.IPS_GetName($tmp).'",'.GetValue($tmp).'],'."\n";
    $CfgDaten["Categories"] = $CfgDaten["Categories"].'"'.IPS_GetName($tmp).'",'."\n";
    }

       
    $CfgDaten["AllConfigString"] = '
        title: {
                    text: "'
    .$CfgDaten["Title"].'",
                    style: {
                          font: "17px Arial, sans-serif",
                   },
                        align: "left",
                        x: -10,
                        
            },

       subtitle: {
                    text: "'
    .$CfgDaten["SubTitle"].'",
                    x: -10,
                y: 20
            },

        yAxis: {
             showLastLabel: true,
               },


         xAxis: {
            lineWidth: 1,
            title: {
                text:""
            },

            categories: ['
    .$CfgDaten["Categories"].'],

        },


         plotOptions: {
           bar: {
                 showInLegend: false,
                   allowPointSelect: true,

                series: {

            },
                    dataLabels: {
                            enabled: true,
                        color: "#CCC",
                            formatter: function() {
                        return this.point.y.toPrecision(3) + " Std.";
                            }
                    },


                     },



            pie: {
             size: 110,
                 showInLegend: true,
                enableMouseTracking: true,
                    allowPointSelect: true,
                slicedOffset: 20,
                dataLabels: {
                            enabled: true,
                        color: "#CCC",
                            formatter: function() {
                        return this.point.name + "  " + (parseFloat(this.point.y)*0.14).toPrecision(2)  + "Euro";
                            }
                    },

                 point: {
                    events: {
                        legendItemClick: function() {
                         var point = chart.series[0].data[this.x],y, y_tmp;

                              if (typeof point.y_tmp == "number" && point.y == 0) {
                         y = point.y_tmp;
                                y_tmp =  null;
                                    $(point.dataLabel.element).show();
                                $(point.connector.element).show();   ;
                                }
                         else
                                {
                                y = 0;
                              y_tmp = point.y;
                                $(point.dataLabel.element).hide();
                                $(point.connector.element).hide();
                                };
                                 chart.series[0].data[this.x].update({y: y, y_tmp: y_tmp});
                              },
                    },
                    },
                 },
              },

       exporting: {
            enabled: false,
            },

        tooltip: {
                   backgroundColor: {
                      linearGradient: [0, 0, 10, 40],
                      stops: [
                         [0, "rgba(166, 160, 150, .7)"],
                         [1, "rgba(29, 27, 21, .4)"]
                      ]
                   },
                   borderWidth: 0,
                   style: {
                      color: "#FFF"
                   },
                   formatter: function() {
                      return "<b>"+ this.point.name +"</b><br/>"+
                          this.percentage.toPrecision(2) +"%";
                   }
       },

         series: [{
         type: "'
    .$CfgDaten["PlotType"].'",
          data: ['
    .$CfgDaten["Daten"].'],

             }]
         });
     '
    ;

     
    $CfgDaten["AllConfigString"];

    //___________________________________________________________________________________

    //  Ab hier nichts mehr ändern  !!
    //  Code um Plot zum WF zu Senden

    $s=IPS_GetScript($CfgDaten["HighChartScriptId"]);      // Id des Highcharts-Pie-Scripts
    include($s['ScriptFile']);
    if (
    $CfgDaten["File"]==false) {

        
    // Variante1: Übergabe der ScriptId. Daten werden beim Aufruf der PHP Seite erzeugt und direakt übergeben. Dadurch kann eine autom. Aktualisierung der Anzeige erfolgen
        
    if ($IPS_SENDER != "WebInterface")
            {
            
    WriteContentWithScriptId ($CfgDaten$IPS_SELF);     // und jetzt noch die ContentTextbox
            
    return;                                               // Ende, weil durch die Zuweisung des Script sowieso nochmals aufgerufen wird
            
    }
            
    $sConfig CreateConfigString($CfgDaten);             // erzeugen und zurückgeben des Config Strings
        
    }
        else {
        
    //Variante2: übergabe des Textfiles. Daten werden in tmp-File gespeichert. Eine automatische Aktualisierung beim Anzigen der Content-Textbox erfolgt nicht

            
    $sConfig CreateConfigString($CfgDaten);             // erzeugen und zurückgeben des Config Strings
            
    $tmpFilename CreateConfigFile($sConfig,$IPS_SELF);            // und ab damit ins tmp-Files
           
    if ($IPS_SENDER !="WebInterface")

          
    $Height $CfgDaten["HighChart"]["Height"] + 16;
       
    WriteContentWithFilename ($CfgDaten$tmpFilename);        // und jetzt noch die ContentTextbox

    }


    ?>

    und noch eines für BAR:
    nennt sich bei mir "Betriebsstunden_BAR"
    PHP-Code:
    <?

    $CfgDaten 
    = array();

    // IPS Variablen ID´s
    $CfgDaten["ArchiveHandlerId"]= 22801 /*[Archive Handler]*/;     // Archive Handler
    $CfgDaten["ContentVariableId"]=11588 /*[Programe\Highcharts\Aquarium\plot_Stromkosten_bar\plot_Stromkosten_BAR]*/// ID der Content-Variable
    $CfgDaten["HighChartScriptId"]= 11712 /*[Programe\Highcharts\Highcharts_Pie]*/;                  // ID des Highcharts Scripts

    // Übergabe als File oder ScriptID
    $CfgDaten["File"]= true;

    // Überschriften
    $CfgDaten["Title"]= "Betriebsstunden";
    $CfgDaten["SubTitle"]= NULL// "" 

    // Alle     $CfgDaten["HighChart"] Parameter werden an das IP_Template übergeben
    $CfgDaten["HighChart"]["Theme"]="IPS.js";   // created by KHC

    // Abmessungen des erzeugten Charts
    $CfgDaten["HighChart"]["Width"] = 0;     // in px,  0 = 100%
    $CfgDaten["HighChart"]["Height"] = 290;     // in px


    $CfgDaten["PlotType"]= 'bar';


    $Dataset["Data"][1] = 27686 /*[Aquarium\Kosten\Betriebsstunden\Filter]*/;
    $Dataset["Data"][2] = 27934 /*[Aquarium\Kosten\Betriebsstunden\Heizstab]*/;
    $Dataset["Data"][3] = 43124 /*[Aquarium\Kosten\Betriebsstunden\LED]*/;
    $Dataset["Data"][4] = 30131 /*[Aquarium\Kosten\Betriebsstunden\Licht Fensterseite]*/;
    $Dataset["Data"][5] = 37280 /*[Aquarium\Kosten\Betriebsstunden\Licht Raumseite]*/;
    $Dataset["Data"][6] = 56631 /*[Aquarium\Kosten\Betriebsstunden\Luftpumpe]*/;



    $CfgDaten["Daten"]=Null;
    $CfgDaten["Categories"]=Null;

    foreach (
    $Dataset["Data"] as $tmp) {
    $CfgDaten["Daten"] = $CfgDaten["Daten"].'["'.IPS_GetName($tmp).'",'.GetValue($tmp).'],'."\n";
    $CfgDaten["Categories"] = $CfgDaten["Categories"].'"'.IPS_GetName($tmp).'",'."\n";
    }

       
    $CfgDaten["AllConfigString"] = '
        title: {
                    text: "'
    .$CfgDaten["Title"].'",
                    style: {
                          font: "17px Arial, sans-serif",
                        },
                    align: "left",
                    x:-10,
            },

       subtitle: {
                    text: "'
    .$CfgDaten["SubTitle"].'",
                    x: -10,
                y: 20
            },

        yAxis: {
             showLastLabel: true,
             title: {
                    text: ""
                    },
               },


         xAxis: {
            lineWidth: 1,
            title: {
                text:""
            },

            categories: ['
    .$CfgDaten["Categories"].'],

        },


         plotOptions: {
           bar: {
                 showInLegend: false,
                   allowPointSelect: true,
        animation: {
                    duration: 2000,
                 
                },
                series: {
                
            },
                    dataLabels: {
                            enabled: true,
                        color: "#CCC",
                            formatter: function() {
                        return  this.point.y.toPrecision(3);
                            }
                    },
                  
                  
                     },
                                 


            pie: {
                showInLegend: true,
                enableMouseTracking: true,
                    allowPointSelect: true,
                slicedOffset: 20,
                dataLabels: {
                            enabled: true,
                        color: "#CCC",
                            formatter: function() {
                        return this.point.name + "  " + (parseFloat(this.point.y)*0.14).toPrecision(2)  + "Euro";

                             
                            }
                    },

                 point: {
                    events: {
                        legendItemClick: function() {
                         var point = chart.series[0].data[this.x],y, y_tmp;

                              if (typeof point.y_tmp == "number" && point.y == 0) {
                         y = point.y_tmp;
                                y_tmp =  null;
                                    $(point.dataLabel.element).show();
                                $(point.connector.element).show();   ;
                                }
                         else
                                {
                                y = 0;
                              y_tmp = point.y;
                                $(point.dataLabel.element).hide();
                                $(point.connector.element).hide();
                                };
                                 chart.series[0].data[this.x].update({y: y, y_tmp: y_tmp});
                              },
                    },
                    },
                 },
              },

       exporting: {
            enabled: false,
            },

        tooltip: {
                   backgroundColor: {
                      linearGradient: [0, 0, 10, 40],
                      stops: [
                         [0, "rgba(166, 160, 150, .7)"],
                         [1, "rgba(29, 27, 21, .4)"]
                      ]
                   },
                   borderWidth: 0,
                   style: {
                      color: "#FFF"
                   },
                   formatter: function() {
                      return "<b>"+ this.point.name +"</b><br/>"+
                          this.percentage.toPrecision(2) +"%";
                   }
       },

         series: [{
          type: "'
    .$CfgDaten["PlotType"].'",
          data: ['
    .$CfgDaten["Daten"].'],

             }]
         });
     '
    ;

     
    $CfgDaten["AllConfigString"];

    //___________________________________________________________________________________

    //  Ab hier nichts mehr ändern  !!
    //  Code um Plot zum WF zu Senden

    $s=IPS_GetScript($CfgDaten["HighChartScriptId"]);      // Id des Highcharts-Pie-Scripts
    include($s['ScriptFile']);
    if (
    $CfgDaten["File"]==false) {

        
    // Variante1: Übergabe der ScriptId. Daten werden beim Aufruf der PHP Seite erzeugt und direakt übergeben. Dadurch kann eine autom. Aktualisierung der Anzeige erfolgen
        
    if ($IPS_SENDER != "WebInterface")
            {
            
    WriteContentWithScriptId ($CfgDaten$IPS_SELF);     // und jetzt noch die ContentTextbox
            
    return;                                               // Ende, weil durch die Zuweisung des Script sowieso nochmals aufgerufen wird
            
    }
            
    $sConfig CreateConfigString($CfgDaten);             // erzeugen und zurückgeben des Config Strings
        
    }
        else {
        
    //Variante2: übergabe des Textfiles. Daten werden in tmp-File gespeichert. Eine automatische Aktualisierung beim Anzigen der Content-Textbox erfolgt nicht

            
    $sConfig CreateConfigString($CfgDaten);             // erzeugen und zurückgeben des Config Strings
            
    $tmpFilename CreateConfigFile($sConfig,$IPS_SELF);            // und ab damit ins tmp-Files
           
    if ($IPS_SENDER !="WebInterface")

          
    $Height $CfgDaten["HighChart"]["Height"] + 16;
       
    WriteContentWithFilename ($CfgDaten$tmpFilename);        // und jetzt noch die ContentTextbox

    }

    ?>
    Hier auch noch eine gepatchte "ips.js" . Hab das original ein wenig umgebaut.
    Obige Scripte sollte eigentlich auch mit der originalen laufen, habs aber nie probiert. Das originale KHZs Highchart läuft aber vermutlich nicht mit meiner gepatchten.
    Im Zweifel mal die angehängte probieren. Um das original nicht zu beleidigen unter anderem Namen einspielen und in obigen Scripten den Namen entsprechend ändern.

    PHP-Code:
    /**
     * IPS theme for Highcharts JS
     * @author sanman
     */

    Highcharts.theme = {
    //    colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee", 
    //        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
        
            
        
    chart: {
            
    backgroundColor'transparent',
            
    borderWidth0,
            
    borderRadius0,
            
    plotBackgroundColornull,
            
    plotShadowfalse,
            
    plotBorderWidth0,
            
    renderTo'container',
            
    zoomType'xy'

        
    },
        
    credits: {
          
    enabledfalse
            
    },
        
    title: {
            
    style: { 
                
    color'#FFF',
                
    font'normal 12px Arial, sans-serif'
            
    }
        },
        
    subtitle: {
            
    style: { 
                
    color'#DDD',
                
    font'12px Arial, sans-serif'
            
    }
        },
        
    xAxis: {
            
    endOnTickfalse,
            
    gridLineColor'rgba(20, 150, 100, .2)',
            
    gridLineWidth1,
            
    minorGridLineColor'rgba(180, 190, 50, .05)',
            
    minorTickInterval'auto',
            
    minorGridLineWidth1,
            
    lineColor'#999',
            
    tickColor'#999',
            
    labels: {
                
    style: {
                    
    color'#999',
                    
    fontWeight'light'
                
    }
            },
            
    title: {
                
    style: {
                    
    color'#AAA',
                    
    font'bold 12px Arial, sans-serif'
                
    }                
            }
        },
        
    yAxis: {
            
    alternateGridColornull,
            
    minorTickIntervalnull,
            
    gridLineColor'rgba(20, 150, 100, .2)',
            
    gridLineWidth1,
            
    lineWidth0.5,
            
    tickWidth0,
            
    minorGridLineColor'rgba(180, 190, 50, .05)',
            
    minorTickInterval'auto',
            
    minorTickColor'rgba(180, 190, 50, .1)',
            
    minorTickWidth1,
            
    minorGridLineWidth1,
            
    minorTickLength3,    
            
    labels: {
                
    style: {
                    
    color'#999',
                    
    fontWeight'normal'
                
    }
            },
            
    title: {
                
    style: {
                    
    color'#AAA',
                    
    font'bold 12px Arial, sans-serif'
                
    }                
            }
        },
        
    legend: {
            
    borderColor'transparent',
            
            
    itemStyle: {
                
    color'#CCC'
            
    },
            
    itemHoverStyle: {
                
    color'#FFF'
            
    },
            
    itemHiddenStyle: {
                
    color'#333'
            
    },
        },
        
        
        
        
    labels: {
            
    style: {
                
    color'#CCC'
            
    }
        },
        
    tooltip: {
        
    enabled:true,
            
    crosshairs: [{
                
    width1,
                
    color'rgba(110, 180, 50, .5)'
                
    },
            {   
    width1,
                
    color'rgba(180, 190, 50, .5)'
            
    }],
            
    shadowfalse,
            
    borderColor'rgba(0, 0, 0, 0)',
            
    backgroundColor'rgba(0, 0, 0, 0)',
            
            
    style: {
                
    color'rgba(0, 0, 0, 0)',
        
    //        padding: 10,
        //        font: 'light 8px Arial, sans-serif'
                
            
    }
        },
        
        
    plotOptions: {
            
                    
            
    line: {
                
    dataLabels: {
                    
    color'#CCC'
                    
                
    },
                
    marker: {
                    
    lineColor'#333'
                
    }
            },
            
    spline: {
                
    marker: {
                    
    lineColor'#333'
                
    }
            },
            
    scatter: {
                
    marker: {
                    
    lineColor'#333'
                
    }
            }
        },
        
        
    toolbar: {
            
    itemStyle: {
                
    color'#CCC'
            
    }
        },
        
        
    navigation: {
            
    buttonOptions: {
                
    backgroundColor: {
                    
    linearGradient: [00020],
                    
    stops: [
                        [
    0.4'#606060'],
                        [
    0.6'#333333']
                    ]
                },
                
    borderColor'#000000',
                
    symbolStroke'#C0C0C0',
                
    hoverSymbolStroke'#FFFFFF'
            
    }
        },
        
        
    exporting: {
            
    enabledfalse,
            },    
    //        buttons: {
    //            exportButton: {
        //            symbolFill: '#55BE3B'
            //    },
            //    printButton: {
            //        symbolFill: '#7797BE'
            //    }
        //    } 
            
    //    },    
        
        // special colors for some of the demo examples
    //    legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
    //    legendBackgroundColorSolid: 'rgb(70, 70, 70)',
    //    dataLabelsColor: '#444',
    //    textColor: '#E0E0E0',
    //    maskColor: 'rgba(255,255,255,0.3)'
    };

    // Apply the theme
    var highchartsOptions Highcharts.setOptions(Highcharts.theme); 
    -----------------------------
    Achtung: Das ist meine nur-für-mich gebaute test-Implementierung.
    Es erfolgt keine Validierung der Parameter und Konstanten.
    Alle IDs beziehen sich auf meine Umgebung und sind logischerweise anzupassen.

    Ein schöne Installationsroutine zusammen mit einem neuen Datenbank basierendem Btriebsstundenzähler hab ich in Arbeit. Die Zeit ist aber im Moment etwas knapp, und ein dreiwöchiger Kroation Urlaub steht auch an. Vor Ende August ist an dessen eine Ferigstellung nichts zu denken.
    Drum mal vorab obige Codes zum selberspielen.


    Extrafeature: Tooltip im PIE Chart zeigt nicht den Absolutwert, sonderen den prozentualen Anteil der jeweiligen Variblen.
    Klick in Legende blendet die jeweilige Variable aus und berechnet Prozentanteil neu.

    Plots sehen so aus:
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Bar.PNG 
Hits:	1405 
Größe:	34.1 KB 
ID:	12528   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	BAr_Klick_in-Legend.PNG 
Hits:	1350 
Größe:	38.0 KB 
ID:	12529   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Pie.PNG 
Hits:	1223 
Größe:	35.2 KB 
ID:	12530  
    Geändert von bbernhard (06.07.11 um 10:12 Uhr)

  4. #4
    Registriert seit
    Mar 2007
    Ort
    Neulußheim
    Beiträge
    353

    Standard V1.0004

    Da hier in den letzten Tagen so ausgiebig über Pies diskutiert wurde habe ich ein paar Ideen von bbernhard aufgenommen und in das vorhandene HighCharts Script eingebaut.


    Changelog


    • NEU: Integration Pie-Charts
    • NEU: CfgDaten: Wenn "ContentVarableId" = -1 und der Script unter der Content Variable angeordnet wird wird die ContentID selbständig ermittelt.
    • FIX: MixedMode. Wenn Zeitraum durch Berechnung kleiner als Startwert war, wurden diese Werte ebenfalls geladen



    Zum Download der V1.0004 ....
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	V1.004-Screenshot_mitPie.png 
Hits:	707 
Größe:	73.6 KB 
ID:	12544   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	V1.005-Screenshot_mitPieAggValues.png 
Hits:	849 
Größe:	162.6 KB 
ID:	12550  
    Geändert von khc (08.07.11 um 19:45 Uhr)

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

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

    Standard kleine IPS-Statistik

    sehr cool, klasse gemacht!
    Danke KHC!

    um zu zeigen das ich mich auch mit pie's anfreunden kann mal ein Screenshot (IPS muss jetzt nur noch fleissig Daten sammeln):

    IPS-Statistik
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von Raketenschnecke (10.07.11 um 14:47 Uhr)
    mit gebücktem Gruss
    Raketenschnecke
    IPS-Projekte und -Tools auf
    www.raketenschnecke.net

  6. #6
    Registriert seit
    Apr 2011
    Ort
    Cologne
    Beiträge
    801

    Standard Zeitauswahl für Highcharts

    Update 17.03.2012 9 Uhr zur Visualisierung von Balken:

    Hallo,

    ich bin begeistert von Highcharts und den tollen Skripten drumherum. Hab es bei mir fast schon im produktiven Einsatz.

    Um besser durch Raum und Zeit der Charts zu fliegen, hab ich mir in Anlehnung an die Bedienung der IPS-eingebauten Charts ein Auswahlbalken gebastelt, siehe Screenshot. Änderungen am Konfig-Skript sind minimal: nur Start und Ende.

    Bei Interesse, so geht's:
    Variable HC_Zeitraum vom Typ Integer anlegen, Profil wie im Screenshot anbei. Alle positiven Werte werden zur Auswahl angezeigt - kann man sich also anpassen. Aktionsscript:
    PHP-Code:
    <?

    $ENDPUNKT 
    GetValue(14844 /*[System\Highcharts\HC_Zeitraum\HC_EndPunkt]*/);

    Switch (
    $IPS_VALUE){
        Case -
    3// Zurück
           
    SetValue(14844 /*[System\Highcharts\HC_Zeitraum\HC_EndPunkt]*/$ENDPUNKT -1);
           Break;
        Case -
    2// Vor
           
    SetValue(14844 /*[System\Highcharts\HC_Zeitraum\HC_EndPunkt]*/$ENDPUNKT +1);
           Break;
        Case -
    1// Jetzt
           
    SetValue(14844 /*[System\Highcharts\HC_Zeitraum\HC_EndPunkt]*/0);
           Break;
        default:
            
    SetValue($IPS_VARIABLE$IPS_VALUE);
           Break;
        }
    ?>
    IDs im Skript entsprechend anpassen und darunter eine weitere Variable HC_EndPunkt anlegen (Typ: Integer).

    In den Konfig-Skripts ist jetzt nur noch $CfgDaten["StartTime"] und $CfgDaten["EndTime"] durch folgendes zu ersetzen:
    PHP-Code:
        // $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
        
    $ZeitRaum GetValue(48796 /*[System\Highcharts\HC_Zeitraum]*/);
        
    // AggType: [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year] .. wie der Werte gelesen werden soll
        
    Switch ($ZeitRaum) {
           Case 
    0:
           Case 
    1:
              
    $AggType 0;
              Break;
           Case 
    7:
           Case 
    30:
              
    $AggType 1;
              Break;
           Case 
    365:
            Case 
    90:
           Case 
    180:
              
    $AggType 3;
              Break;
            Default:
            
    $AggType 0;
        };
        If (
    $ZeitRaum == 0) {$ZeitRaum = (8/24);};
        
    $EndPunkt GetValue(14844 /*[System\Highcharts\HC_Zeitraum\HC_EndPunkt]*/);
        
    $CfgDaten["EndTime"] = time() + 60 60 24 $ZeitRaum $EndPunkt;
       
    $CfgDaten["StartTime"] = $CfgDaten["EndTime"] - 60 60 24 $ZeitRaum
    RunMode habe ich auf "script" geändert.

    Einziges Problem: nach Klick auf Zeitauswahl im Webfront wird der Graph nicht automatisch neu gezeichnet (wie die eingebauten). Ich löse das bisher so, dass ich das Skript zur Aktualisierung unter die HTML-Box setze und händisch klicke.

    Danke & Gruß,
    Axel
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	VarProfil.GIF 
Hits:	1009 
Größe:	33.1 KB 
ID:	15890   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Zeitraum.GIF 
Hits:	958 
Größe:	12.3 KB 
ID:	15891  
    Geändert von axelp (17.03.12 um 09:45 Uhr) Grund: Update zur Visualisierung von Balken und Aggregation

  7. #7
    Registriert seit
    Jun 2011
    Ort
    Germany|NRW|Meckenheim
    Beiträge
    625

    Sooo ... das sieht doch gar nicht schlecht aus!
    Vielen Dank für das klasse Addon.
    Angehängte Grafiken Angehängte Grafiken  

  8. #8
    Registriert seit
    Oct 2005
    Ort
    Gehrden / Hannover
    Beiträge
    501

    Ich habe auf Basis deiner Arbeit mal einen "Fork" gemacht. Werde dazu bald was freigeben

    Bild anbei
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	gauge.jpg 
Hits:	1192 
Größe:	151.3 KB 
ID:	12790   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	wwan.jpg 
Hits:	1364 
Größe:	47.3 KB 
ID:	12791  
    Geändert von sysrun (02.08.11 um 18:13 Uhr)
    FHZ1300 | 2x JeeLink | AVR-NETIO | FS20 | 1-Wire | 2x XBEE Pro | 4x XBEE 2.5 (als Zigbee Mesh) | eDip | 7x Jeenode | JeeNode EtherCard | CUL Stick
    3x Fritz!Box, WHS, XBMC, IPS-Server (Atom)

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

    Standard HighCharts - Beispiele

    Hi Leute,

    mir ist das zu ruhig in diesem Thread. Zu wenig Anwender, zu wenig Interessierte - dabei hat das Thema gerade in Verbindung mit IPS riesige Möglichkeiten.
    Ich will daher ein wenig die Werbetrommel für KHC's HC-Implementierung rühren und mal ein paar Beispiele aufzeigen (per Screenshot, reale Besipiele zum rumspielen auf www.raketenschnecke.net unter den Rubriken "Wetter" und "RS.loc smart Metering").

    was sind für mich die Vorteile von HC?
    • unglaublich umfangreiches Customizing der Diagramme
    • Export als File auf einen weiteren Webserver -> damit nicht nur auf IPS beschränkt
    • sehr gute Doku der HC-Funktionen mit Webpräsenz zum live Ausprobieren
    • wenn man das Prinzip verstanden hat ist -zumindest in den Grundfunktionen die Anwendung mit KHC's Script recht easy
    • die interaktivität der Diagramme ist der Hammer! man kann super einfach Graphen ausblenden, zoomen, sich per Hoover die Einzelwerte anzeigen lassen, das ist genau das was ich täglich brauche (neben der üblichen IPS-Dosis)


    Wo Licht ist, ist auch Schatten:
    • mir fiel die Einarbeitung in die HC-Logik nicht ganz leicht
    • ich hab "ganz" spezielle Wünsche in der Umsetzung die ich momentan aus eigener Kraft nicht umgesetzt bekommen (nur zum Teil)
    • Durch die ungeheure Funktionsvielfalt kann es schnell unübersichtlich werden
      ....


    eine tolle Sache, besten dank auch an KHC für die Entwicklung und zur Verfügung stellen!

    hier ein paar Beispiele:

    *ups, da fällt mir auf: ich hab aktuell gar kein HC-Graphen im WFE, die Beispiele liegen alle auf meiner Webseite
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke HighCharts Beispiel Klimadaten 48h.PNG 
Hits:	1356 
Größe:	48.0 KB 
ID:	14224   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke HighCharts Beispiel Klimadaten 48h Zoom.PNG 
Hits:	913 
Größe:	30.5 KB 
ID:	14225   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke HighCharts Beispiel Klima innen spline 48h.PNG 
Hits:	966 
Größe:	34.4 KB 
ID:	14229   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke HighCharts Beispiel Helligkeit_Niederschlag Column+line 48h Zoom.PNG 
Hits:	943 
Größe:	22.1 KB 
ID:	14233   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke Helligkeitsmessung Graph Sonnenstand mit.PNG 
Hits:	742 
Größe:	27.8 KB 
ID:	15854  

    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke HighCharts Tooltip with Picture.png 
Hits:	901 
Größe:	72.8 KB 
ID:	16048   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke HighCharts Beispiel IPS WachstumsgraphColumn+pie.PNG 
Hits:	1526 
Größe:	52.5 KB 
ID:	16193   Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Raketenschnecke.net HC 1.006 Beispiel Avg- und Max-Aggregation.png 
Hits:	1199 
Größe:	121.5 KB 
ID:	16278  
    Geändert von Raketenschnecke (18.04.12 um 17:31 Uhr)
    mit gebücktem Gruss
    Raketenschnecke
    IPS-Projekte und -Tools auf
    www.raketenschnecke.net

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

    Thread der Übersicht halber aufgetrennt in Support-Thread und Script-Vorstellung " Highcharts - Multigraph V1.0" (dieser Thread).

    Fragen, Antworten und Support bitte nicht in diesem Thread sondern hier: LINK
    mit gebücktem Gruss
    Raketenschnecke
    IPS-Projekte und -Tools auf
    www.raketenschnecke.net

Ähnliche Themen

  1. Q&A Highcharts - Multigraph V1.0
    Von khc im Forum Skripte, PHP, SQL
    Antworten: 777
    Letzter Beitrag: Gestern, 17:26
  2. MultiGraph mit GoogleChart
    Von meike0_0 im Forum Skripte, PHP, SQL
    Antworten: 452
    Letzter Beitrag: 08.06.16, 15:02
  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