Q&A Highcharts - Multigraph V1.0

IP-Symcon Skripte, PHP, SQL (Fragen)
721

Mit „extern“ meine ich, wenn die Daten (Zeitstempel + Wert) über den

 $serie['data']                                     = $data;

angelegt werden.

Das hat der User khc damals in V1.0006 eingebaut. https://www.symcon.de/forum/threads/17625-Highcharts-Multigraph?p=120721#post120721

NEU: Jeder Serie können über „Data“ von extern Werte übergeben werden. Dann werden für diese Serie aber keine Werte aus der DB gelesen.

Wird dieser Eingang mit „NULL“ belegt, verwendet der Chart die von IPS geloggten Daten.

Und dieses externe „data-array“ wird eben mit

$data = IPS_Array_to_HCData($RoundedValue, array_reverse(AC_GetAggregatedValues(AC_HANDLER_ID, $id_state[$idx], $AggType, $CfgDaten["StartTime"], $CfgDaten["EndTime"], 10000)));

gebaut.

722

… und hier die Lösung …

Ich habe das Skript von Raketenschnecke leicht abgeändert und 3600 Sekunden zum Unix-Zeitstempel hinzugefügt:

// Function IPS_Array_to_HCData, wandelt ein Datenarray aus IPS in Array mit Wertepaaren [Timestamp, Value] um
function IPS_Array_to_HCData($RoundValue, $Array)
{
	/* Übergabe-Parameter:
	   * $RoundValue        => Rundungsfaktor
	   * $Array             => IPS Datenarray (erzeugt mit AC_Get-Befehlen)
	*/

	$result        = array();
	foreach($Array as $key=>$rs)
	{

#	   $result[$key][]   = $rs['TimeStamp']*1000;          // Timestamp für JS (*1000)
	   $result[$key][]   = ($rs['TimeStamp'] + 3600)*1000; //  + 3600Sek. weil Chart um 1h nach hinten versetzt war. Timestamp für JS (*1000)
	   if(isset($rs['Value']))
			$result[$key][]   = round($rs['Value'], $RoundValue);
		if(isset($rs['Avg']))
		   $result[$key][]   = round($rs['Avg'], $RoundValue);
	}
	$result1    = array_values($result);

	return $result1;
}
723

Um das Problem mit den Umlauten in Griff zu bekommen, einfach in der „Highcharts_V3.00.ips“ die Zeile

$item = utf8_encode($item);

mit

if (mb_detect_encoding($item, 'UTF-8', true) === false) {       
      $item = utf8_encode($item);   
}

ersetzen.

utf8.PNG

724

Ich habe versucht HighCharts bei mir einzubinden.
Leider gibt es überhaupt keine Ausgabe. Da ich Symcon 4.2 nutze und nur die highcharts Scripte ab Versionsnummer 5 habe weiß ich nicht wo der Fehler liegt.

Es wäre toll wenn mir hier jemand weiterhelfen könnte!

Das ist das Ergebniss in dem iFrame für die Charts:


