ich habe mit dem IE9 die besten ergebnisse … speziell die JavaScript Perfomance ist genial
HAUPTSACHE dass es jetzt funzt
Hallo Gemeinde,
nach einigen - für mich als PHP- Anfänger - Skript einlesen hier und Config anpassen da, einer Menge Forum- Sucherei und einiger grauer Haare mehr… juhuuu es läuft super und sieht toll aus. Das erste Multigraph- Tool das ich zum laufen bekommen habe.
Nun stehe ich leider vor dem nächsten Problem. Ich würde gerne einen zweiten, dritten… Graphen anlegen. Nur leider steht an keiner Stelle wie. Sicherlich ist das für die meisten PHP- Jünger eine Kleinigkeit, nur leider bin ich (noch) keiner. Könntet ihr bitte (wenn möglich Schritt für Schritt) erklären, wie ich mehrere Graphen erzeugen kann. Ich habe schon versucht die Config zu kopieren und zu ändern… gab einen Memory- overflow…
Des Weiteren habt ihr von einer dynamischen Anpassung der X- Achse (Zeit) geschrieben. Ich kann aber leider nichts dazu finden. Ich bekomme es ja nicht einmal hin die x-Achse von Uhrzeit auf Datum umzustellen.
Vielen Dank für die Mühe und die Geduld
Allen ein schönes WE!
Lieschen
Hallo Lieschen,
kopiere das Konfig-Skript und leg eine 2. HTML-Box an. Dann Konfig Skript nach Wunsch anpassen, nicht vergessen auf die 2. HTMLbox zu verweisen.
Grüsse,
Axel
Hallo Axel,
vielen Dank für die schnelle Antwort.
Konntest du mir kurz die Zeile im Skript sagen, in der ich den Verweis auf die HTML- Box finde. Habe mich schon Tod gesucht.
Besten Dank
Lieschen
Hi Lieschen,
ich glaube dir fehlt noch ein wenig Grundverständnis;) Macht aber nix, das bekommen wir hin:
das Script „Highcharts“ erstellt den Graphen (entweder als File oder als Content für eine String-Variable). Dazu braucht es eine Menge Parameter. Diese Parameter werden im Script „Konfig“ angegeben. Wobei das Konfig-Script nur Parameter für einen Graphen enthalten kann. Ebenso kann die String-Variable nur Daten für einen Graphen enthalten. Man legt also pro gewünschtem Graphen eine String-Variable(mit Profil HTML-Box) und ein dazugehöriges Konfig-Script an.
Natürlich muss man nun im Config-Script die ID für die String-Variable angeben an die das HighCharts-Script die fertigen Daten übergeben soll. Das geschieht im Konfig-Script unter „$CfgDaten[„ContentVarableId“]“.
// IPS Variablen ID´s
$CfgDaten["ArchiveHandlerId"]= 58669 /*[Archive Handler]*/; // Archive Handler
$CfgDaten["ContentVarableId"]= 31946 /*[HighCarts\extern www.raketenschnecke.net\HC rs.net Temperatur 48h]*/ ; // ID der Content-Variable
$CfgDaten["HighChartScriptId"]= 35562 /*[HighCarts\HighCharts]*/ ; // ID des Highcharts Scripts
Ich habe mal meinen Objektbaum-Ausschnitt beispielhaft angehängt: dort sind eine Reihe von Graphen (bzw. eine Kombination von Variable und dazugehörigem Konfig-Script) abgebildet. Wobei ich meine Konfig-Scripte nach dem zu erstellenden Graphen benenne.
Hallo Rakete,
vielen Dank für den Tip! Jetzt habe ich es verstanden. Und es ist ganz einfach. Das Problem ist, das ihr Profis, zu Recht beim Fachsimpeln untereinander gewisse Grundvorraussetzungen habt. Als Dummy ist es manchmal schwierig euch zu folgen.
Für alle Anfänger - wie mich - nun noch einmal ein kleines Tutorial:
Wie von khc geschrieben, macht ihr zunächst die Installationschritte wie folgt
-
Download Highcharts von highcharts.com
-
und heruntergeladenes ZIP ins Verzeichnis „webfront/user” entpacken (im IP-Symcon- Verzeichnis zu finden)
-
“IPS_Template.php” in das“webfront/user/Highcharts“ Verzeichnis kopieren (zu finden im entpackten ZIP-Verzeichnis; ihr brauch nur einmal die aktuellste Version runterladen (momentan: „HighchartsIPS_Source_V1.0004.rar“))
3.1
Im Objektbaum eine Kategorie „HighCharts“ anlegen. Hier werden die folgenden Skripte und Variablen hinein-/ angelegt.
-
„Highcharts_Vxxxx“ Scripts in IPS einspielen (ID wird in ConfigScript benötigt; auch zu finden in der „HighchartsIPS_Source_V1.0004.rar“)
-
Eine String-Variable mit dem Profil ~HTMLBox anlegen (ID wird in ConfigScript benötigt) (nennt sich hier Content-Variable)
-
Einspielen und Parametrieren des ConfigScripts
und das wie folgt:
in Zeile 10- 13 der „Config_Highcharts_V1.0004.ips“
// IPS Variablen ID´s
$CfgDaten["ArchiveHandlerId"]= 19598 /*[Archive Handler]*/; // Archive Handler
$CfgDaten["ContentVarableId"]= 58171 /*[HighCharts\Multigraph_Temperaturen_Heizung_Solar]*/; // ID der Content-Variable
$CfgDaten["HighChartScriptId"]= 48550 /*[HighCharts\Highcharts_V1.0004.ips]*/; // ID des Highcharts Scripts
- den Archive Handler findet ihr im Objektbaum ganz unten unter „Kern- Instanzen“
- die Content- Variable ist die String- Variable die ihr als HTML- Box angelegt habt
- die Highcharts Scripts- ID ist die ID des Skriptes „Highcharts_V1.0004.ips“
In Zeile 7
$CfgDaten["Title"]= "Aussen-/ Solar-/ Heizungstemperatur";
könnt Ihr eurem Graphen eine Überschrift geben
In Zeile 53- 71
// => ab V1.0004, sind auch Pie-Charts möglich. Hierbei wird je Pie eine Serie definiert (Wichtig hierbei -> ID´s, Namen, Units als Array definieren)
$CfgDaten["Series"][] = array( "Value"=>array(12,256,24.5,122), "Name" =>array("Wert1","Wert2", "Wert3", "Wert4"), "Unit"=>array("A","A","A","A"), "ReplaceValues"=>false,
"Param" =>"type:'pie', center: [100, 80], size: 200, showInLegend: true, shadow: true,lineWidth: 1 , dataLabels: {enabled: false}");
$CfgDaten["Series"][] = array("Id"=>array(23960 /*[Objekt #23960 existiert nicht]*/,13641,10674 /*[Objekt #10674 existiert nicht]*/), "Name" =>array("Aussentemperatur2","Luftfeuchte", "IST"), "Unit"=>array("°C","%","°F"), "ReplaceValues"=>false,
"Param" =>"type:'pie', center: [300, 180], size: 100, showInLegend: true, shadow: true,lineWidth: 1 , dataLabels: {enabled: false}");
$CfgDaten["Series"][] = array("Id"=>23960, "Name" =>"Aussentemperatur", "Unit"=>"°C oder °F", "ReplaceValues"=>false,
"Param" =>"type:'spline', step:false, yAxis: 0, shadow: true,lineWidth: 1 , states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
$CfgDaten["Series"][] = array("Id"=>10674, "Name" =>"IST-Temperatur","Unit"=>NULL, "ReplaceValues"=>false,
"Param" =>"type:'spline', step:false, yAxis: 0, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
$CfgDaten["Series"][] = array("Id"=>23264, "Name" =>"SOLL-Temperatur", "Unit"=>"°C","ReplaceValues"=>false,
"Param" =>"type:'line', step:true, yAxis: 0, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
$CfgDaten["Series"][] = array("Id"=>13641, "Name" =>"Luftfeuchte","Unit"=>"%", "ReplaceValues"=>false,
"Param" =>"type:'spline', step:false, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
$CfgDaten["Series"][] = array("Id"=>29410, "Name" =>"Tür/Fenster Kontakt","Unit"=>NULL, "ReplaceValues"=>array(0=>0.2,1=>10),
"Param" =>"type:'area', step: true, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, symbol: 'circle', radius: 4, lineWidth: 1}}}");
$CfgDaten["Series"][] = array("Id"=>44451, "Name" =>"Drehgriffkontakt", "Unit"=>array(0=>'geschlossen',1=>'gekippt',2=>'geöffnet'), "ReplaceValues"=>array(0=>0.2,1=>7,2=>10),
"Param" =>"type:'area', step:true, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
$CfgDaten["Series"][] = array("Id"=>43639, "Name" =>"Heizungssteller", "Unit"=>"%","ReplaceValues"=>false,
"Param" =>"type:'line', step:true, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
macht ihr erst mal vor jede Zeile ein //. In diesen Zeilen Konfiguriert ihr euch die Variablen, die angezeigt werden sollen und wie sie angezeigt werden sollen (pie, spline, line etc.)
Ich habe ganz einfach mit einer Variable begonnen.
$CfgDaten["Series"][] = array("Id"=>48913, "Name" =>"Solar/ Vorlauf","Unit"=>"°C", "ReplaceValues"=>false,
"Param" =>"type:'spline', step:false, yAxis: 0, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
Also // vor den beiden Zeilen entfernen, Id für die darzustellende Valiable eintragen (die muss aber geloggt sein!), Namen geben, Unit eingeben (°C, Watt, % etc)
Die anderen Werte erkennt ihr später durch ausprobieren. Aber fangt erstmal einfach an.
Wenn Ihr dann einmal erfolgreich mit einer Variablen durch seit, nehmt einfach in den nächsten zwei Zeilen wieder die // heraus und passt es für die nächste geloggte Variable an. Ab zwei ist es ja dann auch MultiGraph 
Macht aber erstmal zum ausprobieren nur mit einer weiter.
In Zeile 95- 96
$CfgDaten["yAxis"][] = array("Name" =>"Temperaturen", "Unit"=>"°C","Opposite"=>false,"TickInterval"=>5);
$CfgDaten["yAxis"][] = array("Name" =>"Heizungssteller / Luftfeuchte", "Unit"=>"%","Min"=>0, "Max"=>100,"TickInterval"=>25,"Opposite"=>true);
könnt ihr die Beschriftung noch tunen, macht das aber später, wenn es erstmal läuft.
jetzt erstmal weiter mit
- Starten des ConfigScripts
So euer Computer will, gibt es jetzt erstmal keine Fehlermeldung.
Dann wie folgt weiter:
Alle Objekte in eurem angelegten Ordner - bis auf die neue Content- Variable (HTML-Box) sollten versteckt sein. Rechte Maustaste auf Skript, Objekt bearbeiten und dann einen Haken bei versteckt setzen. Aber wie gesagt nicht die Content Variable!
Juhuuu fast geschafft!
Jetzt nur noch im Webfront eine neue Kategorie mit dem HighCharts- Ordner, bzw. wo immer ihr die Content- Variable einbinden wollt.
… nun solltet Ihr leuchtende Augen haben…
Läuft bei mir auf Windoof, Mac und iPad tadellos.
Für alle denen ein MultiGraph nicht reicht, einfach die „Config_Highcharts_V1.0004.ips“ kopieren und umbenennen, eine zweite ContentVariable (das HTMLBox- Dingsda) mit anderem Namen anlegen und in den Zeilen 10- 13 die neuen Variablen eintragen (Danke Rakete).
Ich habe mir das auch in einem zweiten Ordner im Objektbaum angelegt, da er sonst beide Graphen auf einer Seite anzeigt.
Wenn es erst einmal läuft, kann man sich alles Weitere ausprobieren (verschiedene Graphen- Arten, etc.). Habe ich auch nur durch ausprobieren gemacht. Eine Zahl ändern, oder true auf false setzen und sehen was im Webfront passiert. Wenn es nicht mehr funktioniert, dann Wert einfach wieder zurücksetzen und einen anderen ändern.
Die meisten „Versuchsänderungen“ bezüglich des Aussehens des Graphen könnt ihr in den Zeilen mit den „Variablen- ID’s“ machen
$CfgDaten["Series"][] = array("Id"=>48913, "Name" =>"Solar/ Vorlauf","Unit"=>"°C", "ReplaceValues"=>false,
"Param" =>"type:'spline', step:false, yAxis: 0, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
Ich hoffe es hilft einigen, die wie ich immer wollen, aber nicht können weil das Basiswissen fehlt. Danke an alle die mich hierhin begleitet haben (Rakete, Axel, khc).
Wenn ein Fehler im System auftaucht, sagt mir Bescheid, damit ich das hier im Text noch ändern kann.
Liebe Grüße
Lieschen
Hier fehlt ein URL-Encode. Ansonsten sieht der Aufruf so aus:
http://xxx.xxx.xxx.xxx/User/Highcharts/IPS_Template.php?CfgFile=C:IP-SymconwebfrontuserHighchartsHighChartsCfg26272.tmp
function WriteContentWithFilename($CfgDaten, $tmpFilename)
{
// damit das Ding auch sauber dargestellt wird
$Height = $CfgDaten["HighChart"]["Height"] + 16;
$tmpFilename=urlencode($tmpFilename); //ANsonsten scheiter die Parameterübergabe!
if ($tmpFilename != "")
SetValue($CfgDaten["ContentVarableId"], '<iframe src="./User/Highcharts/IPS_Template.php?CfgFile='. $tmpFilename.'" width="100%" height="'. $Height .'" frameborder="0" scrolling="no"></iframe>');
else
SetValue($CfgDaten["ContentVarableId"], 'Falsche Parameter beim Funktionsaufruf "WriteContentTextbox"');
}
Mein Config Script sieht folgendermaßen aus:
<?php
// => ab V1.0004, damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden
Global $CfgDaten; //$CfgDaten = array();
// ‹berschriften
$CfgDaten["Title"]= "Wohnzimmer";
$CfgDaten["SubTitle"]= ""; // "" = Automatisch ¸ber Zeitraum
// IPS Variablen ID¥s
$CfgDaten["ArchiveHandlerId"]= 11938; // Archive Handler
$CfgDaten["ContentVarableId"]= 25034; // ID der Content-Variable
$CfgDaten["HighChartScriptId"]= 35705; // ID des Highcharts Scripts
// Zeitraum welcher dargestellt werden soll
$CfgDaten["StartTime"] = mktime(0,0,0, date("m", time()), date("d",time())-6, 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
// => ab V1.0003
$CfgDaten["RunMode"]= "files"; //oder script
// => ab V1.0003
// Serien¸bergreifende Einstellung f¸r das Laden von Werten
$CfgDaten["AggregatedValues"]["HourValues"] = 3; // ist der Zeitraum grˆfler als X Tage werden Stundenwerte geladen
$CfgDaten["AggregatedValues"]["DayValues"] = 14; // ist der Zeitraum grˆfler als X Tage werden Tageswerte geladen
$CfgDaten["AggregatedValues"]["NoLoggedValues"] = 60; // ist der Zeitraum grˆfler als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen
$CfgDaten["AggregatedValues"]["MixedMode"] = false; // alle Zeitraumbedingungen werden kombiniert
// Die Parameter f¸r die einzelnen Chart Serien (Achtung! unbedingt auf Grofl-Kleinschreibung achten)
// Name: Name der Kurve (Anzeige in Legende und Tooltip)
// Unit: NULL = Einheit wird aus Suffix des eingestellten Profils ¸bernommen
// "string" = string wird als Einheit eingetragen
// array(0=>'String f¸r 0',1=>'String f¸r 1', usw.) = Ist der Wert 0 wird 'Strung f¸r 0' im Tooltip angezeigt, usw
// ReplaceValues: false = Werte werden wie geloggt ¸bernommen
// array(0=>0.2,1=>10, usw.) = 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) Sinn
// Param: Einstellungen der Kurve (hier kˆnnen werden exakt Einstellungen aus Higcharts.com eingegeben) hier ein paar Beispiele
// type: Art der Kurve: Sinn machen [area, areaspline, line, spline, pie], noch nicht sinnvoll dargestellt werden [scatter, bar, column]
// step: true oder false - jeder Werte bildet eine Stufe (sinnvoll f¸r Heizungsteller, oder Sollwertvorgaben)
// yAxis: Nummer welche Y-Achse verwendet werden soll (ab 0)
// shadow: true oder false - Darstellung mit oder ohne Schatten
// lineWidth: Linienst‰rke
// alles weitere bitte aus der Higcharts-Referenz entnehmen -> http://www.highcharts.com/ref/
// und so kˆnnte f¸r eine Achse seperate Einstellungen f¸r die AggregattedValues getroffen werden
//$AggregatedValuesForSeries["HourValues"] = 3;
//$AggregatedValuesForSeries["DayValues"] = 2;
//$AggregatedValuesForSeries["DayValues"] = 2;
//$AggregatedValuesForSeries["Combined"] = true;
//,"AggregatedValues"=>$AggregatedValuesForSeries
// => ab V1.0004, sind auch Pie-Charts mˆglich. Hierbei wird je Pie eine Serie definiert (Wichtig hierbei -> ID¥s, Namen, Units als Array definieren)
//$CfgDaten["Series"][] = array( "Value"=>array(12,256,24.5,122), "Name" =>array("Wert1","Wert2", "Wert3", "Wert4"), "Unit"=>array("A","A","A","A"), "ReplaceValues"=>false,
// "Param" =>"type:'pie', center: [100, 80], size: 200, showInLegend: true, shadow: true,lineWidth: 1 , dataLabels: {enabled: false}");
//$CfgDaten["Series"][] = array("Id"=>array(23960,52112,31346), "Name" =>array("Aussentemperatur2","Luftfeuchte", "IST"), "Unit"=>array("∞C","%","∞F"), "ReplaceValues"=>false,
// "Param" =>"type:'pie', center: [300, 180], size: 100, showInLegend: true, shadow: true,lineWidth: 1 , dataLabels: {enabled: false}");
$CfgDaten["Series"][] = array("Id"=>31346, "Name" =>"Austritt Geno", "Unit"=>"∞C oder ∞F", "ReplaceValues"=>false,
"Param" =>"type:'spline', step:false, yAxis: 0, shadow: true,lineWidth: 1 , states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
//$CfgDaten["Series"][] = array("Id"=>52112, "Name" =>"IST-Temperatur","Unit"=>NULL, "ReplaceValues"=>false,
// "Param" =>"type:'spline', step:false, yAxis: 0, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
//$CfgDaten["Series"][] = array("Id"=>31346, "Name" =>"SOLL-Temperatur", "Unit"=>"∞C","ReplaceValues"=>false,
// "Param" =>"type:'line', step:true, yAxis: 0, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
//$CfgDaten["Series"][] = array("Id"=>13641, "Name" =>"Luftfeuchte","Unit"=>"%", "ReplaceValues"=>false,
// "Param" =>"type:'spline', step:false, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
//$CfgDaten["Series"][] = array("Id"=>11754, "Name" =>"T¸r/Fenster Kontakt","Unit"=>NULL, "ReplaceValues"=>array(0=>0.2,1=>10),
// "Param" =>"type:'area', step: true, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, symbol: 'circle', radius: 4, lineWidth: 1}}}");
//$CfgDaten["Series"][] = array("Id"=>44451, "Name" =>"Drehgriffkontakt", "Unit"=>array(0=>'geschlossen',1=>'gekippt',2=>'geˆffnet'), "ReplaceValues"=>array(0=>0.2,1=>7,2=>10),
// "Param" =>"type:'area', step:true, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
//$CfgDaten["Series"][] = array("Id"=>43639, "Name" =>"Heizungssteller", "Unit"=>"%","ReplaceValues"=>false,
// "Param" =>"type:'line', step:true, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
/*
//oder
foreach(IPS_GetInstanceListByModuleID("{EE4A81C6-5C90-4DB7-AD2F-F6BBD521412E}") as $InstanceId)
{
if(IPS_StatusVariableExists($InstanceId, "TEMPERATURE"))
{
$var = IPS_GetStatusVariable($InstanceId, "TEMPERATURE");
// Float Variable (.... ist schon etwas wage sich auf den VariablenTyp zu verlassen)
if($var['VariableType'] == 2 )
{
//$V = GetVariableArray($InstanceId, "TEMPERATURE");
$Name = str_replace("Funk Devices\\", "", IPS_GetLocation($var["VariableID"]));
$Name = str_replace("\\", "/", $Name );
$CfgDaten["Series"][] = array("Id"=>$var["VariableID"], "Name" =>$Name, "Unit"=>"∞C", "ReplaceValues"=>false,
"Param" =>"type:'spline', step:false, yAxis: 0, shadow: true,lineWidth: 1 , states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
}
}
}
*/
// Y-Achsen
$CfgDaten["yAxis"][] = array("Name" =>"Temperaturen", "Unit"=>"∞C","Opposite"=>false,"TickInterval"=>5);
$CfgDaten["yAxis"][] = array("Name" =>"Heizungssteller / Luftfeuchte", "Unit"=>"%","Min"=>0, "Max"=>100,"TickInterval"=>25,"Opposite"=>true);
//oder direkt den String f¸r die Achsen ¸bergeben $CfgDaten["yAxis"][] = "title: { text: 'Heizungssteller / Luftfeuchte' }, min:0";
// X-Achse ist autom. Time-Format
// => ab V1.0002
// HighchartConfig String
$CfgDaten["HighChartCfg"]= false; // false = default String wird verwendet
// Beispiel f¸r ein von extern ¸bergebener CfgString. Dies entspricht exakt dem Highcrats ConfigString aus der Highcharts.com/ref
// zus‰tzlich kˆnnen bzw. teilweise m¸ssen folgenden Platzhalter verwendet werden.
// %title.text% = $CfgDaten["Title"]
// %subtitle.text% = CfgDaten["SubTitle"], oder bei "" der automatisch erzeugte Zeitraum
// %yAxis% = die genierten y-Achsen welche durch $CfgDaten["yAxis"] konfiguriert wurden
// %tooltip% = der generiert Tooltip
// %xAxis.min% und %xAxis.may% = der durch $CfgDaten["StartTime"] und $CfgDaten["EndTime"] festgelegte Zeitraum
// %data% = die aus der Datenbank gelesenen Daten, ohne diesen Platzhalter l‰uft gar nichts
/* $CfgDaten["HighChartCfg"]="
chart: {
renderTo: 'container'
},
title: {
text: '%title.text%',
x: -20
},
subtitle: {
text: '%subtitle.text%',
x: -20
},
xAxis: [{
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
}
}],
yAxis: [ %yAxis% ],
tooltip: { %tooltip% },
series: [ %data% ]
});";
*/
// Alle $CfgDaten["HighChart"] Parameter werden an das IP_Template ¸bergeben
// Highcharts-Themes
// $CfgDaten["HighChart"]["Theme"]="gray.js"; // von Highcharts mitgeliefert: dark-green.js, dark-blue.js, gray.js, grid.js
$CfgDaten["HighChart"]["Theme"]="ips.js"; // von Highcharts mitgeliefert: dark-green.js, dark-blue.js, gray.js, grid.js
// 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']);
// => ab V1.0003
// hier werden die CfgDaten gepr¸ft und bei Bedarf vervollst‰ndigt
$CfgDaten = CheckCfgDaten($CfgDaten);
// => ab V1.0003
if (isset($CfgDaten["RunMode"]) && $CfgDaten["RunMode"] == "script")
{
// Variante1: ‹bergabe der ScriptId. Daten werden beim Aufruf der PHP Seite erzeugt und direakt ¸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 Anzigen 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
}
}
?>
dabei erhalte ich dann folgende Fehlermeldung:
Warning: fopen(C:\IP-Symcon\webfront\user\Highcharts\HighChartsCfg25654.tmp) [function.fopen]: failed to open stream: No such file or directory in C:\IP-Symcon\Scripts\Highcharts_V1.0004.ips.php on line 103
Warning: fwrite() expects parameter 1 to be resource, boolean given in C:\IP-Symcon\Scripts\Highcharts_V1.0004.ips.php on line 104
Warning: fclose() expects parameter 1 to be resource, boolean given in C:\IP-Symcon\Scripts\Highcharts_V1.0004.ips.php on line 105
wer kann mir bei diesem Problem helfen?
Gruß Tom
Wie geil sehen die denn aus! Da kann der Google Gauge aber einpacken…
Ja, kann der. Ist dynamisch, die Werte werden alle x sekunden per Ajax nachgeladen (nur die Nadel und die Werte). Und ist kein Flash, funzt auf dem iPad, iPhone etc.pp.
Denke mal morgen gibt es dazu nen Thread
ich wusste doch das ich mit KHC und Highcharts auf das richtige Pferd gesetzt habe. Bin mit Google-Charts nicht richtig warm geworden - schon allein deswegen weil interne Daten in die Wolke geblasen werden…
Die Wolke darf meine Temperaturwerte ruhig aufsaugen wenn’s am nächsten Tag kein Regen gibt. Was mich stört sind periodisches generieren und fehlende Interaktivität.
Das ist doch schon der Grund-Inhalt für einen Wiki-Artikel. Ich denke, dass Script hat eine gute Erklärung an einer Stelle (und nicht den bisherigen 18 Seiten dieses Threads) verdient.
Wenn jeder der das Script installiert hat ein wenig mitschreibt, wird es bestimmt ein Super Artikel.
Ich habe den Artikel schon mal angelegt (auch ohne das ich das Script bei mir installiert habe 
http://www.ip-symcon.de/wiki/Highcharts_(Multigraph)
Jetzt seid ihr dran!
Gruß,
Ernie
Hi ernie,
gute Idee, ich finde das Lieschen sich ne Menge Mühe gemacht hat, warum kopierste das nicht gleich mit rein? Falls da noch Macken drin sind wird’s der nächste Newbie finden und entsprechende Fragen stellen. Dann kann die Anleitung entsprechend aktualisiert werden…
Okay,
ich habe den Text übernommen. Aber es sieht echt häßlich aus. Für Schönheit habe ich momentan leider keine Zeit 
Wenn sich einer erbarmt, es leserlich zu machen und etwas in Kapitel aufzuteilen, in Ernies Heizungsscript könnt ihr euch viele kleine Tricks holen, wie man im Wiki Dinge umsetzen kann.
Der Link zum Wiki sollte auch noch in den ersten Post übernommen werden …
Gruß,
ernie
Hallo zusammen,
ich freue mich, dass ihr mein kleines Tutorial so übernommen habt.
Könntet ihr vielleicht noch eine Kleinigkeit ergänzen.
Es ist ggf. noch interessant, welche Variablen- Typen man verwenden kann (Float…) und ob es dafür dann noch Einschränkungen gibt.
Sysrun, die Anzeigen sehen super aus, wenn du dazu etwas einstellst, könntest du es etwas genauer erklären, wie man die verwendet?
Vielen Dank und liebe Grüße
Lieschen
Wenn Du den Artikel im Wiki meinst: WIKI heißt jeder soll mitmachen.
Ruf den Artikel auf, klick auf bearbeiten und mach den Artikel besser
Gruß,
ernie
Hallo,
ich habe mich auch wenig mit Highchart befasst und würde gerne verschiedene Serien in einem Multigraph darstellen.
Es sind Stromverbrauchswerte von bestimmten Uhrzeiten.
Zum einen können die Zeiten unterschiedliche Abstände haben, was ich gerne im Graph durch längere und kürzere Abstände visualisiert haben möchte.
Zum anderen können zwei Serien unterschiedliche Messpunkte haben. Serie 1 zum Beispiel Messpunkte um 1 Uhr und 3 Uhr, Serie 2 Messpunkte um 2 und 3:15 Uhr.
Wisst ihr, wie ich das in Highchart abbilden kann?
Muss ich dafür NULL-Werte aufffüllen? Oder kann Highchart ein Darstellung Key-Value. Also nicht alle Werte in statischer Reihenfolge sondern mit X und Y Wert?
ich habe selbst noch mal gesucht:
Gefunden in der Highcharts - Options Reference von Highchart „Array of Datetime X and Y“
bin jetzt schon eine ganze Weile am probieren, aber ich bekomme einfach keine Linie angezeigt. Ich kann bei der Variable einstellen, was ich will, habe immer nur die Anzeige ohne Linie.
$CfgDaten["Series"][] = array("Id"=>31780, "Name" =>"Aussentemperatur", "Unit"=>"°C", "ReplaceValues"=>false,
"Param" =>"type:'line', step:true, yAxis: 0, shadow: true,lineWidth: 1 , states: {hover:{lineWidth: 2}}, marker: { enabled: true, states: { hover: { enabled: false, radius: 4}}}");
Wenn ich mit der Maus doppelklicke, kommt folgendes „Popup“
