Q&A Highcharts - Multigraph V1.0

Hallo,

Ich habe das selbe Probleme und auch schon wie angeraten, die Zeilen 86-88 auskommentiert, leider ohne Änderung.

Hier mal meine Config, leider bin ich in PHP noch ganz am Anfang und lerne noch gewaltig.
Kann mir jemand weiterhelfen ?

Danke im Voraus

<?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"]= 35231 /*[Objekt #55645 existiert nicht]*/; 	// Archive Handler
	// => ab V1.0005, damit kann braucht der ArciveHandler nicht mehr belegt werden
	$CfgDaten["ArchiveHandlerId"] = IPS_GetInstanceListByModuleID('{43192F0B-135B-4CE7-A0A7-1475603F3060}');
	$CfgDaten["ArchiveHandlerId"] = $CfgDaten["ArchiveHandlerId"][0];

	$CfgDaten["ContentVarableId"]= 48780 /*[Sandkasten\Highcharts\Highcvharts_V]*/;  // ID der Content-Variable
	$CfgDaten["HighChartScriptId"]= 17288 /*[Sandkasten\Highcharts\Highcharts]*/;  				// ID des Highcharts Scripts

	// Zeitraum welcher dargestellt werden soll
	$CfgDaten["StartTime"] = mktime(0,0,0, date("m", time()), date("d",time()), date("Y",time())-1); // 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"]= "script"; 	//oder script

	// => ab V1.0003
	// Serienübergreifende Einstellung für das Laden von Werten
	$CfgDaten["AggregatedValues"]["HourValues"] = 3;      // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
	$CfgDaten["AggregatedValues"]["DayValues"] = 14;       // ist der Zeitraum größer als X Tage werden Tageswerte geladen
	$CfgDaten["AggregatedValues"]["NoLoggedValues"] = 60; // 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

	// Die Parameter für die einzelnen Chart Serien (Achtung! unbedingt auf Groß-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
	// => ab V1.0005 gültig für Pies
	// AggType: [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year] .. wie der Werte gelesen werden soll
	// AggNameFormat: entspricht dem PHP-date("xxx") Format, welches das Format der Pie Namen festlegt, wenn keine Eingabe werden Default Werte genommen
	// => ab V1.0005 ebenfalls gültig für Zählervariablen
	// AggType: [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year] .. wie der Werte gelesen werden soll
		
	//$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( "Id"=>23960, "AggType"=>3,	"Unit"=>array("°C"), "ReplaceValues"=>false,
		"Param" =>"type:'pie', center: [150, 320], size: 200, showInLegend: false, shadow: true,lineWidth: 1 , dataLabels: {enabled: true}");


//	$CfgDaten["Series"][] = array( "Value"=>array(12,256,24.5,122), "Name" =>array("Wert1","Wert2", "Wert3", "Wert4"),	"Unit"=>array("A","B"), "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"=>29684, "Name" =>"Aussentemperatur",	"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}}}");
	$CfgDaten["Series"][] = array("Id"=>21499, "Name" =>"IST-Temperatur","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}}}");
	$CfgDaten["Series"][] = array("Id"=>30767, "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"=>20101, "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"=>41058, "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}}}");

	// => ab V1.0005 (Beispiel für einen Zählerwert, welcher als Column adargestellt wird
	//   $CfgDaten["Series"][] = array("Id"=>29842, "Name" =>"1",	"Unit"=>NULL, "AggType"=>0, "ReplaceValues"=>false,
	//   "Param" =>"type:'column', step:false, yAxis: 2, 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"]="grid.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
		}
	}



?>

was passiert denn, wenn du den Auswerte-Zeitraum auf max. 59 Tage einstellst?

Schau mal ob Du Probleme mit dem Archiv-Handler hast und ob die Variablen die Du loggen willst dort auftauchen.

Gruß
Bruno

Hallo Tuxtom007,

du musst ggf. noch weitere Zeilen auskommentieren oder hast du Pie-Charts zum darstellen?

Weiter oberhalb von Zeile 86 beginnend mit: => ab V1.0004, sind auch Pie-Charts möglich. Hierbei…
Kommentier mal die nächsten beiden auch noch aus.

