Q&A Highcharts - Multigraph V1.0

Ich hoffe, Dich verstanden zu haben.
Grundsätzlich: Pro Grafik ein Configskript und eine Variable mit dem Profil html-Box
Aber Highcharts ist so mächtig, dass es unendliche Möglichkeiten und Varianten gibt. Das erfordert aber einiges an Einarbeitung.

Ich bin momentan im Geburtstagsvorbereitungsstress, sonst würde ich Dir mal Beispiele zeigen. Raketenschneckehat da fast schon einen Fetisch und hat bezaubernde sehr professionelle Beispiele auf seiner Seite.

Dann wünsch ich eine toole Geburtstagspartie

Solltest Du mal wieder Zeit finden, anbei ein Screenshot meines Objektbaumes.
Dort sieht man das dieses Confghighchartscript in Kategorie Stromverbrauch
funktioniert, aber in Kategorie Solaranlage mit der Fehlermeldung die ich anfangs erwähnte
abbricht.
Wenn ich aber die Variablen von der Solaranlage im Configscript der Stromkategorie
einfüge, läuft dieses Script trotzdem.
Werd heut Nachmittag nochmal probieren, was geht.

Danke

Danke für die Wünsche.

Kopier doch einfach das funktionierende Skript und ersetze damit das Fehlerhafte.
Wenn Du dann die zwei Grafen, die Du nicht benötigst, rauslöschst, hast Du schon mal einen funktionierenden im Skript.

Ich gehe bei der Fehlersuche gerne systematisch vor.

Nachtrag: Was mir auffällt.
Das Script Highchart V2.02 benötigst Du nur einmal in IPS.
Bei Dir kommt das zweimal vor.
-> Das ist z.B. ein Grund, warum wir mehr Infos (Screenshots, Scriptauszüge etc. brauchen, um antworten zu können.)

Und wieso hängt Dein Config Script unter der Variablen

Weiterhin solltest Du Dir mal anschauen, wie man WebFronts mit Dummy Instanzen, Kategorien und Links aufbaut. Das macht mehr Sinn als direkt auf die Variablen zuzugreifen

Und wieso hängt Dein Config Script unter der Variablen

Ist bei mir aber auch so realisiert und ist im Config-Script als eine Möglichkeit beschrieben. Dies sollte auf jeden Fall nicht die Fehlerursache sein. Ich tippe eher auf das zwei mal vorhandene HighChart_V2.02.

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

Ja, ich weiß. Es geht mir eher um die Systematik. Er hat es einmal so und einmal so (wenn Du Dir mal den Screenshot anschaust) und wenn man sich so einen Stil angewöhnt, dann halte ich das nicht für zielführend.

Hallo Boui und khge.

Danke Eurer Hilfe bin nun soweit das ich schon mal Kurven von den verschiedenen Kategorien
sehe.
Werde mich nun an die Feinheiten machen, und mal sehen was für fragen noch auftreten.

Ja, ich weiß. Es geht mir eher um die Systematik. Er hat es einmal so und einmal so (wenn Du Dir mal den Screenshot anschaust) und wenn man sich so einen Stil angewöhnt, dann halte ich das nicht für zielführend.

Danke Boui für den Link „Webfront mit Dummy Instanzen“ werde mich dem auch annehmen.
Es gibt viel zu tun.

Hallo,

ich experimentiere schon Seite ein paar Tagen mit Highchart, und es sieht schon recht gut aus, bis auf einen kleinen Fehler, den ich nicht beheben kann. Manchmal hört die Linie auf. Ich habe festgestellt, dass es meistens bei Variablen passiert, die sich nicht so oft ändern. Wenn sich zb. eine Variable drei Tage lang nicht ändert, dann sehe ich die nicht mehr. Kann man das irgendwie beheben??
Ich habe schon viel rumprobiert, aber leider nicht hinbekommen.

Hi,
ich habe ein Problem mit der Anzeige meines Gasverbrauches. Und zwar logge ich Minutenwerte des Gaszählers, allerdings ist der Graph in Highcharts nicht korrekt. Der Graph steigt von 0m³ (06:30Uhr) auf den Wert von 9:15Uhr langsam über die Zeit an aber es war hier kein ansteigender Verbrauch. Erst um 9:15Uhr war der erste Verbrauch. Was muß ich ändern, damit die „wahren“ Werte angezeigt werden, ohne dieses Interpolieren.


