Q&A Highcharts - Multigraph V1.0

Ich bin traurig,:(.

Ich möchte das auch so gerne haben, aber im Dashboard, hat den keiner ein Tip wie es da geht.

Gruß Uwe

Bei ca. Zeile 60 ist dann noch die geloggte Variable deiner Wahl anzugeben.
Danke, das war der wichtige Tipp!:slight_smile:
Stand das irgendwo???

Leider bleibt trotzdem mein Graph leer.

Ich habe folgendes gemacht:

[ol]
[li]Download Highcharts von highcharts.com[/li]> [li]und heruntergeladenes ZIP ins Verzeichnis „webfront/user” entpacken[/li]> [li]“IPS_Template.php” in das“webfront/user/Highcharts“ Verzeichnis kopieren (entpacktes ZIP-Verzeichnis)[/li]> [li] „Highcharts_Vxxxx“ Scripts in IPS einspielen (ID wird in ConfigScript benötigt)[/li]> [li]Eine String-Variable mit dem Profil ~HTMLBox anlegen (ID wird in ConfigScript benötigt)[/li]> [li]Einspielen und Parametrieren des ConfigScripts (siehe Anhang)[/li]> [li]Starten des ConfigScripts[/li]> [/ol]
und hier um Zeile 60 im Config Script verschiedene IDs von geloggten Temperaturen etc. eingetragen:

// => 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(52209,19560,14303), "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"=>52209, "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"=>14303, "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"=>14303, "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"=>14303, "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"=>14303, "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"=>14303, "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"=>14303, "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}}}");

und dann das Config Script gestartet (lief fehlerfrei).

Dann sehe ich im Webfront auf die angelegte String Variable mit Profil ~HTML-Box und und erkenne eine leere Box. Die Variable hat folgenden Inhalt:

<iframe src="./User/Highcharts/IPS_Template.php?CfgFile=C:\IP-Symcon\webfront\user\Highcharts\HighChartsCfg15041.tmp" width=„100%“ height=„616“ frameborder=„0“ scrolling=„no“></iframe>

Muß ich evtl. die String Variable im Webfront noch anders einbinden?

Häng uns mal dein Configfile, ein Screenshot der Console wo man die benötigten ID´s sehen kann hier rein.

Hi,

du hast mir die Tage auch deine Config geschickt. Ich krieg das zwar alles hin, nur möchte ich die „Balken“ nicht hardgecodet (was ein scheiß Wort) haben, sondern aus den geloggten Zählerständen meines Stromzählers. Ich bekomme die Darstellung ohne Probleme mit den Graphen hin (Temp, Stromverbrauch, Gasverbrauch…), ich möchte nur z.B. den Stromverbrauch der Monate mit den Balken dargestellt haben. Das muß doch irgendwie funktionieren, mit Googlecharts läuft es auch ohne Probleme.

Vielleicht wisst ihr ja eine Möglichkeit?!

Wo liegt das Problem.

Mach doch bei deiner Datenvariable statt „line“ => „column“ und schon sind es Balken.

 $CfgDaten["Series"][] = array("Id"=>16626, "Name" =>"Ertrag", "Unit"=>NULL, "ReplaceValues"=>false,
   "Param" =>"type:'column', color: '#FFFF55', threshold: 0.5, fillOpacity: 0.5, step :false, yAxis: 0, shadow: false, lineWidth: 2, states: {hover:{lineWidth: 3}}, marker: { enabled: true, states: { hover: { enabled: true, radius: 4}}}");

Die gelben Balken sind die dynamischen aus der Datenbank, die grauen die hardcoded aus der xAxis.

Also meinen Verbrauch zeigt er zwar in Balken an, nur jeden Tag! Er soll das aber auf den Monat hochaggregieren, so dass ich für jeden Monat einen Balken habe. :confused:

Hast Du auch den Beitrag bzgl. tickIntervall beachtet?

Steht jedenfalls in dem Skript aber irgendwie macht er das nicht.



<?

	// => ab V1.0004, damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden
	Global $CfgDaten; //$CfgDaten = array();

   $year = date('Y', time());

	// Überschriften
	$CfgDaten["Title"]= "PV Ertrag";
	$CfgDaten["SubTitle"]= ""; // "" = Automatisch über Zeitraum

	// IPS Variablen ID´s
	$CfgDaten["ArchiveHandlerId"]= 15912 /*[Archive Handler]*/; 										// Archive Handler
	$CfgDaten["ContentVarableId"]= 31018 /*[Highcharts\Test\Test]*/;  			// ID der Content-Variable
	$CfgDaten["HighChartScriptId"]= 40453 /*[Highcharts\Highcharts Skript]*/;  // ID des Highcharts Scripts

	// Zeitraum welcher dargestellt werden soll
	$CfgDaten["StartTime"] = mktime(0,0,0,1,1,2011); // ab heute 00:00 Uhr
//	$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öß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

	//$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 /*[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"=>37443, "Name" =>"Stromverbrauch","Unit"=>"Watt",		 "ReplaceValues"=>false,
  // 	"Param" =>"type:'column',  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"=>27829, "Name" =>"Ertrag", "Unit"=>NULL, "ReplaceValues"=>false,
   "Param" =>"type:'column', color: '#FFFF55', threshold: 0.5, fillOpacity: 0.5, step :false, yAxis: 0, shadow: false, lineWidth: 2, states: {hover:{lineWidth: 3}}, marker: { enabled: true, states: { hover: { enabled: true, radius: 4}}}");