In den nächsten Zeilen bis zu 86 nur noch drin lassen was du auch loggst.
Es gehören hier immer zwei Zeilen zusammen.

Hallo,

die werden gelogt, ich bekomme ja normale Graphen davon angezeigt

keine Änderung, egal ob 30 oder 59 Tage, die selbe Meldung

Ja, das sieht besser aus. Ich hab 62/63 noch auskommentiert, nun kommt schon mal keine Fehlermeldung mehr.

Mals schauen was das Script nun macht.

Danke erstmal dafür

Äääh… wo ist der Fehler?

Ich habe das Script angelegt, habe eine Variable HC_Zeitraum angelegt und das Profil so angepasst wie im Screenshot. Habe dann eine Variable HC_Endpunkt ohne Profil (War das richtig?)

„<“; „>“ und „Jetzt“ funktionieren, aber „Tag“, „Woche“, „Monat“ und „Jahr“ funktionieren bei mir nicht.

Hi Crackpot,

HC_Endpunkt muß Float sein, Profil ist nicht nötig.

HC_Zeitraum muß Integer sein, alle positiven Werte werden dann als Tage vor dem Endpunkt dargestellt. Bsp: 7 = Woche vor Endpunkt, 31 = Monat vor Endpunkt etc…

Also bei mir geht’s. Was sagen die beiden Variablen denn in der Konsole?

Danke & Gruß,
Axel

Hallo,

ich hab so einige Erfolgserlebniss mit Highcharts gehabt, auch danke eurer Nachhilfe :slight_smile:
Ich hab mittlerweile einige Graphen für die Heizung gebaut, einen pro Raum mit den Stellwert des Reglers , IST/SOLL-Temp und Luftfeuchte.

Dazu hab ich noch zwei Graphen gebaut für die Überwachung meines IPS-Servers und mit denen hab ich kleine Probleme:

Ich hab diverses Variablen der CPU-Load, je einen pro Core und einen für die durchschnittliche Load, dann welche für Festplattenauslastung und Gesamtspeicher.

die Graphen der einzelnen Cores und der derzeitgen Festplattenauslastung bekomme ich angezeigt, aber die durchschnittliche CPU-Load und Festplattengesamtkapazität nicht. Merkwürdigerweise wird die CPU-Kurve in einem normalen IPS-Graphen wunderbar dargestellt, warum nun in Highchart nicht mehr.
Die Legende im Graph ist da, aber die Kurve nicht.
Hat jemand eine Idee, woran das liegen könnte ?

Eine Grundsätzliches Problem, beim Firefox werden die Highcharts nicht geladen, wenn man in einen anderen wechselt - kann man das irgentwie erzwingen ?
Google Chrome macht da keine Problem, der lädt die jeweils direkt neu.

Hab jetzt auf float umgestellt, aber es passiert immer noch nichts. Jetzt wird nicht mal mehr die Variable aktualisiert.

Mein HC_Zeitraum:

<?

$ENDPUNKT = GetValue(28576 /*[Program\Highcharts\Temp\HC_Zeitraum\HC_Endpunkt]*/ );

Switch ($IPS_VALUE){
    Case -3: // Zurück
       SetValue(28576 /*[Program\Highcharts\Temp\HC_Zeitraum\HC_Endpunkt]*/  , $ENDPUNKT -1);
       Break;
    Case -2: // Vor
       SetValue(28576 /*[Program\Highcharts\Temp\HC_Zeitraum\HC_Endpunkt]*/  , $ENDPUNKT +1);
       Break;
    Case -1: // Jetzt
       SetValue(28576 /*[Program\Highcharts\Temp\HC_Zeitraum\HC_Endpunkt]*/  , 0);
       Break;
    default:
        SetValue($IPS_VARIABLE, $IPS_VALUE);
       Break;
    }

// Hier sind alle Highchart Konfig-Skripts einzutragen - damit Änderungen sofort sichtbar werden
// Geht das irgendwie besser?
IPS_RunScript(14384 /*[Program\Highcharts\Temp\HCConfig]*/ );
//IPS_RunScript(35453 /*[Objekt #35453 existiert nicht]*/);

?>

Der Teil in der HC_Config den ich geändert habe:


	// Zeitraum welcher dargestellt werden soll