<html>
                <head>
                     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script><script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
                       <script type="text/javascript" src="http://code.highcharts.com/themes/grid.js"></script>
                        <script type="text/javascript">
                        Highcharts.setOptions({lang:{decimalPoint:',',thousandsSep:'.',months:['Januar','Februar','M\u00e4rz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],shortMonths:['Jan','Feb','M\u00e4r','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],weekdays:['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag']}});
                    </script>
                </head>
                <body>
                    <div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>
                    <script type="text/javascript">
                        var chart = new Highcharts.Chart({chart:{renderTo:'container',zoomType:'xy'},credits:{enabled:false},exporting:{enabled:false,buttons:{printButton:{enabled:false}}},title:{text:'Test-\u00dcberschrift'},subtitle:{text:'Zeitraum: (Mi) 17.05.2017 00:00 - (Mi) 17.05.2017 23:59'},tooltip:{formatter:function() {var serieIndex = this.series.index;var unit = [[this.y + ' kWh'],[this.y + ' m3'],[this.y + ' Liter']][serieIndex];var offset = [0,0,0][serieIndex] * 1000;var offsetInfo ='';if (offset != 0)offsetInfo = '<br\/>(Achtung Zeitwert hat einen Offset)';elseoffsetInfo ='';if (this.series.type == 'pie'){return '<b>' + this.point.name +': <\/b> '+ unit +'<br\/>= ' + this.percentage.toFixed(1) + ' %';  }else               {return '<b>' + this.series.name + ': <\/b> '+ unit + '<br\/>'+ Highcharts.dateFormat('%A %d.%m.%Y %H:%M', this.x - offset)+ offsetInfo;}} },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'},allowDecimals:false,min:Date.UTC(2017,4,17,00,00,00),max:Date.UTC(2017,4,17,23,59,59)},yAxis:[{title:{text:'Temperaturen'},Unit:'\u00b0C',opposite:false,tickInterval:5,min:0,max:40,labels:{formatter:function() { return this.value +' \u00b0C'; }}},{title:{text:'Heizungssteller \/ Luftfeuchte'},Unit:'%',opposite:true,labels:{formatter:function() { return this.value +' %'; }}},{title:{text:'Drehgriffkontakte \/ T\u00fcrkontakte'},labels:{formatter:function() { if (this.value == 0.5) return 'geschlossen'; if (this.value == 1) return 'gekippt';if (this.value == 2) return 'ge\u00f6ffnet' },rotation:90},allowDecimals:true,showFirstLabel :false,showLastLabel :false,opposite:true},{title:{text:'Columns'},Unit:'kWh',labels:{formatter:function() { return this.value +' kWh'; }}}],series:[{name:'Stromverbrauch',Id:27155,type:'spline',yAxis:0,marker:{enabled:false,states:{hover:{enabled:true,symbol:'circle',radius:4,lineWidth:1}}},shadow:true,lineWidth:1,states:{hover:{lineWidth:2}},data:[[Date.UTC(2017,4,17,00,00,00),0],[Date.UTC(2017,4,17,00,08,00),0],[Date.UTC(2017,4,17,00,23,10),0],[Date.UTC(2017,4,17,00,38,19),0],[Date.UTC(2017,4,17,00,53,01),0],[Date.UTC(2017,4,17,01,08,11),0],[Date.UTC(2017,4,17,01,23,20),0],[Date.UTC(2017,4,17,01,38,02),0],[Date.UTC(2017,4,17,01,53,11),0],[Date.UTC(2017,4,17,02,08,21),0],[Date.UTC(2017,4,17,02,23,03),0],[Date.UTC(2017,4,17,02,38,12),0],[Date.UTC(2017,4,17,02,53,22),0],[Date.UTC(2017,4,17,03,08,03),0],[Date.UTC(2017,4,17,03,23,13),0],[Date.UTC(2017,4,17,03,38,23),0],[Date.UTC(2017,4,17,03,53,04),0],[Date.UTC(2017,4,17,04,08,14),0],[Date.UTC(2017,4,17,04,23,24),0],[Date.UTC(2017,4,17,04,38,05),0],[Date.UTC(2017,4,17,04,53,15),0],[Date.UTC(2017,4,17,05,08,25),0],[Date.UTC(2017,4,17,05,23,06),0],[Date.UTC(2017,4,17,05,38,16),0],[Date.UTC(2017,4,17,05,52,57),0],[Date.UTC(2017,4,17,06,08,07),0],[Date.UTC(2017,4,17,06,37,58),0],[Date.UTC(2017,4,17,06,53,08),0],[Date.UTC(2017,4,17,07,08,18),0],[Date.UTC(2017,4,17,07,22,59),0],[Date.UTC(2017,4,17,07,38,09),0],[Date.UTC(2017,4,17,07,53,19),0],[Date.UTC(2017,4,17,08,08,00),0],[Date.UTC(2017,4,17,08,23,10),0],[Date.UTC(2017,4,17,08,38,20),0],[Date.UTC(2017,4,17,08,53,01),0],[Date.UTC(2017,4,17,09,08,11),0],[Date.UTC(2017,4,17,09,23,21),0],[Date.UTC(2017,4,17,09,38,02),0],[Date.UTC(2017,4,17,09,53,12),0],[Date.UTC(2017,4,17,10,08,22),0],[Date.UTC(2017,4,17,10,23,04),0],[Date.UTC(2017,4,17,10,53,23),0],[Date.UTC(2017,4,17,11,08,04),0],[Date.UTC(2017,4,17,11,23,14),0],[Date.UTC(2017,4,17,11,38,24),0],[Date.UTC(2017,4,17,11,53,05),0],[Date.UTC(2017,4,17,12,08,15),0],[Date.UTC(2017,4,17,12,18,26),0]]},{name:'Gasverbrauch',Id:34699,type:'spline',step:false,yAxis:1,shadow:true,lineWidth:1,states:{hover:{lineWidth:2}},marker:{enabled:false,states:{hover:{enabled:true,symbol:'circle',radius:4,lineWidth:1}}},data:[[Date.UTC(2017,4,17,00,00,00),0],[Date.UTC(2017,4,17,01,00,00),0],[Date.UTC(2017,4,17,02,00,00),0],[Date.UTC(2017,4,17,03,00,00),0],[Date.UTC(2017,4,17,04,00,00),0.010000000000002],[Date.UTC(2017,4,17,05,00,00),0.47],[Date.UTC(2017,4,17,06,00,00),0],[Date.UTC(2017,4,17,07,00,00),0.24],[Date.UTC(2017,4,17,08,00,00),0.18],[Date.UTC(2017,4,17,09,00,00),0],[Date.UTC(2017,4,17,10,00,00),0],[Date.UTC(2017,4,17,11,00,00),0],[Date.UTC(2017,4,17,12,00,00),0]]},{name:'Wasserverbrauch',Id:42258,type:'line',step:false,yAxis:2,shadow:true,lineWidth:1,states:{hover:{lineWidth:2}},marker:{enabled:false,states:{hover:{enabled:true,symbol:'circle',radius:4,lineWidth:1}}},data:[[Date.UTC(2017,4,17,00,00,00),0],[Date.UTC(2017,4,17,01,00,00),0],[Date.UTC(2017,4,17,02,00,00),0],[Date.UTC(2017,4,17,03,00,00),0],[Date.UTC(2017,4,17,04,00,00),0],[Date.UTC(2017,4,17,05,00,00),0],[Date.UTC(2017,4,17,06,00,00),50],[Date.UTC(2017,4,17,07,00,00),30],[Date.UTC(2017,4,17,08,00,00),16],[Date.UTC(2017,4,17,09,00,00),0],[Date.UTC(2017,4,17,10,00,00),0],[Date.UTC(2017,4,17,11,00,00),0],[Date.UTC(2017,4,17,12,00,00),0]]}]});
                    </script>
                    </body>
                </html>

Wenn ich den o.a. Code in eine eigene html Datei kopiere wird mir ein Diagramm angezeigt.
Was mache ich dam im Bezug auf die html Box falsch?

725

Ich habe es hinbekommen.
Das Problem war, das meine IP-Symcon Seit via https aufgerufen wird. Da verweigert der Browser aber iFrames die Seiten von externen, unsicheren Quellen laden.

Die Lösung, ohne die Sicherheit aufzugeben, war alle Dateien lokal in den user Ordner des WebFronts zu kopieren und das im config Script entsprechend anzugeben.

726

Ich mag es, wenn Leute nicht nur Ihr Problem, sondern auch anschließend die Lösung darlegen.

[emoji106]

Gesendet von iPhone mit Tapatalk

727

Ich habe es hinbekommen.
Das Problem war, das meine IP-Symcon Seit via https aufgerufen wird. Da verweigert der Browser aber iFrames die Seiten von externen, unsicheren Quellen laden.

Die Lösung, ohne die Sicherheit aufzugeben, war alle Dateien lokal in den user Ordner des WebFronts zu kopieren und das im config Script entsprechend anzugeben.

Könntest du bitte mal sagen welche Dateien aus der ZIP genau kopiert werden müssen?
Habe das gleiche Problem.
jQuery lokal hab ich schon hinbekommen.
Highcharts leider nicht :confused:

Danke
René

728

folgende Zeile sollte laut mehrer Foreneinträge korrekt sein.

$CfgDaten[‚Ips‘][‚ScriptsHighCharts‘] = „…//user/Highcharts-5.0.12/js/“;

wenn ich die Zeile auskommentiere funtioniert alles normal

729

Hallo,

nach vielen Stunden lesen habe ich es geschafft, ein HighChart darzustellen und möchte nun einen Zeitraum für mein HighChart anwählen können. Habe dazu die Lösung von axelp aus Post #6 angewendet: Highcharts - Multigraph

Leider kommt beim anwählen eines Zeitraumes über das WebFront eine Fehlermeldung

Notice:  Undefined variable: IPS_VALUE in /var/lib/symcon/scripts/16886.ips.php on line 6

Notice:  Undefined variable: IPS_VALUE in /var/lib/symcon/scripts/16886.ips.php on line 9

Notice:  Undefined variable: IPS_VALUE in /var/lib/symcon/scripts/16886.ips.php on line 12

Notice:  Undefined variable: IPS_VARIABLE in /var/lib/symcon/scripts/16886.ips.php on line 16

Das Script ist dieses

 <?

$ENDPUNKT = GetValue(56356 /*[Heizung\Chart\HC_EndPunkt]*/);

Switch ($IPS_VALUE){
    Case -3: // Zurück
       SetValue(56356 /*[Heizung\Chart\HC_EndPunkt]*/, $ENDPUNKT -1);
       Break;
    Case -2: // Vor
       SetValue(56356 /*[Heizung\Chart\HC_EndPunkt]*/, $ENDPUNKT +1);
       Break;
    Case -1: // Jetzt
       SetValue(56356 /*[Heizung\Chart\HC_EndPunkt]*/, 0);
       Break;
    default:
        SetValue($IPS_VARIABLE, $IPS_VALUE);
       Break;
    }
?>

Das WebFront sieht so aus (siehe Bild 1). In der Console habe ich laut axelp die Variablen und Scripte so angelegt (siehe Bild 2).

Hier noch das Config Script

<?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']= 25739 /*[Heizung\Chart\Temperaturen]*/;  // 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']= 25967 /*[Heizung\Chart\Highcharts_V3.01.ips]*/;  				// ID des Highcharts Scripts

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

	// Zeitraum welcher dargestellt werden soll (kann durch die Zeitvorgaben in den Serien verändert werden)
	//if (!isset($CfgDaten["StartTime"]))
	 	//$CfgDaten["StartTime"] = mktime(0,0,0, date("m", time()), date("d",time()), date("Y",time())); // ab heute 00:00 Uhr
	//if (!isset($CfgDaten["EndTime"]))
		//$CfgDaten["EndTime"] = mktime(23,59,59, date("m", time()), date("d",time()), date("Y",time())); // bis heute 23:59 Uhr, oder //$CfgDaten["EndTime"] = time();   // = bis jetzt

	$ZeitRaum = GetValue(53030 /*[Heizung\Chart\HC_Zeitraum]*/ );
    // AggType: [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year] .. wie der Werte gelesen werden soll
    Switch ($ZeitRaum) {
       Case 0:
       Case 1:
          $AggType = 0;
          Break;
       Case 7:
       Case 30:
          $AggType = 1;
          Break;
       Case 366:
        Case 90:
       Case 180:
          $AggType = 3;
          Break;
        Default:
        $AggType = 0;
    };
    If ($ZeitRaum == 0) {$ZeitRaum = (8/24);};
    $EndPunkt = GetValue(56356 /*[Heizung\Chart\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, popup

	// wenn Popup dann muss die WebfrontConfigId und der Titele übergeben werden
	if ($CfgDaten['RunMode'] == "popup")
	{
		$CfgDaten['WebFrontConfigId'] = 10563 /*[WebFront]*/;
		$CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
	}

	// Übergabe der IP-Adresse und des Ports für die Darstellung im Dashboard
	// Wichtig! Wenn Darstellung in Webfront diese Variablen auskommentieren
	//$CfgDaten['Ips']['Dashboard']['Ip'] = "127.0.0.1";
	//$CfgDaten['Ips']['Dashboard']['Port'] = "82";

	// Serienübergreifende Einstellung für das Laden von Werten
	$CfgDaten['AggregatedValues']['HourValues'] = -1;      // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
	$CfgDaten['AggregatedValues']['DayValues'] = -1;       // ist der Zeitraum größer als X Tage werden Tageswerte geladen
	$CfgDaten['AggregatedValues']['WeekValues'] = -1;      // ist der Zeitraum größer als X Tage werden Wochenwerte geladen
	$CfgDaten['AggregatedValues']['MonthValues'] = -1;      // ist der Zeitraum größer als X Tage werden Monatswerte geladen
	$CfgDaten['AggregatedValues']['YearValues'] = -1;      	// ist der Zeitraum größer als X Tage werden Jahreswerte geladen
	$CfgDaten['AggregatedValues']['NoLoggedValues'] = 1000; 	// ist der Zeitraum größer als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen	$CfgDaten['AggregatedValues']['MixedMode'] = false;     // alle Zeitraumbedingungen werden kombiniert
	$CfgDaten['AggregatedValues']['MixedMode'] = false;
	// Systematik funktioniert jetzt additiv. D.h. die angegebenen Werte gehen ab dem letzten Wert
	//
	//            -5 Tage           -3 Tage    					EndTime
	// |           |              	|            				 |
	// |           |DayValue = 2     |HourValues = 3          |
	// |Tageswerte |Stundenwerte     |jeder geloggte Wert     |



	// **************************************************************************************
	// *** Highcharts Options ***
	// **************************************************************************************
	// Ab hier werden die Bereiche des Highchart-Objektes parametriert.
	// Dieser Bereich wurde (soweit möglich) identisch der Originalstruktur gehalten.
	// Informationen über die Parametrierung findet man unter http://www.highcharts.com/ref/

	// **************************************************************************************
	// *** chart *** http://www.highcharts.com/ref/#chart
	// **************************************************************************************
	//$CfgDaten['chart']['zoomType'] = "'x'";			//default: $CfgDaten['chart']['zoomType'] = "'xy'";

	// **************************************************************************************
	// *** credits *** siehe http://www.highcharts.com/ref/#credits
	// **************************************************************************************
	// $CfgDaten['credits']['text'] = "used by IPS";
	// $CfgDaten['credits']['href'] = "http://www.ip-symcon.de/forum/f53/highcharts-multigraph-v1-0-a-17625 /*[Objekt #17625 existiert nicht]*//#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'] = "Heizungsanlage";

	// **************************************************************************************
	// *** 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
	// $CfgDaten['TooltipDateTimeFormat'] = "%A %d.%m.%Y %H:%M";  // Standard Tooltip DateTime-Format

	// **************************************************************************************
	// *** 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'] = "Warmwasserspeicher";
	$CfgDaten['yAxis'][0]['Unit'] = "°C";
	$CfgDaten['yAxis'][0]['opposite'] = false;
	$CfgDaten['yAxis'][0]['tickInterval'] = 5;
	//$CfgDaten['yAxis'][0]['min'] = 0;
	//$CfgDaten['yAxis'][0]['max'] = 70;
	
	//$CfgDaten['yAxis'][1]['title']['text'] = "Solarertrag";
	//$CfgDaten['yAxis'][1]['Unit'] = "kWh";
	//$CfgDaten['yAxis'][1]['opposite'] = true;
	//$CfgDaten['yAxis'][1]['tickInterval'] = 5;



	// **************************************************************************************
	// *** 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'] = "Aussentemperatur";
	$serie['Id'] = 41633 /*[ModBus Gateway\ModBus Device - 02 - Außentemperatur\Value]*/;
	$serie['Unit'] = "°C";
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 0;
	$serie['type'] = "spline";
	$serie['yAxis'] = 0;
	$serie['marker']['enabled'] = false;
	$serie['shadow'] = false;
	$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;
	
	$serie = array();
	$serie['name'] = "Solarkollektor";
	$serie['Id'] = 22919 /*[ModBus Gateway\ModBus Device - 75 - Solar Collector Temp\Value]*/;
	$serie['Unit'] = "°C";
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 0;
	$serie['type'] = "spline";
	$serie['yAxis'] = 0;
	$serie['marker']['enabled'] = false;
	$serie['shadow'] = false;
	$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;

	$serie = array();
	$serie['name'] = "Speicher Oben";
	$serie['Id'] = 24077 /*[ModBus Gateway\ModBus Device - 72 - ACCU TPO\Puffer Oben]*/;
	$serie['Unit'] = "°C";
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 0;
	$serie['type'] = "spline";
	$serie['yAxis'] = 0;
	$serie['marker']['enabled'] = false;
	$serie['shadow'] = false;
	$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;

	$serie = array();
	$serie['name'] = "Speicher Mitte";
	$serie['Id'] = 18671 /*[ModBus Gateway\ModBus Device - 73 - ACCU TPM\Value]*/;
	$serie['Unit'] = "°C";
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 0;
	$serie['type'] = "spline";
	$serie['yAxis'] = 0;
	$serie['marker']['enabled'] = false;
	$serie['shadow'] = false;
	$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;

	$serie = array();
	$serie['name'] = "Speicher Unten";
	$serie['Id'] = 58605 /*[ModBus Gateway\ModBus Device - 78 - Solar Storage Temp\Value]*/ ;
	$serie['Unit'] = "°C";
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 0;
	$serie['type'] = "spline";
	$serie['yAxis'] = 0;
	$serie['marker']['enabled'] = false;
	$serie['shadow'] = false;
	$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;
	
	//$serie = array();
	//$serie['name'] = "Solarertrag";
	//$serie['Id'] = 12973 /*[ModBus Gateway\ModBus Device - 92 - SolarGain today\Value]*/;
	//$serie['Unit'] = "kWh";
	//$serie['ReplaceValues'] = false;
	//$serie['RoundValue'] = 0;
	//$serie['type'] = "line";
	//$serie['yAxis'] = 1;
	//$serie['marker']['enabled'] = false;
	//$serie['shadow'] = false;
	//$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'] = "100%"; 	// in px,  0 wird auch in 100% konvertiert
	$CfgDaten['HighChart']['Height'] = 600; 		// in px

	// ab V3.000 sind diese Parameter hinzugekommen
	// lokale Skripte oder aus Internet
	// ['Ips']['ScriptsHighCharts']  		Verzeichnis in welchen sich die Scripte befinden falls man diese lokal hält,
	// ['Ips']['ScriptsHighstock']         default = leer, dann werden die Scripte aus dem Internet geholt
	// ['Ips']['Scriptsjquery']
	// ['Ips']['ScriptsTheme'] das ist das Themes Verzeichnis. Wenn man mit der ips.js arbeitet, sollte man dort alle Highchart Themes hinkopieren und den Pfad antprechend angeben

	// ['Ips']['HtmlScript'] default = leer, Script komplett erzeugen, wenn man z.B.: mit Dynamik arbeitet kann man hier Anpassungen machen.

	// -------------------------------------------------------------------------------------------------------------------------------------
	// und jetzt los ......
	$s = IPS_GetScript($CfgDaten['HighChartScriptId']); 	// Id des Highcharts-Scripts
	include($s['ScriptFile']);

	// das ist ab V3.000 der neue Aufruf
	RunHighcharts($CfgDaten);



?>

Was habe ich übersehen oder wo liegt mein Fehler? Über einen Hinweis wäre ich sehr dankbar. Das HighChart ist ein super Tool und sozusagen unverzichtbar :).

