+ Antworten
Seite 79 von 79 ErsteErste ... 29 69 77 78 79
Ergebnis 781 bis 785 von 785
  1. #781
    Registriert seit
    Sep 2016
    Ort
    Bochum
    Beiträge
    36

    Standard Dynamisches Label

    Morgen zusammen,

    ich bin einen Schritt weitergekommen und habe zumindest einen Workaround. Zunächst einmal sind die Events "load" und "redraw" die falschen. Beide werden ausgelöst, wenn das Chart gezeichnet wurde - nicht aber die Serien. Damit stehen die Serien auch nicht in den aufgerufenen Skripten zur Verfügung. Das richtige Event wäre eigentlich "afterAnimate" auf der zuletzt dargestellten Serie. Laut Doku ist das bei gleichen Animationsdauern, diejenige, die als letzte hinzugefügt wurde. In unserem Fall also diejenige, die im Config-Skript als letzte der $Cfg hinzugefügt wird. Ich habe dies getestet, indem ich mir den Sourcecode eines Highcharts aus dem Webbrowser kopiert und das Event und die auszuführenden Methode händisch eingetragen habe. Funktioniert.

    Leider stehe ich auf dem Schlauch, wenn es darum geht, mit der von Raketenschnecke gezeigten Methode das Event nachträglich auf eine Serie zu setzen.
    PHP-Code:
    $(\'#container\').highcharts(%%%%, function(chart){      
                Highcharts.addEvent(series[4], "afterAnimate", addLabelAfterStart);
                } ); 
    funktioniert leider nicht. Ich sehe nur nicht was ich da falsch mache...

    Zum Workaround:
    Da ich im Vorfeld das "load" Event mit
    PHP-Code:
    $(\'#container\').highcharts(%%%%, function(chart){      
                Highcharts.addEvent(chart, "load", addLabelAfterStart);
                } ); 
    erfolgreich getestet hatte, habe ich in die Funktion "addLabelAfterStart" einen Timer eingebaut und rufe die Funktion set_label() mit ausreichend großer Verzögerung auf, dass die Serien bereits angezeigt werden. Funktioniert prima, das Label wird eben ein bißchen später als die Serien angezeigt.

    Hier der vollständige Sourcecode meines Config-Skriptes. Vielleicht möchte ja jemand ähnliches tun. Das Design ist noch nicht ausgefeilt - ist erstmal nur eine Spielwiese.
    Falls jemand weiß, wie man das Event auf die Series bekommt wäre das natürlich perfekt. Mit meinem Workaround muss man bei Änderung der Animationszeit auch immer an den Timeout des Triggers denken.

    PHP-Code:
    <?php
        
    // bei der Konfiguration unbedingt auf die Groß/Kleinschreibung achten
        // es wurde versucht folgende Namensgebeung in der Konfiguration zu verwenden
        // Parameter mit kleinen Anfangsbuchstaben = Parameter welche von Highcharts übnernommen wurden. Siehe dazu: http://www.highcharts.com/ref/
        // Parameter mit großen Anfangsbuchstaben = für das IPS-Highcharts-Script eingeführte Parameter

        
    Global $CfgDaten// damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden

        // IPS Variablen ID´s
        
    $CfgDaten['ContentVarableId']= 40525;  // ID der String Variable in welche die Daten geschrieben werden (-1 oder überhaupt nicht angeben wenn die Content Variable das übergordnete Element ist)
        
    $CfgDaten['HighChartScriptId']= 49977 /*[[in Arbeit]\Highcharts\Chart\HighCharts AKTUELL]*/;                  // ID des Highcharts Scripts

        // Highcharts oder Highstock (default = Highcharts
        
    $CfgDaten['Ips']['ChartType'] = 'Highcharts';

        
    // Zeitraum welcher dargestellt werden soll (kann durch die Zeitvorgaben in den Serien verändert werden)
        
    if (!isset($CfgDaten["StartTime"]))
             
    $CfgDaten["StartTime"] = mktime(0,0,0date("m"time()), date("d",time()), date("Y",time())); // ab heute 00:00 Uhr
        
    if (!isset($CfgDaten["EndTime"]))
            
    $CfgDaten["EndTime"] = time(); // ab heute 23:59 Uhr, oder //$CfgDaten["EndTime"] = time();   // = bis jetzt
     //echo mktime(23,59,59, date("m", time())-1, date("d",time()), date("Y",time()));
        // damit wird die Art des Aufrufes festgelegt
        
    $CfgDaten['RunMode'] = "script";     // file, script, popup

        // wenn Popup dann muss die WebfrontConfigId und der Titele übergeben werden
        
    if ($CfgDaten['RunMode'] == "popup")
        {
            
    $CfgDaten['WebFrontConfigId'] = 26841 /*[Main]*/;
            
    $CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
        }

        
    // Übergabe der IP-Adresse und des Ports für die Darstellung im Dashboard
        // Wichtig! Wenn Darstellung in Webfront diese Variablen auskommentieren
        //$CfgDaten['Ips']['Dashboard']['Ip'] = "127.0.0.1";
        //$CfgDaten['Ips']['Dashboard']['Port'] = "82";

        // Serienübergreifende Einstellung für das Laden von Werten
        
    $CfgDaten['AggregatedValues']['HourValues'] = 35;      // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
        
    $CfgDaten['AggregatedValues']['DayValues'] = -1;       // ist der Zeitraum größer als X Tage werden Tageswerte geladen
        
    $CfgDaten['AggregatedValues']['WeekValues'] = -1;      // ist der Zeitraum größer als X Tage werden Wochenwerte geladen
        
    $CfgDaten['AggregatedValues']['MonthValues'] = -1;      // ist der Zeitraum größer als X Tage werden Monatswerte geladen
        
    $CfgDaten['AggregatedValues']['YearValues'] = -1;          // ist der Zeitraum größer als X Tage werden Jahreswerte geladen
        
    $CfgDaten['AggregatedValues']['NoLoggedValues'] = 1000;     // ist der Zeitraum größer als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen    $CfgDaten['AggregatedValues']['MixedMode'] = false;     // alle Zeitraumbedingungen werden kombiniert
        
    $CfgDaten['AggregatedValues']['MixedMode'] = true;
        
    // Systematik funktioniert jetzt additiv. D.h. die angegebenen Werte gehen ab dem letzten Wert
        //
        //            -5 Tage           -3 Tage                        EndTime
        // |           |                  |                             |
        // |           |DayValue = 2     |HourValues = 3          |
        // |Tageswerte |Stundenwerte     |jeder geloggte Wert     |

        // **************************************************************************************
        // *** Highcharts Options ***
        // **************************************************************************************
        // Ab hier werden die Bereiche des Highchart-Objektes parametriert.
        // Dieser Bereich wurde (soweit möglich) identisch der Originalstruktur gehalten.
        // Informationen über die Parametrierung findet man unter http://www.highcharts.com/ref/

        // **************************************************************************************
        // *** chart *** http://www.highcharts.com/ref/#chart
        // **************************************************************************************
        // $CfgDaten['chart']['zoomType'] = "'x'";            //default: $CfgDaten['chart']['zoomType'] = "'xy'";
        
    $CfgDaten['chart']['backgroundColor'] = "'transparent'";
        
    $CfgDaten['chart']['height'] = 625;
        
        
        
    // **************************************************************************************
        // *** credits *** siehe http://www.highcharts.com/ref/#credits
        // **************************************************************************************
        // $CfgDaten['credits']['text'] = "used by IPS";
        // $CfgDaten['credits']['href'] = "http://www.ip-symcon.de/forum/f53/highcharts-multigraph-v1-0-a-17625/#post120721";

        // **************************************************************************************
        // *** title *** siehe http://www.highcharts.com/ref/#title
        // **************************************************************************************
        // $CfgDaten['title']['text'] = "Chart-Überschrift";  // Überchrift des gesamten Charts
        //        -> veraltet: 'Title' -> verwende ['title']['text']

        
    $CfgDaten['title']['text'] = "Temperaturen";
       

        
    // **************************************************************************************
        // *** subtitle *** siehe http://www.highcharts.com/ref/#subtitle
        // **************************************************************************************
        // $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%" // Sub-Überschrift. Wenn nichts angegeben wird wird dieser String als Default verwendet
        //        -> veraltet: 'SubTitle' -> verwende ['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)
        //        -> veraltet: 'SubTitleDateTimeFormat' -> verwende ['subtitle']['Ips']['DateTimeFormat']
        //    -> entfallen: 'SubTitleFormat' -> unnötiger Paramter, wird jetzt in ['subtitle']['text'] angegeben

        
    $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%";
        
    $CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i";

        
    // **************************************************************************************
        // *** tooltip *** http://www.highcharts.com/ref/#tooltip
        // **************************************************************************************
        // $CfgDaten['tooltip']['enabled'] = false;
        // $CfgDaten['tooltip']['formatter'] = Null; // IPS erstellt selbständig einen Tooltip
        // $CfgDaten['tooltip']['formatter'] = "";   // Standard - Highcharts Tooltip
        // $CfgDaten['TooltipDateTimeFormat'] = "%A %d.%m.%Y %H:%M";  // Standard Tooltip DateTime-Format

        // **************************************************************************************
        // *** exporting *** http://www.highcharts.com/ref/#exporting
        // **************************************************************************************
        // $CfgDaten['exporting']['enabled'] = true;

        // **************************************************************************************
        // *** lang *** http://www.highcharts.com/ref/#lang
        // **************************************************************************************
        // $CfgDaten['lang']['resetZoom'] = "Zoom zurücksetzten";

        // **************************************************************************************
        // *** legend *** http://www.highcharts.com/ref/#legend
        // **************************************************************************************
        // $CfgDaten['legend']['backgroundColor'] = '#FCFFC5';
         
    $CfgDaten['legend']['itemStyle']['color'] = "#c4c4c4";
         
    $CfgDaten['legend']['itemHoverStyle']['color'] = "#f3f3f3";
         
    $CfgDaten['legend']['itemHiddenStyle']['color'] = "#626262";

        
    // **************************************************************************************
        // *** xAxis *** http://www.highcharts.com/ref/#xAxis
        // **************************************************************************************
        // $CfgDaten['xAxis']['gridLineColor'] = '#FF0000';
        
    $CfgDaten['xAxis']['gridLineWidth'] = 1;
        
    $CfgDaten['xAxis']['gridLineColor'] = "#3d9800";
        
    $CfgDaten['xAxis']['gridLineDashStyle'] = 'DashDot';
        
    // $CfgDaten['xAxis']['tickColor'] = '#FF0000';
        // $CfgDaten['xAxis']['plotBands'][] = array("color"=>'#FCFFC5',"from"=> "@Date.UTC(2012, 3, 29)@","to"=> "@Date.UTC(2012, 3, 30)@");

        // **************************************************************************************
        // *** yAxis *** http://www.highcharts.com/ref/#yAxis
        // **************************************************************************************
        // $CfgDaten['yAxis'][0]['title']['text'] = "Temperaturen"; // Bezeichnung der Achse
        //        -> veraltet: 'Name' und 'TitleText' -> verwende ['title']['text']
        // $CfgDaten['yAxis'][0]['Unit'] = "°C";    // Einheit für die Beschriftung die Skalenwerte
        //    $CfgDaten['yAxis'][0]['min'] = 0; // Achse beginnt bei Min (wenn nichts angegeben wird wird der Min der Achse automatisch eingestellt)
        //    $CfgDaten['yAxis'][0]['max'] = 40; // Achse geht bis Max (wenn nichts angegeben wird wird der Max der Achse automatisch eingestellt)
        //        -> veraltet: 'Min' und 'Max'
        //    $CfgDaten['yAxis'][0]['opposite'] = false; // Achse wird auf der rechten (true) oder linken Seite (false) des Charts angezeigt (default = false)
        //        -> veraltet: 'Opposite'
        //    $CfgDaten['yAxis'][0]['tickInterval'] = 5; // Skalenwerte alle x (TickInterval)
        //        -> veraltet: 'TickInterval'
        //    -> entfallen: 'PlotBands' -> verwende ['yAxis'][0]['plotBands'],  (siehe Beispiel 'cfg - drehgriff und tf-kontakt')
        //    -> entfallen: 'YAxisColor' -> verwende ['yAxis'][0]['title']['style']
        //    -> entfallen: 'TitleStyle'-> verwende ['yAxis'][0]['title']['style']

        
    $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'][0]['gridLineWidth'] = 1;
        
    $CfgDaten['yAxis'][0]['gridLineColor'] = "#3d9800";
        
    $CfgDaten['yAxis'][0]['gridLineDashStyle'] = 'DashDot';

    /*
        $CfgDaten['yAxis'][1]['title']['text'] = "Heizungssteller / Luftfeuchte";
        $CfgDaten['yAxis'][1]['Unit'] = "%";
        $CfgDaten['yAxis'][1]['opposite'] = true;

        $CfgDaten['yAxis'][2]['title']['text'] = "Drehgriffkontakte / Türkontakte";
        $CfgDaten['yAxis'][2]['labels']['formatter'] = "@function() { if (this.value == 0.5) return 'geschlossen'; if (this.value == 1) return 'gekippt';if (this.value == 2) return 'geöffnet' }@";
        $CfgDaten['yAxis'][2]['allowDecimals'] = true;
        $CfgDaten['yAxis'][2]['showFirstLabel '] = false;
        $CfgDaten['yAxis'][2]['showLastLabel '] = false;
        $CfgDaten['yAxis'][2]['opposite'] = true;
        $CfgDaten['yAxis'][2]['labels']['rotation'] = 90;

        $CfgDaten['yAxis'][3]['title']['text'] = "Columns";
        $CfgDaten['yAxis'][3]['Unit'] = "kWh";
    */
        // **************************************************************************************
        // *** series *** http://www.highcharts.com/ref/#series
        // **************************************************************************************
        // $serie['name'] = "Temperatur; // Name der Kurve (Anzeige in Legende und Tooltip)
        //        -> veraltet: 'Name' -> verwende [series']['name']
        // $serie['Unit'] = "°C"; // Anzeige in automatisch erzeugtem Tooltip
        //     wenn $serie['Unit'] = NULL; // oder Unit wird gar nicht definiert, wird versucht die Einheit aus dem Variablenprofil automatisch auszulesen
        // $serie['ReplaceValues'] = false; // Werte werden wie geloggt übernommen
        //     $serie['ReplaceValues'] = array(0=>0.2,1=>10) // der Wert 0 wird in 0.2 geändert, der Wert 1 wird in 10 geändert
        //       das macht für die Darstellung von Boolean Werte Sinn, oder für Drehgriffkontakte (Werte 0,1,2)
        // $serie['type'] = 'spline'; // Festlegung des Kuventypes (area, areaspline, line, spline, pie, Column)
        // $serie['yAxis'] = 0; // Nummer welche Y-Achse verwendet werden soll (ab 0)
        //     -> veraltet: 'Param' -> verwende die Highcharts Parameter - sollte eigentlich noch so funktionieren wie in IPS-Highcharts V1.x
        // $serie['AggType'] = 0 // Festlegung wie die Werte gelesen werden soll (0=Hour, 1=Day, 2=Week, 3=Month, 4=Year), hat Vorrang gegenüber den Einstellungen in AggregatedValues
        //    wird kein AggType definiert werden alle gelogten Werte angezeigt
        // $serie['AggNameFormat'] = "d.m.Y H:i"; // (gilt nur bei den Pies, wenn eine Id verwendet wird), entspricht dem PHP-date("xxx") Format, welches das Format der Pie Namen festlegt, wenn keine Eingabe werden Default Werte genommen
        // $serie['Offset'] = 24*60*60; hiermit können Kurven unterschiedlicher Zeiträume in einem Chart dargestellt. Angabe ist in Minuten
        //    $serie['StartTime'] = mktime(0,0,0,1,1,2012);     // wird für die entsprechende Serie eine Anfangs- und/oder Endzeitpunkt festgelegt wird dieser verwendet. Ansonsten wird
        // $serie['EndTime'] = mktime(0,0,0,2,1,2012);          // der Zeitpunkt der Zeitpunkt aus den $CfgDaten genommen
        // $serie['ScaleFactor'] = 10; // Skalierungsfaktor mit welchem der ausgelesene Werte multipliziert wird
        // $serie['RoundValue'] = 1; // Anzahl der Nachkommastellen
        //    $serie['AggValue'] ='Min' // über AggValue kann Min/Max oder Avg vorgewählt werden (Default bei keiner Angabe ist Avg)
        //        ist sinnvoll wenn nicht Einzelwerte sondern Stundenwerte, Tageswerte, usw. ausgelesen werden
        // $serie['data'] = array('TimeStamp'=> time(),'Value'=12) // hier kann ein Array an eigenen Datenpunkten übergeben werden. In diesem Fall werden für diese Serie keine Daten aus der Variable gelesenen.
    /*
        $serie = array();
        $serie['name'] = 'Pie';
        $serie['type'] = 'pie';
        $serie['data'][] = array('name'=>'Aussentemperatur', 'Id' => 23960, 'Unit'=>"°C");
        $serie['data'][] = array('name'=>'Luftfeuchte', 'Id' => 13641, 'Unit'=>"%");
        $serie['allowPointSelect'] = true;
        $serie['cursor'] = 'pointer';
        $serie['center'] = array(300,100);
        $serie['size'] = 100;
        $serie['dataLabels']['enabled'] = true;
        $CfgDaten['series'][] = $serie;
    */
        
    $serie = array();
        
    $serie['name'] = "Wetterstation";
        
    $serie['Id'] = 16481;
        
    $serie['Unit'] = "°C";
        
    $serie['ReplaceValues'] = false;
        
    $serie['RoundValue'] = 1;
        
    $serie['type'] = "line";
        
    $serie['yAxis'] = 0;
        
    $serie['marker']['enabled'] = false;
        
    $serie['shadow'] = true;
        
    $serie['lineWidth'] = 2;
        
    $serie['states']['hover']['lineWidth'] = 3;
        
    $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['name'] = "Kinderzimmer";
        
    $serie['Id'] = 18153;
        
    $serie['Unit'] = "°C";
        
    $serie['ReplaceValues'] = false;
        
    $serie['RoundValue'] = 1;
        
    $serie['type'] = "line";
        
    $serie['yAxis'] = 0;
        
    $serie['marker']['enabled'] = false;
        
    $serie['shadow'] = true;
        
    $serie['lineWidth'] = 2;
        
    $serie['states']['hover']['lineWidth'] = 3;
        
    $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['name'] = "Dachboden";
        
    $serie['Id'] = 19649;
        
    $serie['Unit'] = "°C";
        
    $serie['ReplaceValues'] = false;
        
    $serie['RoundValue'] = 1;
        
    $serie['type'] = "spline";
        
    $serie['yAxis'] = 0;
        
    $serie['marker']['enabled'] = false;
        
    $serie['shadow'] = true;
        
    $serie['lineWidth'] = 2;
        
    $serie['states']['hover']['lineWidth'] = 3;
        
    $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['name'] = "Schlafzimmer";
        
    $serie['Id'] = 41018;
        
    $serie['Unit'] = "°C";
        
    $serie['ReplaceValues'] = false;
        
    $serie['RoundValue'] = 1;
        
    $serie['type'] = "spline";
        
    $serie['yAxis'] = 0;
        
    $serie['marker']['enabled'] = false;
        
    $serie['shadow'] = true;
        
    $serie['lineWidth'] = 2;
        
    $serie['states']['hover']['lineWidth'] = 3;
        
    $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['name'] = "Garage";
        
    $serie['Id'] = 20452;
        
    $serie['Unit'] = "°C";
        
    $serie['ReplaceValues'] = false;
        
    $serie['RoundValue'] = 1;
        
    $serie['type'] = "spline";
        
    $serie['yAxis'] = 0;
        
    $serie['marker']['enabled'] = false;
        
    $serie['shadow'] = true;
        
    $serie['lineWidth'] = 2;
        
    $serie['states']['hover']['lineWidth'] = 3;
        
    $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;

        
        
    $CfgDaten['Ips']['HtmlScript'] ='<div style="height: 30px;position: relative;top: -50px;"><button id="nogrid">NoGrid</button><button id="grid">Grid</button></div>
            <script type="text/javascript" >
            
            const compare = (arr, key, callback) => arr.reduce((prev, curr) => (callback(prev[key], curr[key]) ? prev : curr), {});

            var addLabel = function (event) {
                set_label();
                }; 

            var addLabelAfterStart = function (event) {
                setTimeout(function(){ set_label(); }, 1200);};
                
            var set_label = function () {
        
                var innen = innenTemperaturen(chart.series);
                min_innen = compare(innen, "minval", (a, b) => a < b);
                max_innen = compare(innen, "maxval", (a, b) => a > b);

                var aussen = aussenTemperaturen(chart.series);
                min_aussen = compare(aussen, "minval", (a, b) => a < b);
                max_aussen = compare(aussen, "maxval", (a, b) => a > b);
                
                if (min_innen.minval && min_aussen.minval) {                                                              
                    var textlabel = "Aussen<br/>Max: " + max_aussen.name + "(" + max_aussen.maxval + "°C)<br/>" + 
                                    "Min: " + min_aussen.name + "(" + min_aussen.minval + "°C)<br/>" +
                                    "Innen<br/>Max: " + max_innen.name + "(" + max_innen.maxval + "°C)<br/>" +
                                    "Min: " + min_innen.name + "(" + min_innen.minval + "°C)";
                    }
                else if (min_innen.minval == undefined && min_aussen.minval ) {
                    var textlabel = "Aussen<br/>Max: " + max_aussen.name + "(" + max_aussen.maxval + "°C)<br/>" + 
                                    "Min: " + min_aussen.name + "(" + min_aussen.minval + "°C)";
                    }
                else if (min_innen.minval && min_aussen.minval == undefined) {
                    var textlabel = "Innen<br/>Max: " + max_innen.name + "(" + max_innen.maxval + "°C)<br/>" +
                                    "Min: " + min_innen.name + "(" + min_innen.minval + "°C)";
                    }
                else {
                    var textlabel = "keine Datenserie aktiv."
                    }

                if (!this.chart.lbl) {
                    this.chart.lbl = this.chart.renderer.label(textlabel,100,100)
                    .attr({
                        fill: \'#FCFFC5\',
                        zIndex: 8
                        })
                    .add();

                    }
                else {
                    this.chart.lbl.destroy();
                    this.chart.lbl = this.chart.renderer.label(textlabel,100,100)
                    .attr({
                        fill: \'#FCFFC5\',
                        zIndex: 8
                        })
                    .add();
                    }
            }

            function innenTemperaturen(series_arr){
                return series_arr.filter(serie => serie.name != "Wetterstation" && serie.name != "Garage" && serie.visible != false).map( serie=> ({ name: serie.getName(), maxval: serie.dataMax, minval: serie.dataMin, vis: serie.visible }));
                }
            
             function aussenTemperaturen(series_arr){
                return series_arr.filter(serie => serie.name == "Wetterstation" && serie.visible != false).map( serie=> ({ name: serie.getName(), maxval: serie.dataMax, minval: serie.dataMin, vis: serie.visible }));
                }

            $(\'#container\').highcharts(%%%%, function(chart){      
                Highcharts.addEvent(chart, "load", addLabelAfterStart);
                } ); 
            
            var chart = $(\'#container\').highcharts();    
            
            Highcharts.addEvent(chart, "redraw", addLabel);      
              
            $(\'#nogrid\').click(function () {
                chart.update({
                    xAxis: {gridLineWidth: 0}
                    });
                });

            $(\'#grid\').click(function () {
                chart.update({
                    xAxis: {gridLineWidth: 1}
                    });
                });


            </script>'
    ;


        
    // Highcharts-Theme
            //$CfgDaten['HighChart']['Theme']="dark-unica.js";   // von Highcharts mitgeliefert: dark-green.js, dark-blue.js, gray.js, grid.js
         // $CfgDaten['HighChart']['Theme']="ips.js";   // IPS-Theme muss per Hand in in Themes kopiert werden....

        // Abmessungen des erzeugten Charts
        
    $CfgDaten['HighChart']['Width'] = "100%";     // in px,  0 wird auch in 100% konvertiert
        
    $CfgDaten['HighChart']['Height'] = 700;         // in px

        // ab V3.000 sind diese Parameter hinzugekommen
        // lokale Skripte oder aus Internet
        // ['Ips']['ScriptsHighCharts']  = './user/Highcharts/code/'; //        Verzeichnis in welchen sich die Scripte befinden falls man diese lokal hält,
        // ['Ips']['ScriptsHighstock']         default = leer, dann werden die Scripte aus dem Internet geholt
        // ['Ips']['Scriptsjquery']
        // ['Ips']['ScriptsTheme'] das ist das Themes Verzeichnis. Wenn man mit der ips.js arbeitet, sollte man dort alle Highchart Themes hinkopieren und den Pfad antprechend angeben

         //['Ips']['HtmlScript'] = ".user/charts/test.html";

        // -------------------------------------------------------------------------------------------------------------------------------------
        // und jetzt los ......
        
    $s IPS_GetScript($CfgDaten['HighChartScriptId']);     // Id des Highcharts-Scripts
        
    include($s['ScriptFile']);

        
    // das ist ab V3.000 der neue Aufruf
        
    RunHighcharts($CfgDaten);
    ?>
    Abschließend noch zwei Screens - einmal mit und einmal ohne Außentemparaturen...
    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Screenshot_20190610-105604_IPSViewPhone.jpg 
