Q&A Highcharts V2.0

Raketenschnecke · 3. Juni 2012 um 20:03

DerStandart:

Was macht denn die Zeile
    $serie = array("Id"=>0, "Name" =>"Manueller Werte 1",    "Unit"=>"°C", "ReplaceValues"=>false);
?

Sorry, ich bin halbwegs fit in PHP … aber durch die Funktionsweise der Highcharts bin überhaupt noch nicht durchgestiegen. Daher bringen mir CodeSchnipsel nichts. Ich bräuchte leider die idiotensichere Version „Füge X und Y an Position Z ein“ … Sorry …

wenn du mir sagst, WAS genau du nicht verstehst, kann ich Dir auch genau erklären, WIE es funktioniert

In diesem Falle übergibst Du nur Konfigurations-Parameter. Mit „Id“ z.B. die variable, wo das HC-Script die daten her holen soll. Wenn Du die daten selbst übergeben willst, musst Du statt dessen ein Array übergeben, z.B. so:


$serie = array("Id"=>0, "Data"=>$DataForSerie, "Name" =>"Manueller Werte 1",    "Unit"=>"°C", "ReplaceValues"=>false);

DerStandart · 3. Juni 2012 um 20:14

Wenn ich die Änderungen von #120 bei mir einfüge erscheint:

Abbruch - Definition von ‚Data‘ und ‚data‘ in ein und derselben Serie nicht möglich.

Vielen Dank für die Erklärung, habe nun verstanden, was die Zeile macht.

Die ips.js habe ich nicht heruntergeladen - davon stand hier leider nichts … Habe daher folgendes geändert:


    // Highcharts-Theme
        $CfgDaten['HighChart']['Theme']="grid.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....

An irgend einer Stelle habe ich noch einen Fehler.

Raketenschnecke · 3. Juni 2012 um 20:16

dann probier das Script mal aus, das ist Deines, angepasst auf meine Umgebung:


<?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']= -1/*[Allgemein\Highcharts\Highcharts]*/;  // 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']= 35562  /*[Allgemein\Highcharts\Highcharts_V2.02]*/;                  // 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)
    $CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time())-10, date("Y",time())); // ab heute 00:00 Uhr
    $CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time();   // = bis jetzt

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

    if ($CfgDaten['RunMode'] == "popup")
    {
        $CfgDaten['WebFrontConfigId'] = 26841;
        $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'] = -1;      // 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'] = false;
    // 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'";

    // **************************************************************************************
    // *** 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'] = "Chart-Überschrift";

    // **************************************************************************************
    // *** 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

    // **************************************************************************************
    // *** 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';

    // **************************************************************************************
    // *** xAxis *** http://www.highcharts.com/ref/#xAxis
    // **************************************************************************************
    // $CfgDaten['xAxis']['lineColor'] = '#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']



    // **************************************************************************************
    // *** 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.

      $lastValue = rand (0, 30);
    for ($i = 0; $i <=100 ; $i++)
    {
        $DataForSerie[] = array("TimeStamp"=>$CfgDaten["StartTime"] +  $i * 60 * 60, "Value"=>$lastValue);
        $min = $lastValue -5; $max = $lastValue + 5;
        $lastValue = rand ($min,$max);
    }

    $serie = array("Id"=>0, "Data"=>$DataForSerie, "Name" =>"Manueller Werte 1",    "Unit"=>"°C", "ReplaceValues"=>false);
    $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['data'] = $DataForSerie;
    $CfgDaten["Series"][] = $serie;

    $serie = array("Name" =>"Manueller Werte 2",    "Unit"=>"°C", "ReplaceValues"=>false);
    $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;

    $CfgDaten["Series"][] = $serie;
    // Highcharts-Theme
    //    $CfgDaten['HighChart']['Theme']="grid.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'] = 0;             // in px,  0 = 100%
    $CfgDaten['HighChart']['Height'] = 600;         // in px

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

      // hier werden die CfgDaten geprüft und bei Bedarf vervollständigt
    $CfgDaten = CheckCfgDaten($CfgDaten);

    // abhängig von der Art des Aufrufs -> json String für Highcharts erzeugen
    if (isset($CfgDaten['RunMode'])
        && ($CfgDaten['RunMode'] == "script" || $CfgDaten['RunMode'] == "popup"))
    {
        // Variante1: Übergabe der ScriptId. Daten werden beim Aufruf der PHP Seite erzeugt und direkt ü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 Anzeigen 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")
        {
            WriteContentWithFilename ($CfgDaten, $tmpFilename);       // und jetzt noch die ContentTextbox
        }
    }



?>

DerStandart · 3. Juni 2012 um 20:16