//		$CfgDaten["Series"][] = array("Id"=>15769, "Name" =>"Hobbyraum","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"=>19224, "Name" =>"Technikraum","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"=>57139, "Name" =>"Schlafzimmer","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"=>44143, "Name" =>"Badezimmer","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"=>21815, "Name" =>"Gästezimmer","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"=>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}}}");

/*
	//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" =>"Stromverbrauch", "Unit"=>"[Watt]", "Min"=>0, "Opposite"=>false,"TickInterval"=>10);
//	$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"]= true;  // 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"]="
			credits: {
				enabled: false
			},
			chart: {
				renderTo: 'container',
	         defaultSeriesType: 'line',
	         zoomType: 'x'

			},
		   plotOptions: {
         	series: {
            	animation: { duration: 2000 },
            	pointWidth: 30 // Balkenbreite
        		},
    		},
			title: {
				text: '%title.text% $year',
				//x: -20
			},
			subtitle: {
				text: '%subtitle.text%'
				//x: -20
			},
			exporting: {
				buttons: {
					printButton: {
						enabled: false
					},
					exportButton: {
						enabled: false
					}
				}
			},
      	legend: {
	        layout: 'vertical',
	        backgroundColor: '#1f2f40',
	        align: 'left',
	        verticalAlign: 'top',
	        floating: true,
	        x: 100,
	        y: 0
		   },
			xAxis: [{
				type: 'datetime',
				 dateTimeLabelFormats: { second: '%H:%M:%S',
					minute: '%H:%M',
					hour: '%H:%M',
					day: '%e. %b',
					week: '%e. %b',
					month: '%b',
					year: '%Y'
				 },
				 labels: {
				   rotation: 0 // Rotation der X-Achsen-Beschriftung
				 },
				 tickInterval: 30*24*3600*1000, //30 Tage x 24 Std. x 3600 sek x 1000ms - 30 Tage = Monat
 	         title: {
 	           text: 'Zeitraum: Monate'
              //align: 'center'
        		}

			}],
			yAxis: [	%yAxis% ],
			tooltip: {
				shared: true,
				crosshairs: true,
			},
			series: [
						 {name: 'Sollwerte', type:'column', color: '#505760', threshold: 0.5, fillOpacity: 0.1, step :true, yAxis: 0, shadow: false, lineWidth: 0, states: {hover:{lineWidth: 1}}, marker: { enabled: false, states: { hover: { enabled: false, radius: 4}}},
												  data:[ [Date.UTC($year, 0, 1, 00,00,00),2],
															[Date.UTC($year, 1, 1, 00,00,00),4],
															[Date.UTC($year, 2, 1, 00,00,00),6],
															[Date.UTC($year, 3, 1, 00,00,00),7],
															[Date.UTC($year, 4, 1, 00,00,00),7],
															[Date.UTC($year, 5, 1, 00,00,00),7],
															[Date.UTC($year, 6, 1, 00,00,00),7],
															[Date.UTC($year, 7, 1, 00,00,00),7],
															[Date.UTC($year, 8, 1, 00,00,00),6],
															[Date.UTC($year, 9, 1, 00,00,00),5],
															[Date.UTC($year, 10, 1, 00,00,00),3],
															[Date.UTC($year, 11, 1, 00,00,00),2]
														]
						}, %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
		}
	}



?>



Hallo Sysrun,

Ist der Gauge wirklich Highcharts? Deine Doku-Ankündigung war ja ein wenig optimistisch :stuck_out_tongue:

Danke & Gruß,
Axel

Hallo DeejayT,

wußte da war noch etwas was ich anpassen durfte.

Um dies zu erreichen habe ich in der Highcharts_V1.0004.ips.php noch folgende Änderungen machen müssen. $Agg = 3.

Hatte ich auch in folgendem Thread geschrieben.:rolleyes:

Betrifft Änderungen an der Highcharts_PV1.0004.ips.php

       if ($Diff > $DayValues)
    $Agg = 3; //  -> AC_GetAggregatedValues [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year]
   else if ($Diff > $HourValues)
    $Agg = 0; //  -> AC_GetAggregatedValues [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year]  

Hi Werner,

jetzt bin ich ein Schritt weiter. Jetzt erzeugt er mir schon mal die Graphen. Was jetzt noch nicht stimmt ist die Menge. Das was er da anzeigt kommt beim besten Willen nicht hin. Werte ich mir das mit Google aus, krieg ich erheblich höhere Verbräuche, die auch plausibel sind, angezeigt. 11kWh pro Monat was mir Highcharts da ausspuckt wäre zwar schön, aber das passt leider nicht.

Hi Leute,

ich bin gerade dabei etwas mit Highcharts rumzuspielen. Ich habe alles laut Installanleitung eingerichtet, kriege auch denn Graph angezeigt leider ohne Linien! Werte sind aber im Graph vorhanden. Ich kann mit der Maus in den Graph gehen und er zeigt mir den Wert, aber leider eben keine Linie (siehe Screeshot)!

anbei mein highchartconfig script und ein Screenshot von Webfront. Vielleicht hat einer eine Idee? Danke madde!

<?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"]= "Aussen-/ Raumtemperatur/ Stellantriebe";
	$CfgDaten["SubTitle"]= ""; // "" = Automatisch über Zeitraum

	// IPS Variablen ID´s
	$CfgDaten["ArchiveHandlerId"]= 55444 /*[Archive Handler]*/ ; 	// Archive Handler
	$CfgDaten["ContentVarableId"]= 10232 /*[Graphen\Highcharts\Charts]*/ ;  // ID der Content-Variable
	$CfgDaten["HighChartScriptId"]= 37988 /*[Graphen\Highcharts\Highcharts_V1.0004]*/ ;  				// ID des Highcharts Scripts

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

	// => 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öß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

	//$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 /*[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"=>39600, "Name" =>"Raumtemperatur Esszimmer",	"Unit"=>"°C oder °F", "ReplaceValues"=>false,
		"Param" =>"type:'line', 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"=>26756, "Name" =>"Raumtemperatur Kinderzimmwer", "Unit"=>"°C", "ReplaceValues"=>false,
	//	"Param" =>"type:'spline', 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"=>39600, "Name" =>"Raumtemperatur Esszimmer", "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"=>19524, "Name" =>"Stellantrieb Esszimmer","Unit"=>"%",		 "ReplaceValues"=>false,
   	"Param" =>"type:'line',  step:false, yAxis: 1, shadow: false,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" =>"Temperatur", "Unit"=>"°C","Opposite"=>false,"TickInterval"=>2);
	$CfgDaten["yAxis"][] = array("Name" =>"Heizungssteller", "Unit"=>"%","Min"=>0, "Max"=>100,"TickInterval"=>50,"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
		}
	}



