Hallo RS,
sorry für die späte Antwort. Hab ne Weile gebraucht um Deine letzte Antwort zu verarbeiten. Ich war/bin echt betroffen. Das hab ich so nicht gewollt und gleich garnicht geplant. Wollte Dich auch nicht verschaukeln. Kurzum: Ich entschuldige mich in aller Form!
Ich versuche Deine Ratschläche in Zukunft zu berherzigen.
Hoffe Du Hilfst mir trotzdem mal wieder.
Hallo,
ich hab jetzt ein bisschen mit Highcharts rumgespielt, es funktioniert gut und ist relativ einfach zu begreifen.
Jetzt möcht ich für meine beiden Wechselrichter einen Graphen erstellen, einen Stacked Area - Graphen. Geht auch soweit, sieht aber irgendwie blöd aus. Wie bekomm ich das besser hin??
<?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']= 31514 /*[Charts\PV-Anlage\PV-Anlage]*/; // 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']= 40298 /*[Charts\Highcharts]*/; // 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())-3, date("Y",time())); // ab heute 00:00 Uhr
$CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time(); // = bis jetzt
// damit wird die Art des Aufrufes festgelegt
$CfgDaten['RunMode'] = "script"; // file, script, popup
if ($CfgDaten['RunMode'] == "popup")
{
$CfgDaten['WebFrontConfigId'] = 30271 /*[WebInterface WebFront]*/;
$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'] = "'xy'"; //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'] = "Leistung PV-Anlage";
// **************************************************************************************
// *** 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'] = "Leistung";
$CfgDaten['yAxis'][0]['Unit'] = "W";
$CfgDaten['yAxis'][0]['opposite'] = false;
$CfgDaten['yAxis'][0]['tickInterval'] = 250;
$CfgDaten['yAxis'][0]['min'] = NULL;
$CfgDaten['yAxis'][0]['max'] = NULL;
// $CfgDaten['yAxis'][1]['title']['text'] = "Vorlauf (Speicher oben)";
// $CfgDaten['yAxis'][1]['Unit'] = "°C";
// $CfgDaten['yAxis'][1]['opposite'] = false;
// $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' => 40896, 'Unit'=>"°C");
// $serie['data'][] = array('name'=>'Luftfeuchte', 'Id' => 13641, 'Unit'=>"%");
// $serie['allowPointSelect'] = true;
// $serie['cursor'] = 'pointer';
// $serie['center'] = array(300,100);
// $serie['size'] = 50;
// $serie['dataLabels']['enabled'] = true;
// $CfgDaten['series'][] = $serie;
$serie = array();
$serie['name'] = "Leistung WR1";
$serie['Id'] = 31523 /*[Energiezentrale\PV\WR1\AC-Leistung aktuell]*/;
$serie['Unit'] = "W";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 1;
$serie['type'] = "areaspline";
$serie['stacking'] = "area";
$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'] = "Leistung WR2";
$serie['Id'] = 36355 /*[Energiezentrale\PV\WR2\AC-Leistung aktuell]*/;
$serie['Unit'] = "W";
$serie['ReplaceValues'] = false;
$serie['type'] = "areaspline";
$serie['stacking'] = "area";
$serie['step'] = false;
$serie['yAxis'] = 0;
$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;
// $serie = array();
// $serie['name'] = "Column";
// $serie['Id'] = 29842 /*[Objekt #29842 existiert nicht]*/;
// $serie['Unit'] = "kWh";
// $serie['ReplaceValues'] =false;
// $serie['type'] = "column";
// $serie['step'] = false;
// $serie['yAxis'] = 3;
// $serie['shadow'] = true;
// $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;
// 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'] = 700; // 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
}
}
?>
Vielleicht kann da jemand einen Vorschlag machen.
Gruß
jgoller
Der Parameter „stacking“ ist entweder „normal“ oder „percent“.
Line, Area … gibt es nicht.
In deinem Fall sollte es „normal“ sein.
Guten abend,
der Tipp hat leider nicht das gewünschte Ergebnis gebracht. Ich hab mir den Text im Script noch etwas genauer durchgelesen und folgendes hinzugefügt:
$serie['AggType'] = 0;
$serie['AggValue'] ='Avg';
Das heisst, ich nehme den Durchschnitt (AggValue=Avg) einer Stunde (AggType=0) für den Graphen.
Und schon siehts sehr ansehnlich aus.
Vielen Dank, wgreipl!
schönen Abend noch
jgoller
Hallo,
ich hab eine kleine Frage zur HighChart-Konfig.
Ich möchte die Farben der Graphen ändern, hab das auch pro Graph mit
$serie[‚lineColor‘] = ‚#0000FF‘;
gemacht, siehe Beispiel:
$serie = array();
$serie['name'] = "Aussen-Luftfeuchte";
$serie['Id'] = 15735;
$serie['Unit'] = "%";
$serie['ReplaceValues'] = false;
$serie['type'] = "spline";
$serie['step'] = false;
$serie['yAxis'] = 1;
$serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#0000FF';
$serie['states']['hover']['lineWidth'] = 4;
$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;
Funktioniert soweit auch alles, aber in der Legende hab ich noch die alten Standartfarben, wie bekomme ich die geändert ?
Danke im Voraus
Thomas
Hallo zusammen,
ich trau mich mal wieder.
Ich würde gerne die Tooltipps eines meiner Charts mit IPS angepasst darstellen. Leider hab ich damit mit lesen hier im Forum keinen Erfolg gehabt.
Meine aktuelle ToolTipp Config ist:
$CfgDaten['tooltip']['enabled'] = true;
$CfgDaten['tooltip']['shared'] = true;
$CfgDaten['tooltip']['useHTML'] = true;
$CfgDaten['tooltip']['crosshairs'][] = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
$CfgDaten['tooltip']['formatter'] = Null;
Das Ergebins:
Wenn ich dann noch den Code für SharedTooltipp aus http://www.ip-symcon.de/forum/f53/highcharts-multigraph-17625/#post161572 einfüge bleibt die html-Box leer.
Ziel ist es erst mal den ToolTip mit den Optionen formatter= IPS(Null), shared = true und html = true für alle Series in einem ToolTipp (wie’s ja ohne IPS schon funktioniert) darzustellen. Wenn ich das hinbekommen hab würd ich gerne noch die Werte der Y-Achse (UnixTime) in „H:i“ formatieren.
Die Daten werden aus einer MySQL ausgelesen und sind in UnixTime. Siehe Post http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/#post171280
hier noch meine aktuelle 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
//MySQL Connect Daten
$MySQLConn=mysql_connect($MySQLIP.$MySQLPort, $MySQLAdmin, $MySQLAdminPW);
$db = $IPS_DB;
$SQLTable = $TBL_Wetter_Daemmerung;
$db_selected = mysql_select_db($db, $MySQLConn);
// IPS Variablen ID´s
$CfgDaten['ContentVarableId']= 54396 /*[Wetter\Astronomie\HC\MySQL_SunRiseSet]*/ ; // 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']= 37577 /*[HighCharts\Highcharts_V2.02.ips]*/ ; // 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, 12, 31, 2011);
$CfgDaten['EndTime'] = mktime(23,59,59, 12, 31, 2012);
// damit wird die Art des Aufrufes festgelegt
$CfgDaten['RunMode'] = "script"; // file, script, popup
if ($CfgDaten['RunMode'] == "popup")
{
$CfgDaten['WebFrontConfigId'] = 26841 /*[WFs\wha\Fritzbox\Übersicht\FritzBox_Uebersicht]*/;
$CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
}
// 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;
// **************************************************************************************
// *** 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'] = "'xy'"; //default: $CfgDaten['chart']['zoomType'] = "'xy'";
// **************************************************************************************
// *** credits *** siehe http://www.highcharts.com/ref/#credits
// **************************************************************************************
$CfgDaten['credits']['enabled'] = true;
$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'] = "DämmerungsZeiten für Mühlacker"; // Überchrift des gesamten Charts
// **************************************************************************************
// *** subtitle *** siehe http://www.highcharts.com/ref/#subtitle
// **************************************************************************************
// $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%"; //default: "Zeitraum: %STARTTIME% - %ENDTIME%" // Sub-Überschrift. Wenn nichts angegeben wird wird dieser String als Default verwendet
// $CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i"; // default: "(D) d.m.Y H:i" // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)
// **************************************************************************************
// *** PlotOptions *** http://www.highcharts.com/ref/#plotoptions
// **************************************************************************************
//$CfgDaten['plotOptions']['area']['dataLabels']['enabled'] = true;
//$CfgDaten['plotOptions']['area']['dataLabels']['formatter'] = function() {return (this.y)*100;};
// **************************************************************************************
// *** tooltip *** http://www.highcharts.com/ref/#tooltip
// **************************************************************************************
// ToolTipp shared mit HC funktioniert
/* $CfgDaten['tooltip']['shared'] = true;
$CfgDaten['tooltip']['useHTML'] = true;
$CfgDaten['tooltip']['crosshairs'][] = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
$CfgDaten['tooltip']['formatter'] = ""; // Null = IPS erstellt selbständig einen Tooltip; "" = Standard - Highcharts Tooltip
*/
// ToolTipp shared mit IPS funktioniert noch nicht
$CfgDaten['tooltip']['enabled'] = true;
$CfgDaten['tooltip']['shared'] = true;
$CfgDaten['tooltip']['useHTML'] = true;
$CfgDaten['tooltip']['crosshairs'][] = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
$CfgDaten['tooltip']['formatter'] = Null; // Null = IPS erstellt selbständig einen Tooltip; "" = Standard - Highcharts Tooltip
// Versuch 1 mit Beispiel von http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/footerformat/
/* $CfgDaten['tooltip']['headerFormat'] = '<small>{point.key}</small><table>';
$CfgDaten['tooltip']['pointFormat'] = '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} EUR</b></td></tr>';
$CfgDaten['tooltip']['footerFormat'] = '</table>';
*/
// Versuch 2 mit Beispiel von http://www.ip-symcon.de/forum/f53/highcharts-multigraph-17625/#post161572 Tipps&Tricks: eigenen Tooltip bauen
/* $CfgDaten['tooltip']['formatter'] = "@function() {
var s;
var s = '<b>' + Highcharts.dateFormat('%b %Y', this.x) + '</b>';
$.each(this.points, function(i, point)
{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']."',
}[point.series.name];
s + = '<br>' + this.series.name + ': ' + '<b><span style=color:' + this.series.color + '>'
+ Highcharts.numberFormat(this.y, 1, ',', '.') + unit + '</b></span>'
});
return s;
}@";
*/
/* $CfgDaten['tooltip']['formatter'] = "@function() {
return '<b>'+ 'Dämmerungszeiten ' +'</b>'+Highcharts.dateFormat('%a %d.%m.%Y %H:%M.%S', (this.x))
+ '<br/>' + Highcharts.dateFormat('%a %d.%m.%Y %H:%M.%S', (this.y)) + '<br/>' + (this.y) + '<br/>';}@";
*/
// **************************************************************************************
// *** 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
// $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)
// $CfgDaten['yAxis'][0]['opposite'] = false; // Achse wird auf der rechten (true) oder linken Seite (false) des Charts angezeigt (default = false)
// $CfgDaten['yAxis'][0]['tickInterval'] = 5; // Skalenwerte alle x (TickInterval)
// $CfgDaten['yAxis'][0]['type']='datetime'; //The type of axis. Can be one of 'string', "linear", "logarithmic" or "datetime". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. Defaults to "linear".
$CfgDaten['yAxis'][0]['labels']['enabled'] = true;
$CfgDaten['yAxis'][0]['title']['text'] = "Uhrzeit";
$CfgDaten['yAxis'][0]['Unit'] = "UnixTime";
$CfgDaten['yAxis'][0]['reversed']= true;
$CfgDaten['yAxis'][0]['labels']['formatter'] = "@function() {return (this.value) + ' UnixTime'}@";
//$CfgDaten['yAxis'][0]['opposite'] = false;
//$CfgDaten['yAxis'][0]['labels']['formatter']= "function(){return this.axis}";
//$CfgDaten['yAxis'][0]['dateTimeLabelFormats'] = '%H:%M';
//$CfgDaten['yAxis'][0]['tickInterval'] = 1000000;
//$CfgDaten['yAxis'][0]['min'] = 1325402185;
//$CfgDaten['yAxis'][0]['max'] = 1356938185;
// $CfgDaten['yAxis'][1]['title']['text'] = "Heizungssteller / 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.
$sql_Ergebnis = mysql_query("SELECT DateX, SunRise, SunRiseCivil, SunRiseNautic, SunRiseAstro, SunSet, SunSetCivil, SunSetNautic, SunSetAstro
FROM " . $SQLTable .";")
OR die("'".$sql_Ergebnis."':".mysql_error());
$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC);
$i = 1;
while($data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC))
{
// verschiedene Versuche die Daten zu formatieren
//echo date("d.m.Y H:m:s",$data['SunRise']-$data['DateX']-3600)."
";
//$DataForSerie[] = array("DateX"=>date("d.m.Y",$data['DateX']), "SunRise"=>date("H:i",$data['SunRise']),"human_Date" => date("d.m.Y H:i:s",$data['DateX']));
//$DataForToolTipp[] = array("Value"=>date("H:i",$data['SunRise']), "TimeStamp"=>date("d.m.Y H:i:s",$data['DateX']));
//$DataForSerie[] = array("Value"=>date('d.m.Y H:i',$data['SunRise']), "TimeStamp"=>$data['DateX']);
//$DataForSerie[] = array("Value"=>(substr(date("H:i",$data['SunRise']),0,2)*60)+substr(date("H:i",$data['SunRise']),3,2)-60, "TimeStamp"=>$data['DateX']);
//$DataForSerie[] = array("Value"=>$data['SunRise'], "TimeStamp"=>date("d.m.Y H:i:s",$data['DateX']));
//$DataForSerie[] = array("Value"=>$data['SunRise'], "TimeStamp"=>$data['DateX']);
//print_r($DataForSerie); //Output Buffer exeeds 1024kb. Operation halted (am 8.3.)
$DataForSerie[] = array("Value"=>$data['SunRise']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie2[] = array("Value"=>$data['SunRiseCivil']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie3[] = array("Value"=>$data['SunRiseNautic']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
//$DataForSerie4[] = array("Value"=>$data['SunRiseAstro']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie5[] = array("Value"=>$data['SunSet']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie6[] = array("Value"=>$data['SunSetCivil']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie7[] = array("Value"=>$data['SunSetNautic']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
//$DataForSerie8[] = array("Value"=>$data['SunSetAstro']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
}
//print_r($DataForSerie2);
$i++;
//print_r($DataForSerie);
//$serie = array();
//$serie = array("Id"=>0, "Data"=>$DataForSerie, "Name" =>"Manueller Werte 1", "Unit"=>"°C", "ReplaceValues"=>false);
$serie['name'] = "Sonnenaufgang";
$serie['Unit'] = "Uhr";
$serie['ReplaceValues'] = true;
$serie['RoundValue'] = 0;
$serie['type'] = "spline"; //"areaspline"; //
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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'] = 2;
$serie['Data'] = $DataForSerie; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["Series"][] = $serie;
$serie['name'] = "MorgenDämmerung Civil";
$serie['Unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie2; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["Series"][] = $serie;
$serie['name'] = "MorgenDämmerung Nautic";
$serie['Unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie3; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["Series"][] = $serie;
// $serie['name'] = "MorgenDämmerung Astro";
// $serie['Unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
// $serie['type'] = "spline";
// $serie['yAxis'] = 0;
// $serie['marker']['enabled'] = true;
// $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;
$serie['name'] = "Sonnenuntergang";
$serie['Unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie5; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["Series"][] = $serie;
$serie['name'] = "AbendDämmerung Civil";
$serie['Unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie6; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["Series"][] = $serie;
$serie['name'] = "AbendDämmerung Nautic";
$serie['Unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie7; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["Series"][] = $serie;
// $serie['name'] = "AbendDämmerung Astro";
// $serie['Unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
// $serie['type'] = "spline";
// $serie['yAxis'] = 0;
// $serie['marker']['enabled'] = true;
// $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;
// 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
}
}
?>
Hab ich mich deutlich ausgedrückt? Sonst bitte noch mal nachfragen.
Danke für Eure Hilfe,
@Tuxtom,
die Farben der y-Aches beinhalten 2 Komponenten:
diese müssen individuell in der Achsen-Definition angegeben werden:
$CfgDaten["yAxis"][0]['labels']['style']['color']= '#666666';
$CfgDaten["yAxis"][]['title']['style']['color'] = '666666';
man kann es auch vereinfachen und die weiter oben gesetzte Farbe der Series übernehmen:
statt ‚#666666‘ => $CfgDaten[„Series“][0][‚color‘]; ([0] entspricht der # der Serie, deren farbe übernommen werden soll).
Voraussetzung ist hier nur, das die y-Axis-Definition nach den Series-Definitionen erfolgt.
Wenn ich dann noch den Code für SharedTooltipp aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/f53/hi...25/#post161572 einfüge bleibt die html-Box leer.
wenn du den richtigen TT-Code hinzufügst, wird das Tooltip auch korrekt angezeigt (genau so wie im Posting beschrieben). Zu beachten ist hier die Abhängigkeit „shared“, „html“ und „Tootltip“: alle drei Parameter müssen korrekt miteinander kombiniert werden, sonst bleibt das TT unsichtbar.
Ziel ist es erst mal den ToolTip mit den Optionen formatter= IPS(Null), shared = true und html = true
das funktioniert ebenfalls nicht, da hier der im HC-Script includierte formatter greift. Und der ist numal nicht auf shared-TT’s ausgelegt. Also bleibt eine TT-Anzeige aus. Wenn du „shared“ aus „false“ setzt, funktioniert ein einfacher TT.
zum Format der y-Labels als Zeit könnte evtl. dateTimeLabelFormats weiterhelfen: Highcharts API Reference
Hallo RS,
dake für Deine Hilfe. Hab Deinen Code noch mal eingefügt und alles andere auskommentiert, und siehe da, funktioniert.
Eine Fehleranalyse zeigte, dass ich beim selben Code beim „formatieren“ des Codes der Übersicht halber ein Leerzeichen zwischen + und = in der Zeile
„s += ‚<br>‘ + this.series.name + ': ’ + ‚<b><span style=color:‘ + this.series.color + ‚>‘“
eingefügt hatte.
Jetzt bekomm ich die Daten im Tooltip auch angezeigt, allerdings steht bei Unit „undefined“. Die Values scheinen zu stimmen.
Ausser der Abteilung Tooltipps habe ich in der Config nix verändert.
Doch, habe versuchsweise Deinen Hinweis
"Hinweis: ab HC V2.xx ist die Namenskonvention geändert worden. Je nach Version kann es sein, dass die unten gezeigten Codes nicht funktionieren (und ein „undefined“ als Einheit in den Tooltips auswerfen).
Un diesem Falls sollte der Anfangsbuchstabe der Keys „Name“, „Series“ und „Unit“ klein geschrieben werden.
"
in der Series als auch in den ToolTipps umgesetzt, leider ohne Erfolg.
Muss ich die Key sonst noch wo ändern?
Anbei das aktuelle Script:
<?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
//MySQL Connect Daten
$MySQLConn=mysql_connect($MySQLIP.$MySQLPort, $MySQLAdmin, $MySQLAdminPW);
$db = $IPS_DB;
$SQLTable = $TBL_Wetter_Daemmerung;
$db_selected = mysql_select_db($db, $MySQLConn);
// IPS Variablen ID´s
$CfgDaten['ContentVarableId']= 54396 /*[Wetter\Astronomie\HC\MySQL_SunRiseSet]*/ ; // 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']= 37577 /*[HighCharts\Highcharts_V2.02.ips]*/ ; // 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, 12, 31, 2011);
$CfgDaten['EndTime'] = mktime(23,59,59, 12, 31, 2012);
// damit wird die Art des Aufrufes festgelegt
$CfgDaten['RunMode'] = "script"; // file, script, popup
if ($CfgDaten['RunMode'] == "popup")
{
$CfgDaten['WebFrontConfigId'] = 26841 /*[WFs\wha\Fritzbox\Übersicht\FritzBox_Uebersicht]*/;
$CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
}
// 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;
// **************************************************************************************
// *** 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'] = "'xy'"; //default: $CfgDaten['chart']['zoomType'] = "'xy'";
// **************************************************************************************
// *** credits *** siehe http://www.highcharts.com/ref/#credits
// **************************************************************************************
$CfgDaten['credits']['enabled'] = true;
$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'] = "DämmerungsZeiten für Mühlacker"; // Überchrift des gesamten Charts
// **************************************************************************************
// *** subtitle *** siehe http://www.highcharts.com/ref/#subtitle
// **************************************************************************************
// $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%"; //default: "Zeitraum: %STARTTIME% - %ENDTIME%" // Sub-Überschrift. Wenn nichts angegeben wird wird dieser String als Default verwendet
// $CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i"; // default: "(D) d.m.Y H:i" // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)
// **************************************************************************************
// *** PlotOptions *** http://www.highcharts.com/ref/#plotoptions
// **************************************************************************************
//$CfgDaten['plotOptions']['area']['dataLabels']['enabled'] = true;
//$CfgDaten['plotOptions']['area']['dataLabels']['formatter'] = function() {return (this.y)*100;};
// **************************************************************************************
// *** tooltip *** http://www.highcharts.com/ref/#tooltip
// **************************************************************************************
// ToolTipp shared mit HC funktioniert
/* $CfgDaten['tooltip']['shared'] = true;
$CfgDaten['tooltip']['useHTML'] = true;
$CfgDaten['tooltip']['crosshairs'][] = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
$CfgDaten['tooltip']['formatter'] = ""; // Null = IPS erstellt selbständig einen Tooltip; "" = Standard - Highcharts Tooltip
*/
$CfgDaten['tooltip']['useHTML'] = true;
$CfgDaten['tooltip']['shared'] = 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() {
var s;
var s = '<b>' + Highcharts.dateFormat('%b %Y', this.x) + '</b>';
$.each(this.points, function(i, point)
{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']."',
}[point.series.name];
s += '<br>' + this.series.name + ': ' + '<b><span style=color:' + this.series.color + '>'
+ Highcharts.numberFormat(this.y, 1, ',', '.') + unit + '</b></span>'
});
return s;
}@";
// **************************************************************************************
// *** 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
// $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)
// $CfgDaten['yAxis'][0]['opposite'] = false; // Achse wird auf der rechten (true) oder linken Seite (false) des Charts angezeigt (default = false)
// $CfgDaten['yAxis'][0]['tickInterval'] = 5; // Skalenwerte alle x (TickInterval)
// $CfgDaten['yAxis'][0]['type']='datetime'; //The type of axis. Can be one of 'string', "linear", "logarithmic" or "datetime". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. Defaults to "linear".
$CfgDaten['yAxis'][0]['labels']['enabled'] = true;
$CfgDaten['yAxis'][0]['title']['text'] = "Uhrzeit";
$CfgDaten['yAxis'][0]['Unit'] = "UnixTime";
$CfgDaten['yAxis'][0]['reversed']= true;
$CfgDaten['yAxis'][0]['labels']['formatter'] = "@function() {return (this.value) + ' UnixTime'}@";
//$CfgDaten['yAxis'][0]['opposite'] = false;
//$CfgDaten['yAxis'][0]['labels']['formatter']= "function(){return this.axis}";
//$CfgDaten['yAxis'][0]['dateTimeLabelFormats'] = '%H:%M';
//$CfgDaten['yAxis'][0]['tickInterval'] = 1000000;
//$CfgDaten['yAxis'][0]['min'] = 1325402185;
//$CfgDaten['yAxis'][0]['max'] = 1356938185;
// $CfgDaten['yAxis'][1]['title']['text'] = "Heizungssteller / 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.
$sql_Ergebnis = mysql_query("SELECT DateX, SunRise, SunRiseCivil, SunRiseNautic, SunRiseAstro, SunSet, SunSetCivil, SunSetNautic, SunSetAstro
FROM " . $SQLTable .";")
OR die("'".$sql_Ergebnis."':".mysql_error());
$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC);
$i = 1;
while($data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC))
{
// verschiedene Versuche die Daten zu formatieren
//echo date("d.m.Y H:m:s",$data['SunRise']-$data['DateX']-3600)."
";
//$DataForSerie[] = array("DateX"=>date("d.m.Y",$data['DateX']), "SunRise"=>date("H:i",$data['SunRise']),"human_Date" => date("d.m.Y H:i:s",$data['DateX']));
//$DataForToolTipp[] = array("Value"=>date("H:i",$data['SunRise']), "TimeStamp"=>date("d.m.Y H:i:s",$data['DateX']));
//$DataForSerie[] = array("Value"=>date('d.m.Y H:i',$data['SunRise']), "TimeStamp"=>$data['DateX']);
//$DataForSerie[] = array("Value"=>(substr(date("H:i",$data['SunRise']),0,2)*60)+substr(date("H:i",$data['SunRise']),3,2)-60, "TimeStamp"=>$data['DateX']);
//$DataForSerie[] = array("Value"=>$data['SunRise'], "TimeStamp"=>date("d.m.Y H:i:s",$data['DateX']));
//$DataForSerie[] = array("Value"=>$data['SunRise'], "TimeStamp"=>$data['DateX']);
//print_r($DataForSerie); //Output Buffer exeeds 1024kb. Operation halted (am 8.3.)
$DataForSerie[] = array("Value"=>$data['SunRise']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie2[] = array("Value"=>$data['SunRiseCivil']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie3[] = array("Value"=>$data['SunRiseNautic']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
//$DataForSerie4[] = array("Value"=>$data['SunRiseAstro']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie5[] = array("Value"=>$data['SunSet']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie6[] = array("Value"=>$data['SunSetCivil']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie7[] = array("Value"=>$data['SunSetNautic']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
//$DataForSerie8[] = array("Value"=>$data['SunSetAstro']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
}
//print_r($DataForSerie2);
$i++;
//print_r($DataForSerie);
//$serie = array();
//$serie = array("Id"=>0, "Data"=>$DataForSerie, "Name" =>"Manueller Werte 1", "Unit"=>"°C", "ReplaceValues"=>false);
$serie['name'] = "Sonnenaufgang";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = true;
$serie['RoundValue'] = 0;
$serie['type'] = "spline"; //"areaspline"; //
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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'] = 2;
$serie['Data'] = $DataForSerie; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
$serie['name'] = "MorgenDämmerung Civil";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie2; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
$serie['name'] = "MorgenDämmerung Nautic";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie3; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
// $serie['name'] = "MorgenDämmerung Astro";
// $serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
// $serie['type'] = "spline";
// $serie['yAxis'] = 0;
// $serie['marker']['enabled'] = true;
// $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;
$serie['name'] = "Sonnenuntergang";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie5; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
$serie['name'] = "AbendDämmerung Civil";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie6; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
$serie['name'] = "AbendDämmerung Nautic";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie7; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
// $serie['name'] = "AbendDämmerung Astro";
// $serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
// $serie['type'] = "spline";
// $serie['yAxis'] = 0;
// $serie['marker']['enabled'] = true;
// $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;
// 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
}
}
?>
setz die Achsendefinitionen und TT-Defs nach unten, auf jeden Fall unter die Series-Definitionen.
Du weist oben dem Formatter Werte zu, die du erst weiter unten in den Series definierst. Das kann nicht funktionieren
Hallo RS,
Danke für die Infos, ich werde das mal ausprobieren.
Ich hab gestern noch was in der Highchart - Doku gefunden, das man ein Array der Farben angeben kann. Ich muss mir das mal in den nächsten Tagen genauer durchlesen, wie das gemeint ist und wie es funktioniert.
Grüsse
Thomas
Hi Thomas,
ja, du kannst in der css Standard-Farben hinterlegen (standardmässig sind auch bereits Farben hinterlegt). Ich hab dich aber so verstanden, dass du dediziert die selbe Farbe in der y-Achse haben willst wie im dazugehörigen Graphen.
Hallo RS,
danke für den Tipp. Jetzt bekomm ich die Daten und die Unit für alle aktiven series angezeigt.
Hab dann noch „Highcharts.dateFormat(’%d.%m. %Y’, this.x)“ angepasst und gedacht das kannst du auch mit this.y.
Funktioniert auch so weit. Ich bekomm die Daten der Punkte angezeigt.
Allerdings wird mir bei der Uhrzeit auf die’s bei dem Chart ja eben ankommt immer mit 00:00 angezeigt.
Zu Debugzwecken hab ich im TT zu den formatierten Werten noch die Unixzeiten angefügt. Die stimmen bis auf 1h Offset.
Hier noch wie das Array an HC übergeben wird:
Array
(
[0] => Array
(
[Value] => 26182
[TimeStamp] => 1325372400
[ValueHuman] => 01.01.1970 08:16:22
[TimeStampHuman] => 01.01.2012 00:00:00
)
[1] => Array ( [Value] => 26175 [TimeStamp] => 1325458800 [ValueHuman] => 01.01.1970 08:16:15 [TimeStampHuman] => 02.01.2012 00:00:00 )
Hier die aktuelle 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
//MySQL Connect Daten
$MySQLConn=mysql_connect($MySQLIP.$MySQLPort, $MySQLAdmin, $MySQLAdminPW);
$db = $IPS_DB;
$SQLTable = $TBL_Wetter_Daemmerung;
$db_selected = mysql_select_db($db, $MySQLConn);
// IPS Variablen ID´s
$CfgDaten['ContentVarableId']= 54396 /*[Wetter\Astronomie\HC\MySQL_SunRiseSet]*/ ; // 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']= 37577 /*[HighCharts\Highcharts_V2.02.ips]*/ ; // 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, 12, 31, 2011);
$CfgDaten['EndTime'] = mktime(23,59,59, 12, 31, 2012);
// damit wird die Art des Aufrufes festgelegt
$CfgDaten['RunMode'] = "script"; // file, script, popup
if ($CfgDaten['RunMode'] == "popup")
{
$CfgDaten['WebFrontConfigId'] = 26841 /*[WFs\wha\Fritzbox\Übersicht\FritzBox_Uebersicht]*/;
$CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
}
// 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;
// **************************************************************************************
// *** 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'] = "'xy'"; //default: $CfgDaten['chart']['zoomType'] = "'xy'";
// **************************************************************************************
// *** credits *** siehe http://www.highcharts.com/ref/#credits
// **************************************************************************************
$CfgDaten['credits']['enabled'] = true;
$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'] = "DämmerungsZeiten für Mühlacker"; // Überchrift des gesamten Charts
// **************************************************************************************
// *** subtitle *** siehe http://www.highcharts.com/ref/#subtitle
// **************************************************************************************
// $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%"; //default: "Zeitraum: %STARTTIME% - %ENDTIME%" // Sub-Überschrift. Wenn nichts angegeben wird wird dieser String als Default verwendet
// $CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i"; // default: "(D) d.m.Y H:i" // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)
// **************************************************************************************
// *** PlotOptions *** http://www.highcharts.com/ref/#plotoptions
// **************************************************************************************
//$CfgDaten['plotOptions']['area']['dataLabels']['enabled'] = true;
//$CfgDaten['plotOptions']['area']['dataLabels']['formatter'] = function() {return (this.y)*100;};
// **************************************************************************************
// *** 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';
// **************************************************************************************
// *** 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.
$sql_Ergebnis = mysql_query("SELECT DateX, SunRise, SunRiseCivil, SunRiseNautic, SunRiseAstro, SunSet, SunSetCivil, SunSetNautic, SunSetAstro
FROM " . $SQLTable .";")
OR die("'".$sql_Ergebnis."':".mysql_error());
$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC);
$i = 1;
while($data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC))
{
// verschiedene Versuche die Daten zu formatieren
//echo date("d.m.Y H:m:s",$data['SunRise']-$data['DateX']-3600)."
";
//$DataForSerie[] = array("DateX"=>date("d.m.Y",$data['DateX']), "SunRise"=>date("H:i",$data['SunRise']),"human_Date" => date("d.m.Y H:i:s",$data['DateX']));
//$DataForToolTipp[] = array("Value"=>date("H:i",$data['SunRise']), "TimeStamp"=>date("d.m.Y H:i:s",$data['DateX']));
//$DataForSerie[] = array("Value"=>date('d.m.Y H:i',$data['SunRise']), "TimeStamp"=>$data['DateX']);
//$DataForSerie[] = array("Value"=>(substr(date("H:i",$data['SunRise']),0,2)*60)+substr(date("H:i",$data['SunRise']),3,2)-60, "TimeStamp"=>$data['DateX']);
//$DataForSerie[] = array("Value"=>$data['SunRise'], "TimeStamp"=>date("d.m.Y H:i:s",$data['DateX']));
//$DataForSerie[] = array("Value"=>$data['SunRise'], "TimeStamp"=>$data['DateX']);
//print_r($DataForSerie); //Output Buffer exeeds 1024kb. Operation halted (am 8.3.)
$DataForSerie[] = array("Value"=>$data['SunRise']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400, "ValueHuman"=>date("d.m.Y H:i:s",$data['SunRise']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y H:i:s",$data['DateX']-86400));
// print_r($DataForSerie[])
$DataForSerie2[] = array("Value"=>$data['SunRiseCivil']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie3[] = array("Value"=>$data['SunRiseNautic']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
//$DataForSerie4[] = array("Value"=>$data['SunRiseAstro']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie5[] = array("Value"=>$data['SunSet']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie6[] = array("Value"=>$data['SunSetCivil']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
$DataForSerie7[] = array("Value"=>$data['SunSetNautic']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
//$DataForSerie8[] = array("Value"=>$data['SunSetAstro']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
}
//print_r($DataForSerie2);
$i++;
print_r($DataForSerie[0]);
//$serie = array();
//$serie = array("Id"=>0, "Data"=>$DataForSerie, "Name" =>"Manueller Werte 1", "Unit"=>"°C", "ReplaceValues"=>false);
$serie['name'] = "Sonnenaufgang";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = true;
$serie['RoundValue'] = 0;
$serie['type'] = "spline"; //"areaspline"; //
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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'] = 2;
$serie['Data'] = $DataForSerie; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
$serie['name'] = "MorgenDämmerung Civil";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie2; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
$serie['name'] = "MorgenDämmerung Nautic";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie3; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
// $serie['name'] = "MorgenDämmerung Astro";
// $serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
// $serie['type'] = "spline";
// $serie['yAxis'] = 0;
// $serie['marker']['enabled'] = true;
// $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;
$serie['name'] = "Sonnenuntergang";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie5; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
$serie['name'] = "AbendDämmerung Civil";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie6; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
$serie['name'] = "AbendDämmerung Nautic";
$serie['unit'] = "Uhr";
$serie['ReplaceValues'] = false;
$serie['RoundValue'] = 0;
$serie['type'] = "spline";
$serie['yAxis'] = 0;
$serie['marker']['enabled'] = true;
$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;
$serie['Data'] = $DataForSerie7; //für eigene daten aus MySQL. zeile aus http://www.ip-symcon.de/forum/f52/q-highcharts-v2-0-a-18312/index5.html#post164205
$CfgDaten["series"][] = $serie;
// $serie['name'] = "AbendDämmerung Astro";
// $serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
// $serie['type'] = "spline";
// $serie['yAxis'] = 0;
// $serie['marker']['enabled'] = true;
// $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;
// 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
// **************************************************************************************
// *** 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
// $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)
// $CfgDaten['yAxis'][0]['opposite'] = false; // Achse wird auf der rechten (true) oder linken Seite (false) des Charts angezeigt (default = false)
// $CfgDaten['yAxis'][0]['tickInterval'] = 5; // Skalenwerte alle x (TickInterval)
// $CfgDaten['yAxis'][0]['type']='datetime'; //The type of axis. Can be one of 'string', "linear", "logarithmic" or "datetime". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. Defaults to "linear".
$CfgDaten['yAxis'][0]['labels']['enabled'] = true;
$CfgDaten['yAxis'][0]['title']['text'] = "Uhrzeit";
$CfgDaten['yAxis'][0]['Unit'] = "UnixTime";
$CfgDaten['yAxis'][0]['reversed']= true;
$CfgDaten['yAxis'][0]['labels']['formatter'] = "@function() {return (this.value) + ' UnixTime'}@";
//$CfgDaten['yAxis'][0]['opposite'] = false;
//$CfgDaten['yAxis'][0]['labels']['formatter']= "function(){return this.axis}";
//$CfgDaten['yAxis'][0]['dateTimeLabelFormats'] = '%H:%M';
//$CfgDaten['yAxis'][0]['tickInterval'] = 1000000;
//$CfgDaten['yAxis'][0]['min'] = 1325402185;
//$CfgDaten['yAxis'][0]['max'] = 1356938185;
// $CfgDaten['yAxis'][1]['title']['text'] = "Heizungssteller / Luftfeuchte";
// $CfgDaten['yAxis'][1]['Unit'] = "%";
// $CfgDaten['yAxis'][1]['opposite'] = true;
// **************************************************************************************
// *** tooltip *** http://www.highcharts.com/ref/#tooltip
// **************************************************************************************
// ToolTipp shared mit HC funktioniert
/* $CfgDaten['tooltip']['shared'] = true;
$CfgDaten['tooltip']['useHTML'] = true;
$CfgDaten['tooltip']['crosshairs'][] = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
$CfgDaten['tooltip']['formatter'] = ""; // Null = IPS erstellt selbständig einen Tooltip; "" = Standard - Highcharts Tooltip
*/
$CfgDaten['tooltip']['useHTML'] = true;
$CfgDaten['tooltip']['shared'] = 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() {
var s;
var s = '<b>' + Highcharts.dateFormat('%d.%m. %Y', this.x) + '</b>';
$.each(this.points, function(i, point)
{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']."',
}[point.series.name];
s += '<br>' + this.series.name + ': ' + '<b><span style=color:' + this.series.color + '>'
+ Highcharts.dateFormat('%d.%m.%Y %H:%M', this.y) + unit + '</b></span>'
+ '<br>' + (this.y) + unit + '</b></span>'
});
return s;
}@";
// + Highcharts.numberFormat(this.y, 1, ',', '.') + unit + '</b></span>'
// $DataForSerie[] = array("Value"=>$data['SunRise']-$data['DateX']-3600, "TimeStamp"=>$data['DateX']-86400);
// -------------------------------------------------------------------------------------------------------------------------------------
// 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
}
}
?>
Und noch ein Scrrenshot:
Wie muss ich in den TT this.y formatieren damit mit die richtige Uhrzeit angezeigt wird?
Du musst den Timestamp, den du als Value übergibst, in Milisekunden übergeben (nicht in Sekunden => also jeweils mit 1000 multiplizieren)
am Ende soll es wohl so aussehen (oder so ähnlich, der Graph dient nur als Beispiel und stellt keine Sonnenauf- und Untergangsdaten dar)?
und hier Live: Highcharts | www.raketenschnecke.net
Uhrzeit auf yAchse.zip (4.3 KB)
Hallo RS,
danke für Deine Antworten und das Script. Werd ich mir bei Gelegenheit mal zu Gemüte führen.
Das wars was ich eigentlich wollte.
Das mit den Millisekunden hast Du mir ja mal beschrieben. Habs auch in diesem Fall schon mal ausprobiert. Damals leider ohne Erfolg. Hatte wohl noch andere Fehler drin die ich mit Deiner Hilfe jetzt korrigieren konnte. Danach hab ichs wohl nicht mehr versucht.
Danke dafür und für Deine Gedult mit mir!
Verstanden hab ichs aber trotzdem noch nicht wirklich. Wenn ich doch einen this.y in die TT hole (ohne formatierung (siehe letzter Post von mir)) und der mir den Wert zeigt den ich aus der DB an HC übergebe, dann müsste er doch formatiert auch wieder die richtige Uhrzeit zeigen?
Hier mal ein Screenshot vom vorläufigen Ergebnis.
Ich bastel jetzt mal weiter und melde mich dann mit dem Ergebnis oder weiteren Fragen wieder.
OT: Ich hab keine Ahnung von dem Thema und woher Du die Daten für den Graphen in Deinem Link hast. Gemessen oder berechnet? Ich hätte bei dem Thema eigentlich auch eine schöne Kurve erwartet. Eiert unser Planet wirklich so?
Und du musst für mich keine Nachtschicht machen …
Danke nochmal und
OT: Ich hab keine Ahnung von dem Thema und woher Du die Daten für den Graphen in Deinem Link hast. Gemessen oder berechnet? Ich hätte bei dem Thema eigentlich auch eine schöne Kurve erwartet. Eiert unser Planet wirklich so?
ich hab gewusst, dass das kommt. Nein, das sind berechnete Daten für einen anderen Zweck und mit einer recht groben zeitl. Auflösung. Und ich hatte nicht die Muße, mir hier extra neue Datensätze zu basteln.
Also bitte nicht anfangen zu interpretieren, es geht nur um die Demonstration des Ergebnisses im HC 
Hallo Wolfgang,
ich vermute, du erwartetst hier (Auszug aus Formatter-Code für TT):
Die Formatierung ist grundsätzlich nicht falsch, aber wenn Du einen Value von [Value] => 26182 übergibst (was ja durch this.y in den Formatter geholt wird), klappt das nicht, weil JS immer in Millisekunden rechnet (bereits mehrfach erwähnt). Und dieser übergebene Wert wäre formatiert „01.01.1970 0:00:26.182 Uhr“. Da Du im dateFormat keine Sekunden angegeben hast, siehst du alles, was nach Minuten kommt, auch nicht.
Hi,
ich habe auch nochmal eine Verständnisfrage zu Highcharts.
Wenn ich einen Area- (oder Spline-) Graph haben will, der mir nur die gemessenen Werte ausgibt und NULL, wenn keine, wie mach ich das dann.
Ich habe das Problem, siehe Bild, dass eine Verbindung zwischen dem letzten Messwert und dem neuen Messwert gemacht wird, obwohl zwischenzeitlich nichts war.
Das hat dann diesen (falschen) Ramp up Verlauf.
… oder ist das eher ein IPS Problem und ich muss regelmäßig 0 Werte generieren.
Der EKM sendet nur Werte != 0.
Mic
Hi MicF,
ich denke, hier kann man kaum eine fixe Lösung präsentieren, da muss man ein wenig probieren.
Zunächst: EKM sendet nicht, sondern wird abgefragt. Und wenn es abgefragt wird, sendet es dan aktuellen, EKM-internen Zählerstand. Die Berechnung für Current erfolgt m.E. in der IPS-Instanz.
Unter dem Strich kann bei Current ein 0-Wert vorkommen.
Eine Darstellung ohne RampUp/RampDown in HC erreicht man in der Regel durch den Parameter
$serie[‚step‘] = true;
allerdings macht das nur bei area/line Sinn (nicht bei areaspline/spline).
Am Besten schaut man sich immer die Rohdaten an, um dann zu analysieren, wie man diese in HC darstellen kann.