<?php
	// bei der Konfiguration unbedingt auf die Groß/Kleinschreibung achten
	// es wurde versucht folgende Namensgebeung in der Konfiguration zu verwenden
	// Parameter mit kleinen Anfangsbuchstaben = Parameter welche von Highcharts übnernommen wurden. Siehe dazu: http://www.highcharts.com/ref/
	// Parameter mit großen Anfangsbuchstaben = für das IPS-Highcharts-Script eingeführte Parameter

	Global $CfgDaten; // damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden

	// IPS Variablen ID´s
	$CfgDaten['ContentVarableId']= -1;  // ID der String Variable in welche die Daten geschrieben werden (-1 oder überhaupt nicht angeben wenn die Content Variable das übergordnete Element ist)
	$CfgDaten['HighChartScriptId']= 53004 /*[Highcharts\Highcharts Skript V2.02]*/;  				// ID des Highcharts Scripts

	// Highcharts oder Highstock (default = Highcharts
	$CfgDaten['Ips']['ChartType'] = 'Highcharts';

	// Zeitraum welcher dargestellt werden soll
	 $ZeitRaum = GetValue(49918 /*[Highcharts\Gasverbrauch (Graph)\Zeitraum]*/);
	If ($ZeitRaum == 0) {$ZeitRaum = (8/24);};
	$EndPunkt = GetValue(10940 /*[Highcharts\Gasverbrauch (Graph)\HC_EndPunkt]*/);
	$CfgDaten["EndTime"] = time() + 60 * 60 * 24 * $ZeitRaum * $EndPunkt;
	$CfgDaten["StartTime"] = $CfgDaten["EndTime"] - 60 * 60 * 24 * $ZeitRaum;

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "script"; 	// file, script oder 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";
	}

	// 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'] = "Gasverbrauch 2013";

	// **************************************************************************************
	// *** subtitle *** siehe http://www.highcharts.com/ref/#subtitle
	// **************************************************************************************
	// $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%" // Sub-Überschrift. Wenn nichts angegeben wird wird dieser String als Default verwendet
	//		-> veraltet: 'SubTitle' -> verwende ['subtitle']['text']
	// $CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i"	// z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)
	//		-> veraltet: 'SubTitleDateTimeFormat' -> verwende ['subtitle']['Ips']['DateTimeFormat']
	//    -> entfallen: 'SubTitleFormat' -> unnötiger Paramter, wird jetzt in ['subtitle']['text'] angegeben

	$CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%";
	$CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i";

	// **************************************************************************************
	// *** tooltip *** http://www.highcharts.com/ref/#tooltip
	// **************************************************************************************
	// $CfgDaten['tooltip']['enabled'] = false;
	// $CfgDaten['tooltip']['formatter'] = Null; // IPS erstellt selbständig einen Tooltip
	// $CfgDaten['tooltip']['formatter'] = ""; // Standard - Highcharts Tooltip

	// **************************************************************************************
	// *** exporting *** http://www.highcharts.com/ref/#exporting
	// **************************************************************************************
	// $CfgDaten['exporting']['enabled'] = true;

	// **************************************************************************************
	// *** lang *** http://www.highcharts.com/ref/#lang
	// **************************************************************************************
	// $CfgDaten['lang']['resetZoom'] = "Zoom zurücksetzten";

	// **************************************************************************************
	// *** legend *** http://www.highcharts.com/ref/#legend
	// **************************************************************************************
	// $CfgDaten['legend']['backgroundColor'] = '#FCFFC5';

	// **************************************************************************************
	// *** xAxis *** http://www.highcharts.com/ref/#xAxis
	// **************************************************************************************
	// $CfgDaten['xAxis']['lineColor'] = '#FF0000';
	// $CfgDaten['xAxis']['plotBands'][] = array("color"=>'#FCFFC5',"from"=> "@Date.UTC(2012, 3, 29)@","to"=> "@Date.UTC(2012, 3, 30)@");

	// **************************************************************************************
	// *** yAxis *** http://www.highcharts.com/ref/#yAxis
	// **************************************************************************************
	// $CfgDaten['yAxis'][0]['title']['text'] = "Temperaturen"; // Bezeichnung der Achse
	//		-> veraltet: 'Name' und 'TitleText' -> verwende ['title']['text']
	// $CfgDaten['yAxis'][0]['Unit'] = "°C";	// Einheit für die Beschriftung die Skalenwerte
	//	$CfgDaten['yAxis'][0]['min'] = 0; // Achse beginnt bei Min (wenn nichts angegeben wird wird der Min der Achse automatisch eingestellt)
	//	$CfgDaten['yAxis'][0]['max'] = 40; // Achse geht bis Max (wenn nichts angegeben wird wird der Max der Achse automatisch eingestellt)
	//		-> veraltet: 'Min' und 'Max'
	//	$CfgDaten['yAxis'][0]['opposite'] = false; // Achse wird auf der rechten (true) oder linken Seite (false) des Charts angezeigt (default = false)
	//		-> veraltet: 'Opposite'
	//	$CfgDaten['yAxis'][0]['tickInterval'] = 5; // Skalenwerte alle x (TickInterval)
	//		-> veraltet: 'TickInterval'
	//    -> entfallen: 'PlotBands' -> verwende ['yAxis'][0]['plotBands'],  (siehe Beispiel 'cfg - drehgriff und tf-kontakt')
	//    -> entfallen: 'YAxisColor' -> verwende ['yAxis'][0]['title']['style']
	//    -> entfallen: 'TitleStyle'-> verwende ['yAxis'][0]['title']['style']

	$CfgDaten['yAxis'][0]['title']['text'] = "Gasverbrauch 2012";
	$CfgDaten['yAxis'][0]['Unit'] = "m³";
	$CfgDaten['yAxis'][0]['opposite'] = false;
	$CfgDaten['yAxis'][0]['tickInterval'] = 0.01;
	$CfgDaten['yAxis'][0]['min'] = 0;
	#$CfgDaten['yAxis'][0]['max'] = 40;



	// **************************************************************************************
	// *** series *** http://www.highcharts.com/ref/#series
	// **************************************************************************************
	// $serie['name'] = "Temperatur; // Name der Kurve (Anzeige in Legende und Tooltip)
	//		-> veraltet: 'Name' -> verwende [series']['name']
	// $serie['Unit'] = "°C"; // Anzeige in automatisch erzeugtem Tooltip
	// 	wenn $serie['Unit'] = NULL; // oder Unit wird gar nicht definiert, wird versucht die Einheit aus dem Variablenprofil automatisch auszulesen
	// $serie['ReplaceValues'] = false; // Werte werden wie geloggt übernommen
	// 	$serie['ReplaceValues'] = array(0=>0.2,1=>10) // der Wert 0 wird in 0.2 geändert, der Wert 1 wird in 10 geändert
	//   	das macht für die Darstellung von Boolean Werte Sinn, oder für Drehgriffkontakte (Werte 0,1,2)
	// $serie['type'] = 'spline'; // Festlegung des Kuventypes (area, areaspline, line, spline, pie, Column)
	// $serie['yAxis'] = 0; // Nummer welche Y-Achse verwendet werden soll (ab 0)
	// 	-> veraltet: 'Param' -> verwende die Highcharts Parameter - sollte eigentlich noch so funktionieren wie in IPS-Highcharts V1.x
	// $serie['AggType'] = 0 // Festlegung wie die Werte gelesen werden soll (0=Hour, 1=Day, 2=Week, 3=Month, 4=Year), hat Vorrang gegenüber den Einstellungen in AggregatedValues
	//    wird kein AggType definiert werden alle gelogten Werte angezeigt
	// $serie['AggNameFormat'] = "d.m.Y H:i"; // (gilt nur bei den Pies, wenn eine Id verwendet wird), entspricht dem PHP-date("xxx") Format, welches das Format der Pie Namen festlegt, wenn keine Eingabe werden Default Werte genommen
	// $serie['Offset'] = 24*60*60; hiermit können Kurven unterschiedlicher Zeiträume in einem Chart dargestellt. Angabe ist in Minuten
	//	$serie['StartTime'] = mktime(0,0,0,1,1,2012); 	// wird für die entsprechende Serie eine Anfangs- und/oder Endzeitpunkt festgelegt wird dieser verwendet. Ansonsten wird
	// $serie['EndTime'] = mktime(0,0,0,2,1,2012);  		// der Zeitpunkt der Zeitpunkt aus den $CfgDaten genommen
	// $serie['ScaleFactor'] = 10; // Skalierungsfaktor mit welchem der ausgelesene Werte multipliziert wird
	// $serie['RoundValue'] = 1; // Anzahl der Nachkommastellen
	//	$serie['AggValue'] ='Min' // über AggValue kann Min/Max oder Avg vorgewählt werden (Default bei keiner Angabe ist Avg)
	//		ist sinnvoll wenn nicht Einzelwerte sondern Stundenwerte, Tageswerte, usw. ausgelesen werden
	// $serie['data'] = array('TimeStamp'=> time(),'Value'=12) // hier kann ein Array an eigenen Datenpunkten übergeben werden. In diesem Fall werden für diese Serie keine Daten aus der Variable gelesenen.


	$serie = array();
	$serie['name'] = "Gasverbrauch";
	$serie['Id'] = 49557 /*[Aktuelle Verbräuche\aktueller Gasverbrauch [m³]]*/;
	$serie['Unit'] = "m³";
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 2;
	$serie['type'] = "line";
	$serie['yAxis'] = 0;
	$serie['marker']['enabled'] = false;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 1;
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['states']['hover']['enabled'] = true;
	$serie['marker']['states']['hover']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['radius'] = 4;
	$serie['marker']['states']['hover']['lineWidth'] = 1;
	$CfgDaten['series'][] = $serie;





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