Hits:	101 
Größe:	157.1 KB 
ID:	49452
    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Screenshot_20190610-105619_IPSViewPhone.jpg 
Hits:	73 
Größe:	150.9 KB 
ID:	49453

  2. #782
    Registriert seit
    Mar 2014
    Ort
    Mücke (Hessen)
    Beiträge
    971

    Hallo Leute,

    habe mal bisschen Zeit gefunden mich endlich mit Highcharts zu befassen.

    Funktion ist da. Die Darstellung von "ß" oder "°C" ist aber Falsch.

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

Name:	Anmerkung 2019-06-17 145350.png 
Hits:	55 
Größe:	15.7 KB 
ID:	49563

    Wo kann ich das Einstellen?

    Gruß
    IPS v5.1 Unlimited auf Ubuntu Server | IPSView | EnOceanPi | Z-Wave (Razberry) | Sonos | Fritzbox 7390 | 1-Wire | DMX | Dali | Pokeys57E | Siemens Logo 8 | Siemens S7 | Wago SPS | KNX | Onkyo AVR | ModBus | HomeMatic@piVCCU | ESP8266 | MQTT | Ubiquiti | und noch viel mehr geplant

  3. #783
    Registriert seit
    Sep 2016
    Ort
    Bochum
    Beiträge
    36

    Die Textausgabe in dem Label erfolgt über HTML. Versuch es mal mit den entsprechenden HTML Sonderzeichen. Für ß müsste &szlig; funktionieren. Alternativ mal Google zu HTML Sonderzeichen befragen. Du findest dort schnell Listen mit allen möglichen Sonderzeichen.

    Gruß,

    Uwe

  4. #784
    Registriert seit
    Jul 2007
    Ort
    Graz
    Beiträge
    114

    Standard Automatischer Export

    Hallo zusammen,

    ich möchte meine Highcharts Grafik automatisiert als PNG oder JPEG speichern lassen. Es gibt da ein Export Modul aber irgendwie habe ich nicht verstanden wie man das verwenden kann ?!

    Hat jemand eine Idee ?

    Grüße,
    Andreas

  5. #785
    Registriert seit
    Jun 2013
    Ort
    Regensburg
    Beiträge
    528

    Hallo Zusammen,

    ich versuche vergebens in einem spline-Diagramm 3 Strommesswerte eines Drehstromgeräts aufsummiert darzustellen.
    Suchbegriffe waren stacked und gestapelt.

    Leider habe ich es nach Stunden nicht hinbekommen.
    Hat jemand einen Tipp für mich?
    Gruß Jürgen
    (KNX Licht+Steckd.+Rollo+Wetter, EnOcean Fenstergr.+Taster, 1-Wire, M-BUS (SensusHRI+EnergyCam), Alexa, Gira Dual/VdS+KNX, DMX, Denon X4000 (3 Zonen), Fritzbox, 3xVivotek IP-Cam, LevelJet, Dreambox, Vu+, Homematic CCU1+Stellantr.+Fernb.)

Ähnliche Themen

  1. MultiGraph mit GoogleChart
    Von meike0_0 im Forum Skripte, PHP, SQL
    Antworten: 456
    Letzter Beitrag: 15.06.19, 23:00
  2. MultiGraph mit GoogleChart V1.0
    Von meike0_0 im Forum Anleitungen / Nützliche PHP Skripte
    Antworten: 17
    Letzter Beitrag: 27.07.16, 22:01
  3. Highcharts - Multigraph V1.0 - Dashboard
    Von UH368 im Forum Skripte, PHP, SQL
    Antworten: 13
    Letzter Beitrag: 23.05.12, 15:04