Okay … Fehlermeldung ist nun weg, nachdem ich


 array("Id"=>0, "Data"=>$DataForSerie, "Name" =>"Manueller Werte 1",    "Unit"=>"°C", "ReplaceValues"=>false);
    $serie['type'] = "spline";

„Data“ in „data“ geändert habe … Jetzt ist das Bild wieder schwarz - ohne Fehlermeldung.

Muss auf dem PC irgendwas vorhanden sein, damit die Anzeige funktioniert?

DerStandart · 3. Juni 2012 um 20:20

Habe das Script kopiert, und folgendes geändert:

  // IPS Variablen ID´s
    $CfgDaten['ContentVarableId']= 46251  /*[Allgemein\Highcharts\Highcharts]*/;  // 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']= 14265  /*[Allgemein\Highcharts\Highcharts_V2.02]*/;                  // ID des Highcharts Scripts

Danach wieder Fehlermeldung

Abbruch - Definition von ‚Data‘ und ‚data‘ in ein und derselben Serie nicht möglich.

und wenn ich „Data“ wieder klein schreibe wieder ein schwarzes Bild.

Wo finde ich die ips.js ???

Raketenschnecke · 3. Juni 2012 um 20:23

Raketenschnecke · 3. Juni 2012 um 20:24

kurze Frage: welche HC-Version hast du?

DerStandart · 3. Juni 2012 um 20:28

Habe die ips.js in das angegebene Verzeichnis kopiert --> keine Änderung.

Hier aus dem Forum die HC 2.02 und von der HC Homepage die 2.2.4.

DerStandart · 3. Juni 2012 um 20:29

Bevor Du weitersuchst: Es funktioniert jetzt!!!

Raketenschnecke · 3. Juni 2012 um 20:35

warum funktioniert es?

DerStandart · 3. Juni 2012 um 20:37

Der Fehler saß möglicherweise vor der Tastatur.

Ich habe heute nach der Anleitung aus dem 1. Post von diesem Thread installiert.

[ol]
[li]Download der JavaScripts für Highcharts von highcharts.com
[/li]> [li]und heruntergeladenes ZIP (von highcharts.com) ins Verzeichnis „webfront/user” entpacken
[/li]> [li]Aktuellste IPS-Highcharts-Dateien aus Anhang herunterladen und entpacken.
[/li]> [li]Daraus die “IPS_Template.php” in das“webfront/user/Highcharts“ Verzeichnis kopieren
[/li]> [li]„Highcharts_Vxxxx“ Scripts in IPS einspielen
[/li]> [li]Eine String-Variable mit dem Profil ~HTMLBox anlegen
[/li]> [li]Einspielen und Parametrieren des ConfigScripts (siehe Anhang)
[/li]> [li]Starten des ConfigScripts
[/li]> [/ol]

Nach Punkt 2 hatte ich in webfront/user die Ordner examples, exporting-server, graphics und js.

In Punkt 4 habe ich dann erst den Unterorder „Highcharts“ angelegt und die IPS_Template.php hineinkopiert - vorher war von diesem Ordner nie die Rede.

Nun habe ich einfach die anderen Ordner in Highcharts kopiert - und schon läufts.

Ob die Anleitung nun nicht so eindeutig geschrieben ist oder ich sie nur falsch verstanden habe, kann ich nicht beurteilen …

Raketenschnecke und khc, vielen Dank für Eure Hilfe!!!

Gruß,
Christoph

Raketenschnecke · 3. Juni 2012 um 20:41

Danke für’s Feedback, es ist immer hilfreich, zu verstehen, warum was nicht verstanden wird

DerStandart · 3. Juni 2012 um 20:45

Ich versuche nun mal die Anbindung an die SQL Datenbank… Abendbeschäftigung gesichert…

DerStandart · 6. Juni 2012 um 23:34

Hallo zusammen,

ich komme leider nicht weiter - dabei dachte ich, ich hätte verstanden, wie das alles funktioniert.

Folgende Daten bringen einen Graphen:

   $lastValue = rand (0, 30);
    for ($i = 0; $i <=500 ; $i++)
    {
        $DataForSerie[] = array("TimeStamp"=>$CfgDaten["StartTime"] +  $i * 60 * 60, "Value"=>$lastValue);
        $min = $lastValue -5; $max = $lastValue + 5;
        $lastValue = rand ($min,$max);
    }
    print_r($DataForSerie);


    $serie = array("Id"=>0, "data"=>$DataForSerie, "Name" =>"Manueller Wert 1",    "Unit"=>"°C", "ReplaceValues"=>false);
    $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['data'] = $DataForSerie;
    $CfgDaten["Series"][] = $serie;

Hier die Ausgabe von print_r:

So erscheint der Graph, wie er soll. Da ich die Daten ja aus einer mySQL Datenbank auslesen möchte, habe ich den Code so geändert:

	require("54340.ips.php");
   $VarID = 22107 /*[Küche\Temperatur_Kühlschrank\Temperatur]*/;
   $result = mysql_query("SELECT `ID`, `VarID`, `TimeStamp`, `Value` FROM  $IPS_DB_TABLE WHERE `VarID` = $VarID AND `TimeStamp` > 1325419030 LIMIT 100 ");
   $row = mysql_fetch_array($result); 

   while ($row = mysql_fetch_array($result)){
     $DataForSerie[] = array("TimeStamp"=>$row['TimeStamp'], "Value"=>$row['Value']);
   }

  print_r($DataForSerie);
  
    $serie = array("Id"=>0, "data"=>$DataForSerie, "Name" =>"Temp", "Unit"=>"°C", "ReplaceValues"=>false);
    $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['data'] = $DataForSerie;
    $CfgDaten["Series"][] = $serie;

Die Ausgabe von print_r sieht dann so aus:

ABER: Der Graph bleibt leer. Für mich sehen die beiden Ausgaben von print_r identisch aus.

Entweder ist der Fehler so einfach, dass ich ihn nicht sehe, oder es passiert hier irgendwas anderes, wovon ich keine Ahnung habe.

Kann mir jemand auf die Sprünge helfen?

Danke und Gruß,
Christoph

Raketenschnecke · 6. Juni 2012 um 23:53

passt der Timestamp zum Auswertungszeitraum?

kleiner Tipp: ich füge in meine Arrays immer einen lesebaren Timestamp mit ein, das erleichtert die Fehler-Analyse ungemein:


for($i=0;$i<count($DataForSerie);$i++)
{
  $DataForSerie[$i]['humanDate']  = date("d.m.Y H:i",  $DataForSerie[$i]['TimeStamp']);
}

c.radi · 7. Juni 2012 um 11:43

Hallo Raketenschnecke,

ich habe gerade versucht Deine Konfig zu den Tooltips einzubauen.
Leider werden mir die Werte nicht angezeigt.

Anbei auch meine config:

<?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']= -1;  // 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']= 19599 /*[Scripts\Highcharts\Highcharts_V2.002]*/;  				// 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)
	$CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time()), date("Y",time())); // ab heute 00:00 Uhr
	$CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time();   // = bis jetzt

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

	if ($CfgDaten['RunMode'] == "popup")
	{
		$CfgDaten['WebFrontConfigId'] = 26841 /*[Objekt #26841 existiert nicht]*/;
		$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'] = -1;      // 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'] = false;
	// 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'";

	// **************************************************************************************
	// *** 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 außen - Tagesverlauf";

	// **************************************************************************************
	// *** 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

	// **************************************************************************************
	// *** 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';

	// **************************************************************************************
	// *** xAxis *** http://www.highcharts.com/ref/#xAxis
	// **************************************************************************************
	// $CfgDaten['xAxis']['lineColor'] = '#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'] = -20;
	$CfgDaten['yAxis'][0]['max'] = 40;

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



	// **************************************************************************************
	// *** 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'] = "Aussentemperatur";
	$serie['Id'] = 46053 /*[Haus\EG\Aussen\Wettersensor-IST-Werte\TEMPERATURE]*/;
	$serie['Unit'] = "°C";
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 0;
	$serie['type'] = "spline";
	$serie['yAxis'] = 0;
	$serie['marker']['enabled'] = false;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 1;
	$serie['states']['hover']['lineWidth'] = 2;
	$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'] = "Bodentemperatur";
	$serie['Id'] = 27255 /*[Haus\EG\Aussen\Thermometer\TEMPERATURE]*/;
	$serie['Unit'] = "°C";
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 0;
	$serie['type'] = "spline";
	$serie['yAxis'] = 0;
	$serie['marker']['enabled'] = false;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 1;
	$serie['states']['hover']['lineWidth'] = 2;
	$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'] = "Luftfeuchte";
	$serie['Id'] = 56176 /*[Haus\EG\Aussen\Wettersensor-IST-Werte\HUMIDITY]*/;
	$serie['Unit'] = "%";
	$serie['ReplaceValues'] = false;
	$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']['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;