?>


Hallo DeejayT,

versuchs mal mit

$serie['step'] = false;

im serie array

Funzt leider nicht, hat keine Auswirkung :mad:

ich denke es sollte:

$serie[‚step‘] = true;

sein

That’s it, DANKEEEE

kann vielleicht jemand mir helfen?? (siehe s.67)

Hallo dark99,

kann vielleicht jemand mir helfen?? (siehe s.67)

Wo 67? Du meinst sicher Beitragsnummer #667. Wird im blauen Balken rechts angezeigt, auf dies Nr. sollte verwiesen werden damit mann die richtigen/gewünschten Beiträge schnell findet.

Mit was wird denn die rote Line geloggt? 1-wire, HM, …? Bei HM kenne ich das von Schaltaktoren oder Türkontakten.
Was sagt denn die zugehörige Datenvariable? Wann wurde der letzte Wert gespeichert? Ggf. liegt es an deinem Logging, dann kann auch HC nichts anzeigen.

sorry, habe erst jetzt gesehen, dass die Beiträge nummeriert sind. Ich kenn mich da noch nicht so gut aus.
Ich logge mit HM, und habe auch eben festgestellt, dass sich die Variable seit ein paar Tagen nicht geändert hat. Dann ist es klar, dass nichts angezeigt wird. Wie kann ich aber das Problem lösen? Ich habe gedacht, man könnte in Highchart es so einstellen, dass eben der Wert (so lange kein Anderer kommt) weiter angezeigt wird. Oder sollte man irgendwie die Variable öfters aktualisieren? Wenn Ja, dann einfach über ein Ereignis?