//	$CfgDaten["StartTime"] = mktime(0,0,0, date("m", time())-1, 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
$ZeitRaum = GetValue(55944 /*[Program\Highcharts\Temp\HC_Zeitraum]*/ );
If ($ZeitRaum == 0) {$ZeitRaum = (8/24);};
$EndPunkt = GetValue(28576 /*[Program\Highcharts\Temp\HC_Zeitraum\HC_Endpunkt]*/ );
$CfgDaten["EndTime"] = time() + 60 * 60 * 24 * $ZeitRaum * $EndPunkt;
$CfgDaten["StartTime"] = $CfgDaten["EndTime"] - 60 * 60 * 24 * $ZeitRaum;
	// => ab V1.0003
	$CfgDaten["RunMode"]= "script"; 	//oder script

EDIT: Habe grad festgestellt, dass wenn ich < drücke, kommt ein Fehler auf der HC Seite:
siehe Screenshot

Und die HC_Endpunkt springt auf Woche

Ich Trottel … muss natürlich die ID der Variable nehmen und nicht die vom Script.

Jaja … die Bäume und die Wälder :smiley:

Danke trotzdem für den Tipp mit float :wink:

Kann man für die Y-Achse irgendwie eine Maximal Begrenzung eingeben :confused:

danke
Bruno

mit HighCharts geht so ziemlich alles:

Min und Max sind die Parameter für die y-Achse, eigentlich schon sprechend im Script beschrieben


// Y-Achsen
$CfgDaten["yAxis"][] = array("Name" =>"Temperatur (°C)", "Unit"=>"", "Min"=>10, "Max"=>40,"TickInterval"=>5, "Opposite"=>false);

Danke manchmal sieht man den Wald vor lauter Bäumen nicht

Gruß
Bruno

Hallo,

nach ersten Versuchen mit Googlecharts (und Problemen bei Bilderwechsel/~auswahl) bin ich jetzt auf Highcharts umgestiegen bzw. bin dabei.

Ich habe die Version 1.0005 und die Zeitauswahl von @axelp im Einsatz und meine Heizgraphen werden wir gewünscht angezeigt.
Aber: Bei „mouseover“ wird mir nur der Tooltip vom ersten Wert (ganz links) angezeigt - die Graphen sind OK (d.h. ich gehe davon aus, das auch meine Werte OK sind).
An welche Stelle werden diese ToolTip-Werte „vorbereitet“ - in der CreateTooltTipString-Funktion des HighCharts Scriptes wird nur die Formatierung durchgeführt … mein Problem liegt woanders (und bestimmt wieder bei mir :wink: ).

Hätte da einmal eine Frage an die Highchart-Cracks.

Ich habe in meine bisherigen Graph-Tools in der Legende neben der Beschreibung auch den aktuellen Wert der geloggten Variable stehen.

Da HC sehr flexibel ist wollte ich einmal anklopfen ob dies schon jemand in seine Graphen eingebaut hat. Somit könnte ich meine MySQL-basierte Version endgültig verbannen.

hä? ich versteh kein Wort.:smiley:
bitte mal ins Deutsche (vom Bayrischen) übersetzen - oder: haste mal ein Foto?

Aber Erklärbär,

Bilder sagen mehr wie 1000 Variablen.

In der Legende der DUGs steht neben der Variable auch dessen AKT/MIN/MAX-Wert. Für die HC würde mit der AKT reichen.

Denke das geht mit einer benutzerdefinierten Legende in HighCharts.

ah , ja, jetzt besser. verstanden. Aber ne Lösung hab ich momentan auch nicht. Aber interessieren täte es mich schon.

Ich hab neulich beim Durchstöbern der HC-Optionen sowas wie ein datenfeld gesehen - das war aber nicht ganz das, was Du aus Deinem Bild hast. Ich buddel da mal nach…

Buddeln wir gemeinsam.

Dachte das evtl. schon jemand die Aufgabe gelöst hat :slight_smile:

leider bisher erfolglos. Habe Checkmarks in der Legende gefunden (zu welchem Zweck auch immer), aber das Datenfeld nicht.

Hast Du mal versucht, den Title oder Subtitle zu variabilisieren?