// Chart-Optionen "Tooltip"
   $CfgDaten['tooltip']['useHTML']                             = true;
   $CfgDaten['tooltip']['shared']                             = false;
   $CfgDaten['tooltip']['crosshairs'][]                     = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
   $CfgDaten['tooltip']['crosshairs'][]                     = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
   $CfgDaten['tooltip']['formatter']                         = "@function() {var unit = {
                                                                            '".@$CfgDaten['Series'][0]['Name']."': '".@$CfgDaten['Series'][0]['Unit']."',
                                                                            '".@$CfgDaten['Series'][1]['Name']."': '".@$CfgDaten['Series'][1]['Unit']."',
                                                                            '".@$CfgDaten['Series'][2]['Name']."': '".@$CfgDaten['Series'][2]['Unit']."',
                                                                            '".@$CfgDaten['Series'][3]['Name']."': '".@$CfgDaten['Series'][3]['Unit']."',
                                                                            '".@$CfgDaten['Series'][4]['Name']."': '".@$CfgDaten['Series'][4]['Unit']."',
                                                                            '".@$CfgDaten['Series'][5]['Name']."': '".@$CfgDaten['Series'][5]['Unit']."',
                                                                            '".@$CfgDaten['Series'][6]['Name']."': '".@$CfgDaten['Series'][6]['Unit']."',
                                                                            '".@$CfgDaten['Series'][7]['Name']."': '".@$CfgDaten['Series'][7]['Unit']."',
                                                                            '".@$CfgDaten['Series'][8]['Name']."': '".@$CfgDaten['Series'][8]['Unit']."',
                                                                            '".@$CfgDaten['Series'][9]['Name']."': '".@$CfgDaten['Series'][9]['Unit']."',
                                                                            '".@$CfgDaten['Series'][10]['Name']."': '".@$CfgDaten['Series'][10]['Unit']."',
                                                                            '".@$CfgDaten['Series'][11]['Name']."': '".@$CfgDaten['Series'][11]['Unit']."',
                                                                            '".@$CfgDaten['Series'][12]['Name']."': '".@$CfgDaten['Series'][12]['Unit']."',
                                                                            }[this.series.name];
                                                                            return '<b>' + Highcharts.dateFormat('%A, %d.%m.%Y, %H:%M', this.x) + ' Uhr</b><br>' + this.series.name
                                                                                        + ': ' + '<b><span style=color:' + this.series.color + '>' + this.y
                                                                                        + unit + '</b></span>';
                                                                            }@";


// Tooltip anpassen
/*    $CfgDaten['tooltip']['enabled'] = true;

    $CfgDaten['tooltip']['formatter'] = "@function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +'°C';            }@";

    $CfgDaten['plotOptions']['line']['dataLabels']['enabled'] = true;
    $CfgDaten['plotOptions']['line']['enableMouseTracking'] = true;
*/

	// Highcharts-Theme
	//	$CfgDaten['HighChart']['Theme']="grid.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'] = 0; 			// in px,  0 = 100%
	$CfgDaten['HighChart']['Height'] = 600; 		// in px

Was mache ich falsch?

Gruß
Christian

Raketenschnecke · 7. Juni 2012 um 12:53

… meinen Codeschnipsel eingefügt zu haben

der war nur für DerStandart gedacht, bzw. für Configs, in denen externe daten zugeführt werden (also nicht via HC-Script aus IPS ausgelesen werden sondern über ein Array im Configscript).
Wenn man diese Timestamps sehen will, muss man natürlcih das Array anschließend via „print_r($DataForSerie)“ im Scriptfenster ausgeben lassen, im Chart werden diese Daten nie zu sehen sein;)

c.radi · 7. Juni 2012 um 14:20

Ja ok, ich habe einfach kopiert, ohne mich tiefgreifend mit Javascript und Highcharts auseinander zu setzen.

Ich habe jetzt mal kleiner angefangen mit den Tooltips:

// Tooltip anpassen
    $CfgDaten['tooltip']['enabled'] = true;
    $CfgDaten['tooltip']['useHTML'] = true;
    $CfgDaten['tooltip']['crosshairs'][]                     = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
    $CfgDaten['tooltip']['crosshairs'][]                     = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
    $CfgDaten['tooltip']['formatter'] = "@function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    Highcharts.dateFormat('%A, %d.%m.%Y, %H:%M', this.x) +': '+ this.y + ' °C';
		            }@";

Mit diesem Codebaustein bekomme ich ein ordentliche Anzeige. Leider wird dann immer „°C“ hinter dem Messwert angezeigt. Wie kann ich das durch die jeweilige Unit (Einheit) ersetzen?
Warum kann ich nicht mit this.series.unit darauf zugreifen?

Nachtrag:

Der Code von Dir geht auch, wenn ich die Unit durch einen festen Wert ersetze.

Gruß
Christian

Jimmyrakete · 7. Juni 2012 um 15:36

bekomme die Meldung beim Laden könnt ihr die Datei mal Prüfen

Vielen Dank

Raketenschnecke · 7. Juni 2012 um 16:22

hier solltest du fündig werden