?>

Hallo madde007,

das selbe Problem hatte ich auf einem Client auf dem eine alte Version von FF installiert war. Nach einem Update auf FF7.x war alles in Ordnung.

ich rate jetzt mal:

tausch mal „files“ gegen „script“


 // => ab V1.0003 
    $CfgDaten["RunMode"]= "files";     //oder script

ok ok, zu spät;)

Danke RS dein Tip hat geholfen.

@Helmut: ein Update auf FF 7 will ich nicht machen da ich Angst habe das mein Webfront überhaupt nichts mehr anzeigt siehe Thread Tabpanes.

madde007

… pah, Zufallstreffer!

:wink:

Also ich nutze für Webfront nur noch FF7.x und die funktionieren Bestens, natürlich auch mit Split-/TabPanes

Hallo madde007

also ich hab FF 7.0.1 installiert.
IPS funktioniert einwandfrei.

Gruß wibo

Hallo,
von wo bis wo klammere ich den Code aus, wenn ich die hardcoded Values nicht mit darstellen möchte? Erste Versuche führten nur dazu, dass nix mehr dargestellt wurde…man könnt zwar alle Werte auf 0 setzen - aber naja ^^
Vielen Dank für einen Tip, Gruß, kabo63.

Nimm alles hinter %data% bis zur eckigen Klammer raus.

series: [ %data% ]