Hallo Raketenschnecke,
das ist das was ich gesucht habe.
Danke!
Mic
Hallo,
Sorry, war zeitlich etwas verhindert, mal weiter an dem Thema zu basteln.
Im Grunde möchte ich den Graphen, die zugehörige Beschreibung in der Legende und die Farbe des PopUP,wenn man mit der Maus über den Graphen fährt und wenn noch vorhanden, das Tortendiagramm mit selber vorgegebene Farben darstellen und nicht die per default eingestellten nehmen ( wegen der teilweise schlechten Unterscheidbarkeit )
z.b.:
Luftfeuchte: blau
IST-Temperatur: rot
SOLL-Temperatur: gelb
Stellantrieb 1: grau
Stellantrieb 2: …
Für die Graphen, welche Server-Daten darstellen dann andere Farben für die unterschiedlichen Speicher- und Festplattenwerte, sowie IPS-Daten.
Grüsse
Thomas
dann passt das, was ich in #207 geschrieben habe. Ergänzend (geht aber evtl. über deine Frage hinaus) hätte ich hier noch was: HighChart-Tipps: zentrale Farbverwaltung | Raketenschnecke.net
Hallo RS,
hab mir deine Webseite mal angesehen, sehr gut erklärt und gefällt mir sehr.
Ich werde das denke ich auch so probieren.
Vielen dank dafür
Grüsse
Thomas
prima, freut mich, wenns hilft. Falls noch Fragen hochkommen: einfach melden 
Tag zusammen,
ich habe leider weiterhin das Problem aus #123, dass meine Graphen absolut leer bleiben. Bin umgezogen und hatte die letzten 2 Monate leider keine Zeit, das Thema anzugehen bzw. weiter zu verfolgen. Jetzt aber …
Würde mal jemand mit mir auf Fehlersuche gehen? Ich habe die Daten in einer mySQL Datenbank. Richtig schwierige Sachen will ich erstmal noch nicht machen, die kommen später. Ein einfacher Graph reicht für den Anfang.
So sieht mein Script aus:
<?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']= 46251 /*[Allgemein\Highcharts\Highcharts]*/ ; // ID der String Variable in welche die Daten geschrieben werden (-1 oder überhaupt nicht angeben wenn die Content Variable das übergordnete Element ist)
$CfgDaten['HighChartScriptId']= 14265 /*[Allgemein\Highcharts\Highcharts_V2.02]*/ ; // ID des Highcharts Scripts
// Highcharts oder Highstock (default = Highcharts
$CfgDaten['Ips']['ChartType'] = 'Highcharts';
// Zeitraum welcher dargestellt werden soll (kann durch die Zeitvorgaben in den Serien verändert werden)
$CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time())-10, date("Y",time())); // ab heute 00:00 Uhr
$CfgDaten['EndTime'] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // ab heute 23:59 Uhr, oder //$CfgDaten['EndTime'] = time(); // = bis jetzt
// damit wird die Art des Aufrufes festgelegt
$CfgDaten['RunMode'] = "script"; // file, script, popup
if ($CfgDaten['RunMode'] == "popup")
{
$CfgDaten['WebFrontConfigId'] = 26841 /*[Objekt #26841 existiert nicht]*/;
$CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
}
// Übergabe der IP-Adresse und des Ports für die Darstellung im Dashboard
// Wichtig! Wenn Darstellung in Webfront diese Variablen auskommentieren
//$CfgDaten['Ips']['Dashboard']['Ip'] = "127.0.0.1";
//$CfgDaten['Ips']['Dashboard']['Port'] = "82";
// Serienübergreifende Einstellung für das Laden von Werten
$CfgDaten['AggregatedValues']['HourValues'] = -1; // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
$CfgDaten['AggregatedValues']['DayValues'] = -1; // ist der Zeitraum größer als X Tage werden Tageswerte geladen
$CfgDaten['AggregatedValues']['WeekValues'] = -1; // ist der Zeitraum größer als X Tage werden Wochenwerte geladen
$CfgDaten['AggregatedValues']['MonthValues'] = -1; // ist der Zeitraum größer als X Tage werden Monatswerte geladen
$CfgDaten['AggregatedValues']['YearValues'] = -1; // ist der Zeitraum größer als X Tage werden Jahreswerte geladen
$CfgDaten['AggregatedValues']['NoLoggedValues'] = 1000; // ist der Zeitraum größer als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen $CfgDaten['AggregatedValues']['MixedMode'] = false; // alle Zeitraumbedingungen werden kombiniert
$CfgDaten['AggregatedValues']['MixedMode'] = false;
// Systematik funktioniert jetzt additiv. D.h. die angegebenen Werte gehen ab dem letzten Wert
//
// -5 Tage -3 Tage EndTime
// | | | |
// | |DayValue = 2 |HourValues = 3 |
// |Tageswerte |Stundenwerte |jeder geloggte Wert |
// **************************************************************************************
// *** Highcharts Options ***
// **************************************************************************************
// Ab hier werden die Bereiche des Highchart-Objektes parametriert.
// Dieser Bereich wurde (soweit möglich) identisch der Originalstruktur gehalten.
// Informationen über die Parametrierung findet man unter http://www.highcharts.com/ref/
// **************************************************************************************
// *** chart *** http://www.highcharts.com/ref/#chart
// **************************************************************************************
// $CfgDaten['chart']['zoomType'] = "'x'"; //default: $CfgDaten['chart']['zoomType'] = "'xy'";
// **************************************************************************************
// *** credits *** siehe http://www.highcharts.com/ref/#credits
// **************************************************************************************
// $CfgDaten['credits']['text'] = "used by IPS";
// $CfgDaten['credits']['href'] = "http://www.ip-symcon.de/forum/f53/highcharts-multigraph-v1-0-a-17625/#post120721";
// **************************************************************************************
// *** title *** siehe http://www.highcharts.com/ref/#title
// **************************************************************************************
// $CfgDaten['title']['text'] = "Chart-Überschrift"; // Überchrift des gesamten Charts
// -> veraltet: 'Title' -> verwende ['title']['text']
$CfgDaten['title']['text'] = "Chart-Überschrift";
// **************************************************************************************
// *** subtitle *** siehe http://www.highcharts.com/ref/#subtitle
// **************************************************************************************
// $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%" // Sub-Überschrift. Wenn nichts angegeben wird wird dieser String als Default verwendet
// -> veraltet: 'SubTitle' -> verwende ['subtitle']['text']
// $CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i" // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)
// -> veraltet: 'SubTitleDateTimeFormat' -> verwende ['subtitle']['Ips']['DateTimeFormat']
// -> entfallen: 'SubTitleFormat' -> unnötiger Paramter, wird jetzt in ['subtitle']['text'] angegeben
$CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%";
$CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i";
// **************************************************************************************
// *** tooltip *** http://www.highcharts.com/ref/#tooltip
// **************************************************************************************
// $CfgDaten['tooltip']['enabled'] = false;
// $CfgDaten['tooltip']['formatter'] = Null; // IPS erstellt selbständig einen Tooltip
// $CfgDaten['tooltip']['formatter'] = ""; // Standard - Highcharts Tooltip
// **************************************************************************************
// *** exporting *** http://www.highcharts.com/ref/#exporting
// **************************************************************************************
// $CfgDaten['exporting']['enabled'] = true;
// **************************************************************************************
// *** lang *** http://www.highcharts.com/ref/#lang
// **************************************************************************************
// $CfgDaten['lang']['resetZoom'] = "Zoom zurücksetzten";
// **************************************************************************************
// *** legend *** http://www.highcharts.com/ref/#legend
// **************************************************************************************
// $CfgDaten['legend']['backgroundColor'] = '#FCFFC5';
// **************************************************************************************
// *** xAxis *** http://www.highcharts.com/ref/#xAxis
// **************************************************************************************
// $CfgDaten['xAxis']['lineColor'] = '#FF0000';
// $CfgDaten['xAxis']['plotBands'][] = array("color"=>'#FCFFC5',"from"=> "@Date.UTC(2012, 3, 29)@","to"=> "@Date.UTC(2012, 3, 30)@");
// **************************************************************************************
// *** yAxis *** http://www.highcharts.com/ref/#yAxis
// **************************************************************************************
// $CfgDaten['yAxis'][0]['title']['text'] = "Temperaturen"; // Bezeichnung der Achse
// -> veraltet: 'Name' und 'TitleText' -> verwende ['title']['text']
// $CfgDaten['yAxis'][0]['Unit'] = "°C"; // Einheit für die Beschriftung die Skalenwerte
// $CfgDaten['yAxis'][0]['min'] = 0; // Achse beginnt bei Min (wenn nichts angegeben wird wird der Min der Achse automatisch eingestellt)
// $CfgDaten['yAxis'][0]['max'] = 40; // Achse geht bis Max (wenn nichts angegeben wird wird der Max der Achse automatisch eingestellt)
// -> veraltet: 'Min' und 'Max'
// $CfgDaten['yAxis'][0]['opposite'] = false; // Achse wird auf der rechten (true) oder linken Seite (false) des Charts angezeigt (default = false)
// -> veraltet: 'Opposite'
// $CfgDaten['yAxis'][0]['tickInterval'] = 5; // Skalenwerte alle x (TickInterval)
// -> veraltet: 'TickInterval'
// -> entfallen: 'PlotBands' -> verwende ['yAxis'][0]['plotBands'], (siehe Beispiel 'cfg - drehgriff und tf-kontakt')
// -> entfallen: 'YAxisColor' -> verwende ['yAxis'][0]['title']['style']
// -> entfallen: 'TitleStyle'-> verwende ['yAxis'][0]['title']['style']
// **************************************************************************************
// *** series *** http://www.highcharts.com/ref/#series
// **************************************************************************************
// $serie['name'] = "Temperatur; // Name der Kurve (Anzeige in Legende und Tooltip)
// -> veraltet: 'Name' -> verwende [series']['name']
// $serie['Unit'] = "°C"; // Anzeige in automatisch erzeugtem Tooltip
// wenn $serie['Unit'] = NULL; // oder Unit wird gar nicht definiert, wird versucht die Einheit aus dem Variablenprofil automatisch auszulesen
// $serie['ReplaceValues'] = false; // Werte werden wie geloggt übernommen
// $serie['ReplaceValues'] = array(0=>0.2,1=>10) // der Wert 0 wird in 0.2 geändert, der Wert 1 wird in 10 geändert
// das macht für die Darstellung von Boolean Werte Sinn, oder für Drehgriffkontakte (Werte 0,1,2)
// $serie['type'] = 'spline'; // Festlegung des Kuventypes (area, areaspline, line, spline, pie, Column)
// $serie['yAxis'] = 0; // Nummer welche Y-Achse verwendet werden soll (ab 0)
// -> veraltet: 'Param' -> verwende die Highcharts Parameter - sollte eigentlich noch so funktionieren wie in IPS-Highcharts V1.x
// $serie['AggType'] = 0 // Festlegung wie die Werte gelesen werden soll (0=Hour, 1=Day, 2=Week, 3=Month, 4=Year), hat Vorrang gegenüber den Einstellungen in AggregatedValues
// wird kein AggType definiert werden alle gelogten Werte angezeigt
// $serie['AggNameFormat'] = "d.m.Y H:i"; // (gilt nur bei den Pies, wenn eine Id verwendet wird), entspricht dem PHP-date("xxx") Format, welches das Format der Pie Namen festlegt, wenn keine Eingabe werden Default Werte genommen
// $serie['Offset'] = 24*60*60; hiermit können Kurven unterschiedlicher Zeiträume in einem Chart dargestellt. Angabe ist in Minuten
// $serie['StartTime'] = mktime(0,0,0,1,1,2012); // wird für die entsprechende Serie eine Anfangs- und/oder Endzeitpunkt festgelegt wird dieser verwendet. Ansonsten wird
// $serie['EndTime'] = mktime(0,0,0,2,1,2012); // der Zeitpunkt der Zeitpunkt aus den $CfgDaten genommen
// $serie['ScaleFactor'] = 10; // Skalierungsfaktor mit welchem der ausgelesene Werte multipliziert wird
// $serie['RoundValue'] = 1; // Anzahl der Nachkommastellen
// $serie['AggValue'] ='Min' // über AggValue kann Min/Max oder Avg vorgewählt werden (Default bei keiner Angabe ist Avg)
// ist sinnvoll wenn nicht Einzelwerte sondern Stundenwerte, Tageswerte, usw. ausgelesen werden
// $serie['data'] = array('TimeStamp'=> time(),'Value'=12) // hier kann ein Array an eigenen Datenpunkten übergeben werden. In diesem Fall werden für diese Serie keine Daten aus der Variable gelesenen.
require("54340.ips.php");
$VarID = 18849 ;
$result = mysql_query("SELECT `ID`, `VarID`, `TimeStamp`, `Value` FROM $IPS_DB_TABLE WHERE `VarID` = $VarID AND `TimeStamp` > 1345845600");
$row = mysql_fetch_array($result);
$Anzahl = mysql_affected_rows();
echo $Anzahl;
$arr = array();
$i = 0;
while ($row = mysql_fetch_array($result)){
$arr[$i][0] = $row['ID'];
$arr[$i][1] = $row['TimeStamp'];
$arr[$i][2] = $row['Value'];
$i++;
}
for ($j = 1; $j <=$Anzahl - 2 ; $j++){
$DataForSerie[] = array("TimeStamp"=>$arr[$j][1], "Value"=>$arr[$j][2]);
}
$serie = array("Id"=>0, "data"=>$DataForSerie, "Name" =>"Manueller Wert 1", "Unit"=>"°C", "ReplaceValues"=>false);
$serie['type'] = "spline";
$serie['step'] = false;
$serie['yAxis'] = 0;
$serie['shadow'] = true;
$serie['lineWidth'] = 1;
$serie['states']['hover']['lineWidth'] = 2;
$serie['marker']['enabled'] = false;
$serie['marker']['symbol'] = 'circle';
$serie['marker']['states']['hover']['enabled'] = true;
$serie['marker']['states']['hover']['symbol'] = 'circle';
$serie['marker']['states']['hover']['radius'] = 4;
$serie['marker']['states']['hover']['lineWidth'] = 1;
$serie['data'] = $DataForSerie;
$CfgDaten["Series"][] = $serie;
// 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
}
}
?>
Kann mir jemand dabei helfen?
Danke und Gruß,
Christoph
Hi Christoph,
ich habs mal ungebremst in mein Testsystem gepustet, das MySQL-Geraffel auskommentiert und eine eigene Temperatur-Var zum Test angegeben. Mit dem Ergebnis kann ich leben:
das Einzige, was ich unlogisch fand und auskommentiert habe, war das hier:
wie sieht denn die Datenstruktur(Dump?) aus, die du via „data“ („Data“ ist bei mir in den Scripts übrigens GROß geschrieben…) an die Series übergibst ?
Hallo Raketenschnecke,
ich erinnere mich, dass ich vor 2 Monaten genau an diesem Punkt war, also dass die Übergabe der Daten von der mySQL Datenbank an die HighCharts nicht funktionieren.
Ich habe ein print_r $DataForSerie eingefügt und hier das Ergebnis:
Array
(
[0] => Array
(
[TimeStamp] => 1346769634
[Value] => 36.1875
)
[1] => Array
(
[TimeStamp] => 1346769513
[Value] => 36.0625
)
[2] => Array
(
[TimeStamp] => 1346769392
[Value] => 36.1875
)
[3] => Array
(
[TimeStamp] => 1346769271
[Value] => 36.1875
)
[4] => Array
(
[TimeStamp] => 1346769151
[Value] => 36.1875
)
und so weiter ...
Der Vollständigkeit halber noch mal, wie das Array $DataForSerie zu Stande kommt:
$VarID = 18849 /*[Arbeitszimmer\Server\Temperatur_Server\Temperatur]*/ ;
$result = mysql_query("SELECT `ID`, `VarID`, `TimeStamp`, `Value` FROM $IPS_DB_TABLE WHERE `VarID` = $VarID AND `TimeStamp` > 1345845600");
$row = mysql_fetch_array($result);
$Anzahl = mysql_affected_rows();
echo $Anzahl;
$arr = array();
$i = 0;
while ($row = mysql_fetch_array($result)){
$arr[$i][0] = $row['ID'];
$arr[$i][1] = $row['TimeStamp'];
$arr[$i][2] = $row['Value'];
$i++;
}
for ($j = 1; $j <=$Anzahl - 2 ; $j++){
$DataForSerie[] = array("TimeStamp"=>$arr[$j][1], "Value"=>$arr[$j][2]);
}
print_r($DataForSerie);
Mein Problem ist also nicht das HC-Script als solches …
Gruß,
Christoph
auf die Schnelle: dreh mal die Reihenfolge des Arrays um (ich meine, die ältesten Daten müssen zu erst…ich bring das aber immer weider durcheinander)… ansonsten sieht das datenarray gut aus…
Habe nun 2 verschiedene Varianten getestet:
$result = mysql_query("SELECT `ID`, `VarID`, `TimeStamp`, `Value` FROM $IPS_DB_TABLE WHERE `VarID` = $VarID AND `TimeStamp` > 1345845600 ORDER BY ID ASC");
und
$result = mysql_query("SELECT `ID`, `VarID`, `TimeStamp`, `Value` FROM $IPS_DB_TABLE WHERE `VarID` = $VarID AND `TimeStamp` > 1345845600 ORDER BY ID DESC");
Führt leider beides nicht zum Erfolg 
übernimm mal diesen Codeblock für eine Serie in dein Script (und natürlich noch anpassen). wenn ich in deinem Script ein eigenes Array anschließe ist das Chart auch nicht zu sehen. Wenn ich in deinem Script aber den Series-Codeblock von mir nehme, funktioniert es. Warum? Keine Ahnung…
// Sonnenstand
$serie = array( "Id"=>0,
"Data"=>$Solar_maxData,
"Name" =>"max. Sonnenstand",
"Unit"=>"°",
"AggType"=>1,
"zIndex"=>20,
"AggValue"=>"Avg",
"RoundValue"=>2,
"ReplaceValues"=>false);
$serie['type'] = "spline";
$serie['step'] = false;
$serie['yAxis'] = 0;
$serie['visible'] = true;
$serie['showInLegend'] = true;
$serie['color'] = $Farb_Array['Sonnenstand'];
$serie['shadow'] = true;
$serie['lineWidth'] = 1;
$serie['states']['hover']['lineWidth'] = 1;
$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['tooltip']['valueDecimals'] = 2;
$CfgDaten["Series"][] = $serie;
Das scheitert an
"Data"=>$Solar_maxData
Hä?
Die Variable bzw. das Array $Solar_maxData gibt es bei mir nicht …
Jung, ein bischen mitarbeiten musst du schon:
übernimm mal diesen Codeblock für eine Serie in dein Script (und natürlich noch anpassen).
:rolleyes:
Man sollte Postings nicht nur halb, sondern ganz lesen … Sorry!
Also, ich habe den Code angepasst und habe bei dem SQL Statement sowohl ASC als auch DESC bei der Sortierung getestet - leider immer noch das gleiche Ergebnis.
Habe
"Data"=>$Solar_maxData
durch
"Data"=>$DataForSerie
ersetzt und meinen kompletten Block auskommentiert. Ebenfalls auskommentiert habe ich die Zeile mit
$serie['color']
.
Bin so langsam am Ende mit meinem Latein …
hm, mir fällt hier nur noch die Frage nach der aktuellen HC-Version ein…
Version 2.02 habe ich hier …
eine Idee hätte ich noch: stell mal den Output von „script“ auf „file“ um:
// damit wird die Art des Aufrufes festgelegt
$CfgDaten['RunMode'] = "file"; // file, script, popup
Es geht leider immer noch nicht. Wenn ich auf „file“ umstelle, wird eine Datei erstellt, aber nach wie vor wird nichts angezeigt.
Um irgendwelche anderen Probleme auszuschließen, habe ich den Code von khc aus #113 noch mal eingefügt, um Zufallsdaten zu erzeugen:
$lastValue = rand (0, 30);
for ($i = 0; $i <=100 ; $i++)
{
$DataForSerie[] = array("TimeStamp"=>$CfgDaten["StartTime"] + $i * 60 * 60, "Value"=>$lastValue);
$min = $lastValue -5; $max = $lastValue + 5;
$lastValue = rand ($min,$max);
}
Damit werden Daten angezeigt. Irgendwelche Java-Probleme schließe ich damit aus.
Werde mal versuchen, dem ganzen auf die Spur zu gehen …