Ganz herzlichen Dank an den Ersteller khc und die vielen Supporter.

Gruß
Andi

Bild 1.PNG
Bild 1.PNG942×730 40.5 KB

Bild 2.PNG
Bild 2.PNG943×472 38.1 KB

730

IPS_VARIABLE und IPS_VALUE sind die alten Bezeichnungen. Ersetze die mal durch $_IPS[‚VARIABLE‘] und $_IPS[‚VALUE‘].

731

Hallo Silberstreifen,

Danke für den Hinweis. Das Skript habe ich geändert in:

 <?

$ENDPUNKT = GetValue(56356 /*[Heizung\Chart\Aktionsskript HC_Zeitraum\HC_EndPunkt]*/);

Switch ($_IPS['VALUE']){
    Case -3: // Zurück
       SetValue(56356 /*[Heizung\Chart\Aktionsskript HC_Zeitraum\HC_EndPunkt]*/, $ENDPUNKT -1);
       Break;
    Case -2: // Vor
       SetValue(56356 /*[Heizung\Chart\Aktionsskript HC_Zeitraum\HC_EndPunkt]*/, $ENDPUNKT +1);
       Break;
    Case -1: // Jetzt
       SetValue(56356 /*[Heizung\Chart\Aktionsskript HC_Zeitraum\HC_EndPunkt]*/, 0);
       Break;
    default:
        SetValue($_IPS['VARIABLE'], $_IPS['VALUE']);
       Break;
    }