Servus

Das ist mit irgendeiner der neuen Highchart Versionen (unabsichtlich ?) reingekommen.
Hängt wohl damit zusammen das IPS nur Änderungen in die Datenbank schreibt.
Mit mehr loggen oder Variablenupdate kannst das Problem nicht beheben.

In früheren Highchart Versionen gabs da aber scheinbar einen Workaround, da hatte ich das nie gesehen. Seit ich auf die aktuellen Datenextraktionsscripte umgestellt habe passiert das hier auch.
Hab schon gesucht ob ich da was machen kann, den Teil des Codes verstehe ich nicht wirklich. Müssen wohl warten ob khc hier was findet. Die Ur-Scripte stammen ja von ihm.

gruß
bb

Hallo zusammen,
könnten wir mal wieder in den „aktuellen“ Threat Q&A Highcharts V2.0 wechseln?
Dort stehen auch aktuellere Scripts und Tipps.

Danke für Skript und gute Beschreibung. Läuft alles auf Anhieb so, wie ich es mir vorgestellt hatte.

nette Grüße
Sven

Was ist damit gemeint?!? Wie macht man das?

Nachtrag: Ich sehe gerade, dass das ab Seite 4 beschrieben wird. Es ist aber sehr schwer nachzuvollziehen.
Hier ist es einigermaßen verständlich beschrieben: http://www.ip-symcon.de/forum/threads/17625-Highcharts-Multigraph?p=209326#post209326

Dazu ergänzend:

[ul]
[li]Der Ordnername in webfront/user kann beliebig sein. „Temperatur“ ist m.E. ungünstig.[/li][li]Der Kategoriennname ist ebenfalls frei wählbar.[/li][li]In der Kategorie werden zuerst eine leere Variable (Typ: String) angelegt und zwei leere Scripte.[/li][li]Mit „skripte einspielen“ ist gemeint: Scripte in einem Editor öffnen, alles kopieren und und in die vorbereiteten Leer-Scripte einfügen.[/li][/ul]

So, ich habe es soweit alles nachvollzogen, jedoch bekomme ich im Script immer folgende Fehlermeldung und kann damit so überhaupt nichts anfangen:

Parse error:  syntax error, unexpected 'Global' (T_GLOBAL) in C:\IP-Symcon\scripts\34061.ips.php on line 9

In der Zeile 9 steht dieser Code:

	Global $CfgDaten; // damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden

Ich habe keinen blassen Schimmer wo dieser Fehler herkommt oder was das überhaupt für ein Fehler ist. Ein Syntax Error, wie behauptet, kann es ja nicht sein. Denn der Syntax scheint mir richtig zu sein. Außerdem stammt der Syntax nicht von mir sondern war im Script schon vorhanden.