häng mal das .tmp-File an, vielleicht finde ich da was
worauf beziehst du dich eigentlich, wenn du sagst: „es erscheint nichts“ ? => kannst du mal einen Screenshot von deinem WFE mit dem Problemkind erstellen?
Versuch mal die Reihenfolge zu ändern:
$DataForSerie = array(„Value“=>$arr[$j][2], „TimeStamp“=>$arr[$j][1]);
Ich hab auch Probleme mit der Darstellung wenn ich z.b. zum debuggen Human Values dazwischen flicke.
Und kommentier die Zeile: $row = mysql_fetch_array($result); durekt nach der Query aus. Ist unten noch mal in der While …
Bei mir hatte das den Effekt, dass dann in der While der erste Datensatz nicht mehr angekommen ist.
Ich habe die beiden Arrays verglichen. In dem, welche ich mti khc’s Code erzeugt habe, tauchen nur ganze Zahlen auf, während es in meinem Array Float-Werte sind. Das sollte aber nicht das Problem sein … Habe auch extra mal die TimeStamps umgerechnet um sicherzustellen, dass ich im richtigen Zeitrahmen bin - auch der stimmt.
Hier nun die tmp-Files - eines mit den erzeugten Zufallsdaten und eines mit meinen SQL-Daten.
HighchartsCfg33593-Daten-khc.txt (5.44 KB)
HighchartsCfg33593-Daten-SQL.zip (70 KB)
Die TXT-Datei mit den Daten aus der SQL-Datenbank musste ich zippen, da sie sonst zu groß zum Anhängen ist.
Gruß,
Christoph
hi wolfgang,
die Reihenfolge der Array-Elemente (Sub-Keys) spielt keine Rolle, Wichtig ist nur, dass je ein „Value“ und ein „TimeStamp“ enthalten ist. Auch werden weitere Elemente im Array („humanDate“ o.Ä.) ohne Probleme ignoriert.
Hallo ihr beiden,
bei mir läuft das aus mySQL mit dem beigefügten Script. Ich hatte auch Anzeigeprobleme, kann jedoch nicht mehr genau sagen woran es lag. Zumindest sind mir noch in Erinnerung:
- die Zeilen 16 und 17 mussten irgenwie an die Zeiten der mySQL-Daten angepaßt werden
- dann noch eine Sache von der ich nicht weiß warum es so sein muss, aber es funktioniert (bei mir) nur so. Siehe Zeilen 189, 219 und 214. Dort musste ich die mySQL-Werte mit *10 und /10 bearbeiten. So habe ich eine Grafik-Anzeige bekommen bzw. auch dann wenn ich die mySQL-Werte auf Ganzzahlen gerundet habe.
Vieleicht hilft es euch irgendwie weiter.
<?php
// bei der Konfiguration unbedingt auf die Groß/Kleinschreibung achten
// es wurde versucht folgende Namensgebeung in der Konfiguration zu verwenden
// Parameter mit kleinen Anfangsbuchstaben = Parameter welche von Highcharts übnernommen wurden. Siehe dazu: http://www.highcharts.com/ref/
// Parameter mit großen Anfangsbuchstaben = für das IPS-Highcharts-Script eingeführte Parameter
Global $CfgDaten; // damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden
// IPS Variablen ID´s
$CfgDaten['ContentVarableId']= -1/*[Allgemein\Highcharts\Highcharts]*/; // ID der String Variable in welche die Daten geschrieben werden (-1 oder überhaupt nicht angeben wenn die Content Variable das übergordnete Element ist)
$CfgDaten['HighChartScriptId']= 29756 /*[Grafik-HC\Zentrale Scripts\HighChart_V2.02]*/ ; // ID des Highcharts Scripts
// Highcharts oder Highstock (default = Highcharts
$CfgDaten['Ips']['ChartType'] = 'Highcharts';
// Zeitraum welcher dargestellt werden soll (kann durch die Zeitvorgaben in den Serien verändert werden)
$CfgDaten['StartTime'] = mktime(0,0,0,1,1, date("Y",time()));
$CfgDaten['EndTime'] = mktime(23,23,59,12,31, date("Y",time()));
//$CfgDaten['StartTime'] = mktime(0,0,0, date("m", time())-7, date("d",time()), date("Y",time())); // ab heute 00:00 Uhr
//$CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time(); // = bis jetzt
// damit wird die Art des Aufrufes festgelegt
$CfgDaten['RunMode'] = "script"; // file, script, popup
if ($CfgDaten['RunMode'] == "popup")
{
$CfgDaten['WebFrontConfigId'] = -1;
$CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
}
// Übergabe der IP-Adresse und des Ports für die Darstellung im Dashboard
// Wichtig! Wenn Darstellung in Webfront diese Variablen auskommentieren
//$CfgDaten['Ips']['Dashboard']['Ip'] = "127.0.0.1";
//$CfgDaten['Ips']['Dashboard']['Port'] = "82";
// Serienübergreifende Einstellung für das Laden von Werten
$CfgDaten['AggregatedValues']['HourValues'] = -1; // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
$CfgDaten['AggregatedValues']['DayValues'] = -1; // ist der Zeitraum größer als X Tage werden Tageswerte geladen
$CfgDaten['AggregatedValues']['WeekValues'] = -1; // ist der Zeitraum größer als X Tage werden Wochenwerte geladen
$CfgDaten['AggregatedValues']['MonthValues'] = -1; // ist der Zeitraum größer als X Tage werden Monatswerte geladen
$CfgDaten['AggregatedValues']['YearValues'] = -1; // ist der Zeitraum größer als X Tage werden Jahreswerte geladen
$CfgDaten['AggregatedValues']['NoLoggedValues'] = 1000; // ist der Zeitraum größer als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen $CfgDaten['AggregatedValues']['MixedMode'] = false; // alle Zeitraumbedingungen werden kombiniert
$CfgDaten['AggregatedValues']['MixedMode'] = false;
// Systematik funktioniert jetzt additiv. D.h. die angegebenen Werte gehen ab dem letzten Wert
//
// -5 Tage -3 Tage EndTime
// | | | |
// | |DayValue = 2 |HourValues = 3 |
// |Tageswerte |Stundenwerte |jeder geloggte Wert |
// **************************************************************************************
// *** Highcharts Options ***
// **************************************************************************************
// Ab hier werden die Bereiche des Highchart-Objektes parametriert.
// Dieser Bereich wurde (soweit möglich) identisch der Originalstruktur gehalten.
// Informationen über die Parametrierung findet man unter http://www.highcharts.com/ref/
// **************************************************************************************
// *** chart *** http://www.highcharts.com/ref/#chart
// **************************************************************************************
// $CfgDaten['chart']['zoomType'] = "'x'"; //default: $CfgDaten['chart']['zoomType'] = "'xy'";
// **************************************************************************************
// *** credits *** siehe http://www.highcharts.com/ref/#credits
// **************************************************************************************
// $CfgDaten['credits']['text'] = "used by IPS";
// $CfgDaten['credits']['href'] = "http://www.ip-symcon.de/forum/f53/highcharts-multigraph-v1-0-a-17625/#post120721";
// **************************************************************************************
// *** title *** siehe http://www.highcharts.com/ref/#title
// **************************************************************************************
// $CfgDaten['title']['text'] = "Chart-Überschrift"; // Überchrift des gesamten Charts
// -> veraltet: 'Title' -> verwende ['title']['text']
$CfgDaten['title']['text'] = "Photovoltaik-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'] = "M";
// **************************************************************************************
// *** 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'] = "Monatsertrag"; // Bezeichnung der Achse
$CfgDaten['yAxis'][0]['Unit'] = "Euro"; // Einheit für die Beschriftung die Skalenwerte
// **************************************************************************************
// *** series *** http://www.highcharts.com/ref/#series
// **************************************************************************************
// $serie['name'] = "Temperatur; // Name der Kurve (Anzeige in Legende und Tooltip)
//
// $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)
//
// $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.
// Daten aus mySQL holen -------------------------------------------------------------------------------------------------------------------------------
// --- Zugangsdaten
$MySQLHost = "192.168.";
$username = "x";
$password = "x";
$DB = "hogdaten";
// --- DB öffnen
$link = mysql_connect($MySQLHost, $username, $password) or die ("Keine Verbindung möglich!");
mysql_select_db($DB) or die("Auswahl der Datenbank fehlgeschlagen");
mysql_select_db($DB) or die (mysql_error());
// --- SQL-Abfragen aktuelles Jahr ausführen und Daten auslesen ------------------------------------------------
$sql = "SELECT Datum, WR_Ertrag_Euro FROM monatsdaten WHERE YEAR(Datum) = YEAR(CURDATE())";
$result = mysql_query($sql);
if (!$result) {
echo "Anfrage ($sql) konnte nicht ausgeführt werden : " . mysql_error();
exit;
}
if (mysql_num_rows($result) == 0) {
echo "Keine Zeilen gefunden, nichts auszugeben, daher Abbruch";
exit;
}
// --- Werte in Array schreiben und bei Bedarf (Kontroll-)Anzeige der Werte
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$DataserieAktJahr[] = array("TimeStamp"=>strtotime($row['Datum']), "Value"=>$row['WR_Ertrag_Euro']*10/10);
#$DataserieAktJahr[] = array("Datum"=>$row['Datum'], "TimeStamp"=>strtotime($row['Datum']), "Value"=>$row['WR_Ertrag_Euro']);
#printf($row["Datum"]);
#print " ";
#printf (strtotime($row["Datum"]));
#print " : ";
#printf($row["WR_Ertrag_Euro"]);
#print "
";
}
#print "
";
#print_r($DataserieAktJahr);
// --- Speicher freigeben
mysql_free_result($result);
// --- SQL-Abfragen Vorjahr ausführen und Daten auslesen -------------------------------------------------------
$sql1 = "SELECT Datum, WR_Ertrag_Euro FROM monatsdaten WHERE YEAR(Datum) = YEAR(CURDATE())-1";
$result1 = mysql_query($sql1);
if (!$result1) {
echo "Anfrage ($sql1) konnte nicht ausgeführt werden : " . mysql_error();
exit;
}
if (mysql_num_rows($result1) == 0) {
echo "Keine Zeilen gefunden, nichts auszugeben, daher Abbruch";
exit;
}
// --- Werte in Array schreiben
while ($row1 = mysql_fetch_array($result1, MYSQL_ASSOC)) {
$DataserieVorJahr[] = array("TimeStamp"=>strtotime($row1['Datum'])+31622400, "Value"=>$row1['WR_Ertrag_Euro']*10/10);
}
#print "
";
#print_r($DataserieVorJahr);
// --- Speicher freigeben
mysql_free_result($result1);
// --- SQL-Abfragen Vor2jahr ausführen und Daten auslesen -----------------------------------------------------
$sql2 = "SELECT Datum, WR_Ertrag_Euro FROM monatsdaten WHERE YEAR(Datum) = YEAR(CURDATE())-2";
$result2 = mysql_query($sql2);
if (!$result2) {
echo "Anfrage ($sql2) konnte nicht ausgeführt werden : " . mysql_error();
exit;
}
if (mysql_num_rows($result2) == 0) {
echo "Keine Zeilen gefunden, nichts auszugeben, daher Abbruch";
exit;
}
// --- Werte in Array schreiben
while ($row2 = mysql_fetch_array($result2, MYSQL_ASSOC)) {
$DataserieVor2Jahr[] = array("TimeStamp"=>strtotime($row2['Datum'])+(31622400*2), "Value"=>$row2['WR_Ertrag_Euro']*10/10);
}
#print "
";
#print_r($DataserieVor2jahr);
// --- Speicher freigeben
mysql_free_result($result2);
// --- SQL-Abfragen Vor3jahr ausführen und Daten auslesen -----------------------------------------------------
$sql3 = "SELECT Datum, WR_Ertrag_Euro FROM monatsdaten WHERE YEAR(Datum) = YEAR(CURDATE())-3";
$result3 = mysql_query($sql3);
if (!$result3) {
echo "Anfrage ($sql3) konnte nicht ausgeführt werden : " . mysql_error();
exit;
}
if (mysql_num_rows($result3) == 0) {
echo "Keine Zeilen gefunden, nichts auszugeben, daher Abbruch";
exit;
}
// --- Werte in Array schreiben
while ($row3 = mysql_fetch_array($result3, MYSQL_ASSOC)) {
$DataserieVor3Jahr[] = array("TimeStamp"=>strtotime($row3['Datum'])+(31622400*3), "Value"=>$row3['WR_Ertrag_Euro']*10/10);
}
#print "
";
#print_r($DataserieVor3jahr);
// --- Speicher freigeben
mysql_free_result($result3);
// --- Schließen der Verbinung
mysql_close($link);
// Ende mySQL ------------------------------------------------------------------------------------------------------------------------------------------
// Aktuelle Erträge
$serie = array("Id"=>0, "Data"=>$DataserieAktJahr, "Name" =>"Aktueller Ertrag", "Unit"=>"€", "ReplaceValues"=>false);
$serie['type'] = "column";
$serie['step'] = false;
$serie['yAxis'] = 0;
$serie['shadow'] = false;
$serie['lineWidth'] = 1;
$serie['states']['hover']['lineWidth'] = 2;
$serie['marker']['enabled'] = false;
$serie['marker']['symbol'] = 'circle';
$serie['marker']['states']['hover']['enabled'] = true;
$serie['marker']['states']['hover']['symbol'] = 'circle';
$serie['marker']['states']['hover']['radius'] = 4;
$serie['marker']['states']['hover']['lineWidth'] = 1;
$serie['Data'] = $DataserieAktJahr;
$CfgDaten["Series"][] = $serie;
// Erträge Vorjahr
$serie = array("Id"=>0, "Data"=>$DataserieVorJahr, "Name" =>"Ertrag Vorjahr", "Unit"=>"€", "ReplaceValues"=>false);
$serie['type'] = "column";
$serie['step'] = false;
$serie['yAxis'] = 0;
$serie['shadow'] = false;
$serie['lineWidth'] = 1;
$serie['states']['hover']['lineWidth'] = 2;
$serie['marker']['enabled'] = false;
$serie['marker']['symbol'] = 'circle';
$serie['marker']['states']['hover']['enabled'] = true;
$serie['marker']['states']['hover']['symbol'] = 'circle';
$serie['marker']['states']['hover']['radius'] = 4;
$serie['marker']['states']['hover']['lineWidth'] = 1;
$serie['Data'] = $DataserieVorJahr;
$CfgDaten["Series"][] = $serie;
// Erträge Vor 2 Jahren
$serie = array("Id"=>0, "Data"=>$DataserieVor2Jahr, "Name" =>"Ertrag Vor 2 Jahren", "Unit"=>"€", "ReplaceValues"=>false);
$serie['type'] = "column";
$serie['step'] = false;
$serie['yAxis'] = 0;
$serie['shadow'] = false;
$serie['lineWidth'] = 1;
$serie['states']['hover']['lineWidth'] = 2;
$serie['marker']['enabled'] = false;
$serie['marker']['symbol'] = 'circle';
$serie['marker']['states']['hover']['enabled'] = true;
$serie['marker']['states']['hover']['symbol'] = 'circle';
$serie['marker']['states']['hover']['radius'] = 4;
$serie['marker']['states']['hover']['lineWidth'] = 1;
$serie['Data'] = $DataserieVor2Jahr;
$CfgDaten["Series"][] = $serie;
// Erträge Vor 3 Jahren
$serie = array("Id"=>0, "Data"=>$DataserieVor3Jahr, "Name" =>"Ertrag Vor 3 Jahren", "Unit"=>"€", "ReplaceValues"=>false);
$serie['type'] = "column";
$serie['step'] = false;
$serie['yAxis'] = 0;
$serie['shadow'] = false;
$serie['lineWidth'] = 1;
$serie['states']['hover']['lineWidth'] = 2;
$serie['marker']['enabled'] = false;
$serie['marker']['symbol'] = 'circle';
$serie['marker']['states']['hover']['enabled'] = true;
$serie['marker']['states']['hover']['symbol'] = 'circle';
$serie['marker']['states']['hover']['radius'] = 4;
$serie['marker']['states']['hover']['lineWidth'] = 1;
$serie['Data'] = $DataserieVor3Jahr;
$CfgDaten["Series"][] = $serie;
// Sollerträge
$serie = array("Name" =>"Sollertrag", "Unit"=>"€", "ReplaceValues"=>false);
$serie['type'] = "line";
$serie['step'] = false;
$serie['yAxis'] = 0;
$serie['shadow'] = false;
$serie['lineWidth'] = 3;
$serie['states']['hover']['lineWidth'] = 2;
$serie['marker']['enabled'] = false;
$serie['marker']['symbol'] = 'circle';
$serie['marker']['states']['hover']['enabled'] = true;
$serie['marker']['states']['hover']['symbol'] = 'circle';
$serie['marker']['states']['hover']['radius'] = 4;
$serie['marker']['states']['hover']['lineWidth'] = 1;
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,1,1, date("Y",time())), "y"=>226.74); // Uhrzeit wird über TimeStamp als PHP Wert vorgegeben
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,2,1, date("Y",time())), "y"=>367.92);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,3,1, date("Y",time())), "y"=>554.46);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,4,1, date("Y",time())), "y"=>734.44);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,5,1, date("Y",time())), "y"=>835.42);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,6,1, date("Y",time())), "y"=>797.09);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,7,1, date("Y",time())), "y"=>882.17);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,8,1, date("Y",time())), "y"=>799.89);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,9,1, date("Y",time())), "y"=>647.49);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,10,1, date("Y",time())), "y"=>453.01);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,11,1, date("Y",time())), "y"=>274.42);
$serie['data'][] = array("TimeStamp"=>mktime(0,0,0,12,1, date("Y",time())), "y"=>175.78);
$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'] = 550; // 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
}
}
?>
Vielen Dank für die Hilfe. Ich komme gar nicht so schnell hinterher, alles zu testen…
Also: Wolfgangs Tipps führten leider nicht zum Ziel. Werde nun den Code von khc mal ausprobieren.
Hier noch der Screenshot:
Bin nun auch khc’s Vorschläge durchgegangen.
Folgendes eingefügt
for ($j = 1; $j <=$Anzahl - 2 ; $j++){
$DataForSerie[] = array("TimeStamp"=>$arr[$j][1], "Value"=>$arr[$j][2]*10/10);
}
und die Zeitangaben überprüft:
$CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time())-10, date("Y",time())); // ab heute 00:00 Uhr
$CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time(); // = bis jetzt
10 Tage zurück - so soll es sein. Die erzeugten TimeStamps an dieser Stellen stimmen mit denen im Array überein.
Ratlosigkeit!
Auf jeden Fall an dieser Stelle schon mal ein großer Dank an alle, die mir helfen.
Nächster Schritt, den ich versuchen werde:
Erzeugen einer mySQL-Tabelle mit Ganzzahligen Dummy-Daten um zu schauen, ob die Datenübergabe prinzipiell funktioniert. Dazu werde ich heute wahrscheinlich nicht mehr kommen …
–> #247 ???
ok, hast gewonnen 
Neuste Erkenntnis:
Wenn ich Zufallsdaten erzeuge, so funktioniert es mit 100 Zufallswerten, nicht aber mit 1000. In der DB sind im Moment 8000 Werte, die ich auf das HC-Script jage. Kann mal jemand prüfen, wie viele Werte man maximal draufgeben kann?
Danke!
1000 ist Max pro Graph.
ich hab eben nochmal im Betaforum recherchiert: ich hatte das Problem vor 3 Monaten bei der Queue-Analysis (Analyse des Logfiles).
dort hab ich die Arrays auf 1000 Datensätze pro Graph eingekürzt mit
$HC_Data_MQ_Items = array_slice($HC_Data_MQ_Items, -1000);
In der HC-Doku gibt es einen Threshold-Parameter, schau mal, ob du damit weiterkommst. Ich bin der Sache nie wirklich nachgegangen
Hmm, okay. Also nächster Schritt: Die Daten irgendwie sinnvoll auszudünnen … Komme ich wahrscheinlich erst morgen zu.
Andere Frage: Habe ich es irgendwo überlesen, dass 1000 Werte das Maximum sind?
Gruß,
Christoph
m.E. steht das hier im Forum nur im Betabereich, in dem besagten Thema. Aber vielleicht steht es irgendwo auf den HighChart-Seiten…
Aber mal davon abgesehen: ich hab irgendwo auch Charts, die garantiert mehr als 1000 Datenpunkte im Graphen haben. Allerdings geht das dann sehr auf die Performance des Client-Rechners. Auf Android-Tabs ist das der Killer schlechthin. Deswegen hab ich derartige Charts wieder stillgelegt.
Hallo zusammen,
bin mit der Darstellung meiner Daten mittlerweile (mit mathematischen Kompromissen) halbwegs zufrieden.
Jetzt bin ich ich dabei das Ganze ein wenig zu designen.
Dabei stosse ich auf folgende Probleme, die ich auch bisher mit lesen in Highcharts API Reference nicht fündig geworden bin.
Ich hab die $CfgDaten[‚yAxis‘][0][‚reversed‘]= true; gesetzt, damit ich morgens oben habe!
Dabzu habe ich auch die Reihenfolge der Series umgedreht, damit ich die Füllungen der areasplines richtig angezeigt bekomme.
Abweichend vom angehängten Screenshot möchte ich: (ich liste gleich alles auf, damits nachher nicht heisst, in der Kombination gehts ned.)
-
die horizontalen Verlängerungen (ich glaube das wären die Y-Ticks) rausbekommen. Hab dazu leider nix gefunden. hab auch schon mal leider erfolglos versucht die mit $CfgDaten[‚yAxis‘][0][‚tickColor‘] = ‚#1C1C19‘; auf die selbe Farbe wie den Hintergrund zu setzen.
-
in den Tooltipps hätt ich gerne die selbe Reihnefolge wie die Kurven: oben - Astronomische Dämmerung früh - nautische Dämmerung früh … nautische dämmerung abends - astronomische Dämmerung abends -unten.
-
in den Tooltipps hätt ich gerne die Farben der $serie[‚lineColor‘]. Eine Änderung von „+ this.series.color“ in „+ this.series.lineColor“ zeigt mir die Werte im ToolTipp alle in weiß.
-
in den Tooltipps hätt ich die Serien+Daten gerne im Blocksatz. Ich weiss, dass es sowas wie ‚text-align: justify‘ gibt. Da ich aber nicht wirklich html kann blick ich nicht wo und wie ich das einfügen muss.
-
die y-Achse hätt ich gerne so beschriftet: 2:00 Uhr früh (oben), 3:00, 6:00 … 24:00, 3:00 (unten)
-
die x-Achse hätt ich gerne so beschriftet: 1.Jan … 1.Dez, 31.Dez (von links nach rechts)
-
gibt es eine Möglichkeit vertikale linien über der X-Achse fest einzufügen? Ich denke da an die traditionellen Sonnwenden u. Tag-Nachtgleichen um die hervorzuheben.
-
nee, Legend reverse hab ich selber noch gefunden.
Hab noch ein paar Kleinigkeiten. Hoffe die schliessen sich durch Anbängigkeiten nicht aus. Wird jetzt aber sonst hier zu viel. Aus Erfahrung weiss ich, das Posts mit vielen Fragen i.d.R. nur zu einem Bruchteil beantwortet werden …
Anbei ein aktueller Screenshot und meine Config
<?php
// bei der Konfiguration unbedingt auf die Groß/Kleinschreibung achten
// es wurde versucht folgende Namensgebeung in der Konfiguration zu verwenden
// Parameter mit kleinen Anfangsbuchstaben = Parameter welche von Highcharts übnernommen wurden. Siehe dazu: http://www.highcharts.com/ref/
// Parameter mit großen Anfangsbuchstaben = für das IPS-Highcharts-Script eingeführte Parameter
//Global $CfgDaten; // damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden
//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'";
// $CfgDaten['chart']['plotBorderColor'] = "0000B2";
// $CfgDaten['chart']['backgroundColor'] = '#2222F2';
$CfgDaten['chart']['plotBackgroundColor'] = '#1C1C19';
// **************************************************************************************
// *** 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;};
// $CfgDaten['plotOptions']['areaspline']['color']=
// **************************************************************************************
// *** exporting *** http://www.highcharts.com/ref/#exporting
// **************************************************************************************
// $CfgDaten['exporting']['enabled'] = true;
// **************************************************************************************
// *** lang *** http://www.highcharts.com/ref/#lang
// **************************************************************************************
// $CfgDaten['lang']['resetZoom'] = "Zoom zurücksetzten";
// **************************************************************************************
// *** legend *** http://www.highcharts.com/ref/#legend
// **************************************************************************************
// $CfgDaten['legend']['backgroundColor'] = '#FCFFC5';
$CfgDaten['legend']['reversed'] = true;
// $CfgDaten['legend']['floating'] = 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); // wenn die Zeile aktiviert wird, beginnt der TimeStamp einen Tag später. ?? warum?? nicht gelöst.
$i = 0;
while($data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC))
{
$DataForSerie[] = array("Value"=>$data['SunRise']-$data['DateX'], "TimeStamp"=>$data['DateX'], "ValueHuman"=>date("d.m.Y H:i",$data['SunRise']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y",$data['DateX']-86400));
$DataForSerie2[] = array("Value"=>$data['SunRiseCivil']-$data['DateX'], "TimeStamp"=>$data['DateX'], "ValueHuman"=>date("d.m.Y H:i:s",$data['SunRiseCivil']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y H:i:s",$data['DateX']-86400));
$DataForSerie3[] = array("Value"=>$data['SunRiseNautic']-$data['DateX'], "TimeStamp"=>$data['DateX'], "ValueHumanNautic"=>date("d.m.Y H:i:s",$data['SunRiseNautic']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y H:i:s",$data['DateX']-86400));
$DataForSerie4[] = array("Value"=>$data['SunRiseAstro']-$data['DateX'], "TimeStamp"=>$data['DateX'], "ValueHumanAstro"=>date("d.m.Y H:i:s",$data['SunRiseAstro']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y H:i:s",$data['DateX']-86400));
$DataForSerie5[] = array("Value"=>$data['SunSet']-$data['DateX'], "TimeStamp"=>$data['DateX'], "ValueHuman"=>date("d.m.Y H:i:s",$data['SunRise']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y H:i:s",$data['DateX']-86400));
$DataForSerie6[] = array("Value"=>$data['SunSetCivil']-$data['DateX'], "TimeStamp"=>$data['DateX'], "ValueHuman"=>date("d.m.Y H:i:s",$data['SunSetCivil']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y H:i:s",$data['DateX']-86400));
$DataForSerie7[] = array("Value"=>$data['SunSetNautic']-$data['DateX'], "TimeStamp"=>$data['DateX'], "ValueHuman"=>date("d.m.Y H:i:s",$data['SunSetNautic']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y H:i:s",$data['DateX']-86400));
$DataForSerie8[] = array("Value"=>$data['SunSetAstro']-$data['DateX'], "TimeStamp"=>$data['DateX'], "ValueHuman"=>date("d.m.Y H:i:s",$data['SunSetAstro']-$data['DateX']-3600), "TimeStampHuman"=>date("d.m.Y H:i:s",$data['DateX']-86400));
}
$i++;
//print_r($DataForSerie4[0]);
//print_r($DataForSerie21);
$serie['name'] = "AbendDämmerung Astro";
$serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
$serie['type'] = "areaspline";
$serie['color']= '#242323';
$serie['yAxis'] = 0;
// $serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#242323';
$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;
$serie['Data'] = $DataForSerie8; //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'] = "areaspline";
$serie['color']= '#34346F';
$serie['yAxis'] = 0;
// $serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#34346F';
$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;
$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 Civil";
$serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
$serie['type'] = "areaspline";
$serie['color']= '#235181';
$serie['yAxis'] = 0;
// $serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#235181'; //235181
$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;
$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'] = "Sonnenuntergang";
$serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
$serie['type'] = "areaspline";
$serie['color']= '#ECFF13';
$serie['yAxis'] = 0;
// $serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#ECFF13';
$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;
$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'] = "Sonnenaufgang";
$serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = true;
// $serie['RoundValue'] = 0;
$serie['type'] = "areaspline"; //"areaspline"; //
$serie['color']= '#235181';
$serie['yAxis'] = 0;
// $serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#ECFF13';
$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'] = 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 = array();
//$serie = array("Id"=>0, "Data"=>$DataForSerie, "Name" =>"Manueller Werte 1", "Unit"=>"°C", "ReplaceValues"=>false);
$serie['name'] = "MorgenDämmerung Civil";
$serie['unit'] = "Uhr";
// $serie['ReplaceValues'] = false;
// $serie['RoundValue'] = 0;
$serie['type'] = "areaspline";
$serie['color']= '#34346F';
$serie['yAxis'] = 0;
// $serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#34346F';
$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;
$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'] = "areaspline";
$serie['color']= '#242323';
$serie['yAxis'] = 0;
// $serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#242323';
$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;
$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'] = "areaspline";
$serie['color']= '#1C1C19';
$serie['yAxis'] = 0;
// $serie['shadow'] = true;
$serie['lineWidth'] = 2;
$serie['lineColor'] = '#1C1C19';
$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;
$serie['Data'] = $DataForSerie4; //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;
//***************************************************************************
// 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']['categories'] = 'Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec';
// $CfgDaten['xAxis']['lineColor'] = '#FF0000';
$CfgDaten['xAxis']['plotBands'][] = array("from"=> "@Date.UTC(2012, 1, 1)@","to"=> "@Date.UTC(2012, 12, 31)@");
// $CfgDaten['xAxis']['showFirstLabel'] = 'false';
// $CfgDaten['xAxis']['startOnTick'] = 'true';
// $CfgDaten['xAxis']['type'] = 'datetime';
// $CfgDaten['xAxis']['tickInterval'] = '24 * 3600 * 1000'; // 1 Tag = 24 * 3600 * 1000
// **************************************************************************************
// *** yAxis *** http://www.highcharts.com/ref/#yAxis
// **************************************************************************************
// $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'] = "";
// $CfgDaten['yAxis'][0]['Unit'] = "Uhr";
$CfgDaten['yAxis'][0]['reversed']= true;
$CfgDaten['yAxis'][0]['labels']['formatter'] = "@function() {return Highcharts.dateFormat('%H:%M', (this.value+3600)*1000) + ' Uhr'}@";
// $CfgDaten['yAxis'][0]['opposite'] = false;
// $CfgDaten['yAxis'][0]['dateTimeLabelFormats'] = '%H:%M';
// $CfgDaten['yAxis'][0]['tickInterval'] = 0;
// $CfgDaten['yAxis'][0]['tickWidth'] = 0;
// $CfgDaten['yAxis'][0]['tickColor'] = '#1C1C19'; //#1C1C19 = PlotBackgroundColor
// $CfgDaten['yAxis'][0]['min'] = 1325402185;
// $CfgDaten['yAxis'][0]['max'] = 1356938185;
// **************************************************************************************
// *** tooltip *** http://www.highcharts.com/ref/#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']."',
}[point.series.name];
s += '<br>' + this.series.name + ': ' + '<b><span style=color:' + this.series.color + '>'
+ Highcharts.dateFormat('%H:%M', (this.y+3600)*1000) + unit + '</b></span>'
});
return s;
}@";
// -------------------------------------------------------------------------------------------------------------------------------------
// 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
}
}
?>
Danke für Eure Antworten/Nachfragen,
Wolfgang,
lies dir den Projektthread zu dem Thema in Ruhe durch. Wir haben uns hier Mühe gegeben, an Hand plastischer Beispiele und Erläuterungen das Prinzip der HC’s transparent zu machen. Wenn man das Wissen mit in die API-Doku nimmt und dort sucht und ausprobiert, wird man zu fast jedem Deiner Punkte sehr schnell Antworten finden… .
Auch in diesem Thread hier wurden schon einige dieser Fragen beantwortet.
Was m.E. definitiv nicht im Thread steht wäre z.B. die Tooltip-Formatierung als HTML-Tabelle (an dieser Stelle Danke an Werner für die Idee):
$CfgDaten['tooltip']['formatter'] = "@function() {
var s = '<b>' + Highcharts.dateFormat('%B', this.x) +'</b>';
s += '<table cellspacing=\"0\" cellpadding=\"0\">';
$.each(this.points, function(i, point) {
[this.series.name];
if ((point.series.name == 'OG') || (point.series.name == 'MG') || (point.series.name == 'UG') || (point.series.name == 'Sonstiges'))
{
s += '<td style=\"width: 10px;\"></td><td>' + '<span style=color:' + point.series.color + '>' + point.series.name +': </span></td><td align=right>' + point.y.toFixed(1) + ' kWh</td>';
s += '</tr>';
}
else
{
s += '<td colspan= 2>' + '<b><span style=color:' + point.series.color + '>' + point.series.name +': </span></b></td><td align=right><b>' + point.y.toFixed(1) + ' kWh</b></td>';
s += '</tr>';
}
});
s += '</table>';
return s;
}
@";
ich denke, es macht keinen Sinn, das Meiste davon nochmal und nochmal hier durchzukauen
So … ich bin nun so weit, dass ich Graphen anzeigen lassen kann.
Ich denke, ich werde erstmal ein paar Tage / Wochen / Monate brauchen, bis ich die kompletten Möglichkeiten der HighCharts verstanden habe und entsprechend nach meinen Wünschen umsetzen kann.
Jetzt muss ich es nur noch irgendwie hinkriegen, die Werte für die Graphen auf eine Größe zu bringen, die 1000 nicht überschreitet. Bei täglichen Darstellungen klappt das - wie ich das mit wöchentlichen oder monatlichen mache, weiß ich noch nicht. Aber da findet sich eine Möglichkeit. Oder hat da jemand zufällig was fertiges?
Danke an alle, die mir geholfen haben - insbesondere an Raketenschnecke.
Gruß,
Christoph
Hi Christoph,
danke für die Erfolgs-Rückmeldung.
Mir ging es aber auch nicht anders (und ich finde immer noch was Neues): HC ist ähnlich komplex wie IPS, da dauert es ein wenig. Aber die haben eine sehr gute Doku nebst Spielwiese, was den Lernprozess erheblich beschleunigt.
Zur Datenmenge:
aus der IPS-DB wäre das kein Problem via AC_Get… Von MySQL hab ich keine Ahnung und weiss daher nicht, ob und welche Möglichkeiten der Verdichtung sich dort bieten.
Im Zweifel wirst Du nicht umhinkommen, die Arrays in IPS via PHP zu verdichten.