?>

Jetzt kommt diese Meldung

Notice:  Undefined index: VALUE in /var/lib/symcon/scripts/16886.ips.php on line 5

Notice:  Undefined index: VARIABLE in /var/lib/symcon/scripts/16886.ips.php on line 16

Notice:  Undefined index: VALUE in /var/lib/symcon/scripts/16886.ips.php on line 16

Warning:  Variable #0 does not exist in /var/lib/symcon/scripts/16886.ips.php on line 16

Noch 'ne Idee?

Gruß
Andi

732

Nein, keine Idee. Jetzt ist das Skript richtig. Wie rufst Du das Skript denn auf? Das Skript funktioniert nur, wenn es durch Änderung der Variable „Zeitraum“ getriggert wird.
Viel Erfolg
Jürgen

733

Könnte gut sein, dass ich den Trigger vergessen habe. Danke für den Tipp. Kann ich leider erst in 10 Tagen testen, wir fahren jetzt erstmal in den Urlaub :). Ohne IPS :frowning:

734

Hallo zusammen,

auch ich bin mit den in den bisherigen Antworten empfohlenen Pfadangaben nicht klar gekommen. Vielleicht hilf es dem einen oder anderen weiter, um die HighCharts lokal im User-Verzeichnis zum Laufen zu bekommen. Bei mir funktioniert:

$CfgDaten[‚Ips‘][‚ScriptsHighCharts‘] = „…/user/HighCharts5/code/“;
$CfgDaten[‚Ips‘][‚ScriptsHighstock‘] = „…/user/HighStocks5/code/“;

Aber leider ist das SSL-Problem aus meiner Sicht immer noch nicht gelöst:

Meine Konfiguration: VPN-Zugriff, SSL eingeschaltet, in Highcharts_V3.01.php alle http durch https ersetzt

  • über Chrome: geht (mit roter Warnung)
  • iOS-App: keine Anzeige, keine Fehlermeldung :mad:

Falls jemand noch einen Tipp hat… Ich habe SSL jetzt wieder ausgeschaltet, dann geht die HC-Anzeige auch in der App. Ich hoffe, dass das über VPN trotzdem sicher ist (auch wenn ich das Connect-Modul für den GeoFency-Hook aktiviert habe, alle Passwörter sind natürlich gesetzt)…:confused:

Viele Spass!

735

Hallo zusammen,

ich habe ein Darstellungsproblem bei meinen Highcharts und hoffe jemand hier kann mir einen Hinweis geben wo ich suchen muss ggf. sogar die Lösung (ich doktore hier schon seit Stunden rum).

Ich habe eine PV-Anlage und stelle die Daten mit Highcharts dar. Für das Jahr 2011 habe ich nur Daten aus November und Dezember. Beim November gibt es Darstellungsprobleme:

Ist:
1.PNG 2.PNG

Soll:
3.PNG

Hat jemand eine Idee?

736

Hallo Leute,

wollte mich mal mit der Highcharts geschichte beschäftigen. Leider bekomme ich es nicht zum Laufen.
Habe Highcharts 3.01 nach anleitung Hinzugefügt. Wenn ich den Config Script Ausführe, bekomme ich auch keine Fehler.
Die String Variable im Webfront ist aber leer.
Da ich keine Fehlermeldungen habe, weiss ich nicht wo ich suchen soll.

Oder habe ich was vergessen?

Gruß

737

Hat es mittlerweile einer geschafft und betreibt Highcharts über https? Wenn ja, wäre es super wenn er die Lösung zur Verfügung stellen könnte :slight_smile: Vielen Dank!

738

Hallo,
ist es möglich bei einem Click in eine Highchart den Zeitwert (X-Achsenwert) in eine IPS-Variable zu speichern?

Gruß Schuggi

739

Hi,

bin ich der einzige bei dem die Graphen nicht mehr funktionieren?

In der Variablen steht: <iframe src=’./user/IPS-Highcharts.php?ScriptId=33904’ width=100% height=310 frameborder=‚0‘ scrolling=‚no‘ ></iframe>

aber im Browser:
Highcharts4IPS Fehler: Aufruf-Parameter ‚ScriptId‘ fehlt

Die ScriptId ist ja nun da ??? eigenartig

Hat jemand eine Idee?

Ciao
HerbertF

740

War gerade 14 Tage im Urlaub und habe direkt nach meiner Rückkehr ein IPS-Update vorgenommen. Seitdem funktionieren die Highcharts bei mir auch nicht mehr.

Fehlermeldung ist:

Achtung! Fehlerhafte Parameter CfgFile bzw ScriptId