Highcharts - Multigraph

Da hier in den letzten Tagen so ausgiebig über Pies diskutiert wurde habe ich ein paar Ideen von bbernhard aufgenommen und in das vorhandene HighCharts Script eingebaut.

Changelog

[ul]
[li]NEU: Integration Pie-Charts
[/li][li]NEU: CfgDaten: Wenn „ContentVarableId“ = -1 und der Script unter der Content Variable angeordnet wird wird die ContentID selbständig ermittelt.
[/li][li]FIX: MixedMode. Wenn Zeitraum durch Berechnung kleiner als Startwert war, wurden diese Werte ebenfalls geladen
[/li][/ul]

Zum Download der V1.0004 …

sehr cool, klasse gemacht!
Danke KHC!

um zu zeigen das ich mich auch mit pie’s anfreunden kann mal ein Screenshot (IPS muss jetzt nur noch fleissig Daten sammeln):

IPS-Statistik

Update 17.03.2012 9 Uhr zur Visualisierung von Balken:

Hallo,

ich bin begeistert von Highcharts und den tollen Skripten drumherum. Hab es bei mir fast schon im produktiven Einsatz.

Um besser durch Raum und Zeit der Charts zu fliegen, hab ich mir in Anlehnung an die Bedienung der IPS-eingebauten Charts ein Auswahlbalken gebastelt, siehe Screenshot. Änderungen am Konfig-Skript sind minimal: nur Start und Ende.

Bei Interesse, so geht’s:
Variable HC_Zeitraum vom Typ Integer anlegen, Profil wie im Screenshot anbei. Alle positiven Werte werden zur Auswahl angezeigt - kann man sich also anpassen. Aktionsscript:

<?

$ENDPUNKT = GetValue(14844 /*[System\Highcharts\HC_Zeitraum\HC_EndPunkt]*/);

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

IDs im Skript entsprechend anpassen und darunter eine weitere Variable HC_EndPunkt anlegen (Typ: Integer).

In den Konfig-Skripts ist jetzt nur noch $CfgDaten[„StartTime“] und $CfgDaten[„EndTime“] durch folgendes zu ersetzen:


	// $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
	$ZeitRaum = GetValue(48796 /*[System\Highcharts\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 365:
		Case 90:
	   Case 180:
	      $AggType = 3;
	      Break;
		Default:
		$AggType = 0;
	};
	If ($ZeitRaum == 0) {$ZeitRaum = (8/24);};
	$EndPunkt = GetValue(14844 /*[System\Highcharts\HC_Zeitraum\HC_EndPunkt]*/);
	$CfgDaten["EndTime"] = time() + 60 * 60 * 24 * $ZeitRaum * $EndPunkt;
   $CfgDaten["StartTime"] = $CfgDaten["EndTime"] - 60 * 60 * 24 * $ZeitRaum;

RunMode habe ich auf „script“ geändert.

Einziges Problem: nach Klick auf Zeitauswahl im Webfront wird der Graph nicht automatisch neu gezeichnet (wie die eingebauten). Ich löse das bisher so, dass ich das Skript zur Aktualisierung unter die HTML-Box setze und händisch klicke.

Danke & Gruß,
Axel

VarProfil.GIF

Sooo … das sieht doch gar nicht schlecht aus! :wink:
Vielen Dank für das klasse Addon. :smiley:

Ich habe auf Basis deiner Arbeit mal einen „Fork“ gemacht. Werde dazu bald was freigeben :smiley:

Bild anbei :wink:

Hi Leute,

mir ist das zu ruhig in diesem Thread. Zu wenig Anwender, zu wenig Interessierte - dabei hat das Thema gerade in Verbindung mit IPS riesige Möglichkeiten.
Ich will daher ein wenig die Werbetrommel für KHC’s HC-Implementierung rühren und mal ein paar Beispiele aufzeigen (per Screenshot, reale Besipiele zum rumspielen auf www.raketenschnecke.net unter den Rubriken „Wetter“ und „RS.loc smart Metering“).

was sind für mich die Vorteile von HC?

[ul]
[li]unglaublich umfangreiches Customizing der Diagramme
[/li][li]Export als File auf einen weiteren Webserver -> damit nicht nur auf IPS beschränkt
[/li][li]sehr gute Doku der HC-Funktionen mit Webpräsenz zum live Ausprobieren
[/li][li]wenn man das Prinzip verstanden hat ist -zumindest in den Grundfunktionen die Anwendung mit KHC’s Script recht easy
[/li][li]die interaktivität der Diagramme ist der Hammer! man kann super einfach Graphen ausblenden, zoomen, sich per Hoover die Einzelwerte anzeigen lassen, das ist genau das was ich täglich brauche (neben der üblichen IPS-Dosis)
[/li][/ul]

Wo Licht ist, ist auch Schatten:

  • [li]mir fiel die Einarbeitung in die HC-Logik nicht ganz leicht
    [/li][li]ich hab „ganz“ spezielle Wünsche in der Umsetzung die ich momentan aus eigener Kraft nicht umgesetzt bekommen (nur zum Teil)
    [/li][li]Durch die ungeheure Funktionsvielfalt kann es schnell unübersichtlich werden
    [/li]… :rolleyes:

eine tolle Sache, besten dank auch an KHC für die Entwicklung und zur Verfügung stellen!

hier ein paar Beispiele:

*ups, da fällt mir auf: ich hab aktuell gar kein HC-Graphen im WFE, die Beispiele liegen alle auf meiner Webseite :smiley:

Thread der Übersicht halber aufgetrennt in Support-Thread und Script-Vorstellung „Highcharts - Multigraph V1.0“ (dieser Thread).

Fragen, Antworten und Support bitte nicht in diesem Thread sondern hier: LINK

Hallo (K)HC-Fans,

ich hab hier eine kleine Erweiterung für KHC’s HighChart-Implementierung gebaut. Es handelt sich um die Funktion „plotBands“, mit deren Hilfe man Farbbänder über den Diagramm-Hintergrund legen kann, z.B. um besondere Wertebereiche besonders hervor zu heben. HighCharts lässt dies jeweils unabhängig für die x- und y-Achse zu. Ich habe zunächst die y-Achse implementiert. Die folgende Beschreibung bezieht sich auf die KHC-Version 1.0005.

Features:

[ul][li]beliebige Anzahl von plotBands definierbar[]Definition der plotBands ist an die jeweilige yAchse gekoppelt[]plotBands skalieren dynamisch mit der jeweiligen y-Achse[]plotBands werden automatisch ausgeblendet, wenn die Achse den für das plotBand definierten Wertebereich nicht beinhaltet (siehe Bild 3 unten)[]jedes plotBand ist per Freitext beschriftbar (optional)
[/li][li]die Definition der plotBands in den y-Achsen ist optional und kann weggelassen werden (fördert durchaus die Übersichtlichkeit im Config-Script)
[/li][li]die plotBands werden automatisch ausgeblendet, wenn die dazugehörige y-Achse deaktiviert ist (siehe Bild2 unten)
[/li]
[/ul]

Installation:

  1. Einbau der plotBand-Option ins HighChart-Script: folgenden Code ins HighChart-Script (Funktion „CreateYAxis“, nach Zeile 747) einfügen:

if (array_key_exists ('plotBands', $Axis))
					$s .=" plotBands: ".$Axis["plotBands"].",";

wichtig ist, das der obige Code nicht nach der bereits vorhanden If-Bedingung (Zeile 748):


if (array_key_exists ('Unit', $Axis))
					$s .=" labels: {	formatter: function() { return this.value +' " . $Axis["Unit"]."'; }},";

eingefügt wird.

  1. Einbau der plotBand-Definitionen ins HighChart-ConfigScript:
    Man wählt die y-Achse aus, die man um die plotBand-Definitionen erweitern will
    Beispiel-y-Achse aus KHC’s-original-Scripts:

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

und hier der um die plotBand-Definitionen ergänzte Code (definiert sind 4 plotBands)


	// Y-Achsen
	$CfgDaten["yAxis"][] = array("Name" =>"Temperaturen", "Unit"=>"°C","Opposite"=>false,"TickInterval"=>5,
								"plotBands"=>"[
									 { // Eistag
										from: -20.0,
										to: 0.0,
										color: 'rgba(68, 170, 213, 0.1)',
										label:
										{
											text: 'Eistag',
											style:
											{
												color: '#606060'
											}
										}
									 },
									 { // kalter Tag
											from: 0.0,
											to: 15.0,
											color: 'rgba(255, 255, 0, 0.1)',
											label:
											{
												text: 'kalter Tag',
												style:
												{
													color: '#606060'
												}
											}
									 },
									 { // Sommertag
											from: 25.0,
											to: 30.0,
											color: 'rgba(255, 90, 0, 0.1)',
											label:
											{
												text: 'Sommertag',
												style:
												{
													color: '#606060'
												}
											}
									 },
									 { // heißer Tag
											from: 30.0,
											to: 50.0,
											color: 'rgba(255, 0, 0, 0.1)',
											label:
											{
												text: 'heißer Tag',
												style:
												{
													color: '#606060'
												}
											}
									 },
									]"
								);

Ergebnis:
Und zum Mund wässig machen noch ein paar Beispiele (aktuell auch für mich zum Ausprobieren hier live):

Beispiel1: Ansicht mit fast allen definierten plotBands

Beispiel2: selbes Diagramm, Ansicht mit ausgeblendeten Temperaturwerten => plotbands werden zusammen mit der nicht genutzten Temperatur-Achse ausgeblendet

Beispiel3: anderes Diagramm mit identischen plotBands–Definitionen, nur der aktuelle Wertebereicht ist eingeschränkt (und damit sind [bei dynamischer y-Achse] nicht alle plotBands sichtbar)

bitte Lösungsdiskussionen nur im Q&A-Thread!!!
wozu macht man sich die Mühe und schreibt das groß und breit über und unter die Threads?

Hier findet Ihr die Aufstellung der Änderungen von V1.x zur V2.0.

[ul]
[li]Einige Parameter wurden angepasst.
[/li][li]Es wurden die Original-Highchcarts Paremter in der ursprünglichen Schreibweise zu belassen - daher kann die Highcharts Dokumentation der API genutzt werden: Highcharts - Options Reference
[/li][li]Alle Original-Highchcarts Parameter beginnen mit Kleinbuchstaben.
[/li][li]Alle im IPS-Highchcarts-Script zusätzlich verwendeten Parameter beginnen mit Großbuchstaben.
[/li][li]Die Datenübergabe bei den Pies wurde überarbeitet und an die grundlegende Highcharts Systematik angepasst.
[/li][/ul]

Gegenüberstellung der geänderten / entfallenen Parameter:

HighChartCfg entfallen, durch neue Parmetrierungsmöglichkeiten können allen Einstellungen direkt gemacht werden
Name veraltet -> verwende [‚title‘][‚text‘]
SubTitle veraltet -> verwende [‚subtitle‘][‚text‘]
SubTitleDateTimeFormat veraltet -> verwende [‚subtitle‘][‚Ips‘][‚DateTimeFormat‘]
SubTitleFormat entfallen -> unnötiger Paramter, wird jetzt in [‚subtitle‘][‚text‘] angegeben

Im Bereich yAxis:
Name veraltet -> verwende [‚yAxis‘][‚name‘]
TitleText veraltet -> verwende [‚yAxis‘][‚name‘]
Min veraltet -> verwende [‚yAxis‘][‚min‘]
Max veraltet -> verwende [‚yAxis‘][‚max‘]
Opposite veraltet -> verwende [‚yAxis‘][‚opposite‘]
TickInterval veraltet -> verwende [‚yAxis‘][‚tickInterval‘]
PlotBands entfallen -> verwende [‚yAxis‘][‚plotBands‘]
YAxisColor entfallen -> verwende [‚yAxis‘][‚title‘][‚style‘]
TitleStyle entfallen -> verwende [‚yAxis‘][‚title‘][‚style‘]

Im Bereich serie:
Name veraltet -> verwende [‚series‘][‚name‘]
Param veraltet -> verwende [‚series‘]-Einstellungen (z.B.: [‚series‘][‚type‘], [‚series‘][‚yAxis‘], usw.)
Dataveraltet -> verwende [‚series‘][‚data‘]

Um die Konfigurationssystemaik von IPS-Highcharts V2.x besser zu veranschaulichen folgen hier ein paar Beispiele:

Um diese Beispiele zum laufen zu bekommen bitte wie folgt vorgehen:

[ul]
[li]String Variable (Profil ~HTML-String) anlegen[/li][li]darunter das „leere“ Konfigurationsscript aus diesem Anhang in IPS einfügen[/li][li]auf der selben Ebene einfach die einzlnen Beispiele (Bsp: …)[/li][/ul]

In den Beispielscript müssten dann noch in jedem Fall:

[ul]
[li]die Highcharts-Id eingetragen werden (im Bsp.Script ganz oben ‚HighChartScriptId‘)[/li][li]die entsprechenden Variablen-Ids ausgetauscht werden[/li][li]die Id des leeren Cfg-Scripts eingetragen werden (im Bsr.Script ganz unten)[/li][/ul]

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

leeres Cfg-Script - Aufruf durch einzelne Beispiele.ips.rar (3.93 KB)

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung als Columns.

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

   // ---->  hier muss EURE HighChartScriptId eingebenen werden
	$CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;  				// ID des Highcharts Scripts
	
  	// Überschriften
	$CfgDaten['title']['text']= "Columns";
	$CfgDaten['subtitle']['text']= "Photovoltaik Produktion: Jan. 2012"; 	// "" = Automatisch über Zeitraum
	$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)

	// Zeitraum welcher dargestellt werden soll
	$CfgDaten['StartTime'] = mktime(0,0,0, 1,1,2012); 
	$CfgDaten['EndTime'] = mktime(23,59,59, 1,31,2012);

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "script"; 	// file, script oder popup

	// Achse
	$CfgDaten["yAxis"][0]['title']['text'] = "Produktion";
	$CfgDaten["yAxis"][0]['Unit'] = "kWh";
	$CfgDaten["yAxis"][0]['opposite'] = false;

   // ---->  hier mussen in folge natürlich EURE Variablen IDs eingebenen werden
 	// Column
	$serie = array();
	$serie['Id'] = 33441 /*[Devices\SpecialDevices\WebLogPro\Akt-Werte\Aktuelle Werte\E_TOTAL]*/;
	$serie['name'] = "Photovoltaik - Produktion";
	$serie['Unit'] = "kWh";
	$serie['AggType'] = 1;  // Tageswerte
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 2;
	$serie['type'] = "column";
	$serie['yAxis'] = 0;
//	$serie['shadow'] = true;
	$CfgDaten["Series"][] = $serie;

   // ---->  hier muss die ScriptId des "leeren Cfg-Scripts" eingetragen werden
	$id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
	$s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
	include($s['ScriptFile']);

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung von Werten aus unterschiedlichen Zeiträumen (hier aktueller Monat, Vormonat und Vorjahr) in einem Chart.

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

  	$CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;  				// ID des Highcharts Scripts

	// Überschriften
	$CfgDaten['title']['text']= "Offset - Unterschiedliche Zeiträume in einem Chart";
	$CfgDaten['subtitle']['text']= "Temperaturen: %STARTTIME% + Vormonat + Vorjahr";
	$CfgDaten['subtitle']['Ips']['DateTimeFormat']= "M Y"; 				// z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

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

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "script"; 	// file, script oder popup

	// Tooltip anpassen
	$CfgDaten['tooltip']['shared']=true;
	$CfgDaten['tooltip']['crosshairs']=true;
	$CfgDaten['tooltip']['formatter']="";
	$CfgDaten['tooltip']['useHTML ']=true;
	$CfgDaten['tooltip']['valueSuffix ']= " °C";
	

	// y-Achse
	$CfgDaten["yAxis"][0]['title']['text'] = "Temperaturen2";
	$CfgDaten["yAxis"][0]['Unit'] = "°C";
	$CfgDaten["yAxis"][0]['opposite'] = true;
	$CfgDaten["yAxis"][0]['tickInterval'] = 5;
	$CfgDaten["yAxis"][0]['min'] = - 10;
	$CfgDaten["yAxis"][0]['max'] = 50;

	$pb['from'] = -10.0;
	$pb['to'] = 0.0;
	$pb['color'] = 'rgba(68, 170, 213, 0.1)';
	$pb['label']['text'] = 'Eistag';
	$pb['label']['style']['color'] = '#606060';
	$CfgDaten["yAxis"][0]['plotBands'][] = $pb;

	$pb['from'] = 0;
	$pb['to'] = 15;
	$pb['color'] = 'rgba(255, 255, 0, 0.1)';
	$pb['label']['text'] = 'kalter Tag';
	$pb['label']['style']['color'] = '#606060';
	$CfgDaten["yAxis"][0]['plotBands'][]= $pb;

	$pb['from'] = 25;
	$pb['to'] = 30;
	$pb['color'] = 'rgba(255, 90, 0, 0.1)';
	$pb['label']['text'] = 'Sommertag';
	$pb['label']['style']['color'] = '#606060';
	$CfgDaten["yAxis"][0]['plotBands'][]= $pb;

	$pb['from'] = 30;
	$pb['to'] = 50;
	$pb['color'] = 'rgba(255, 0, 0, 0.1)';
	$pb['label']['text'] = 'heißer Tag';
	$pb['label']['style']['color'] = '#606060';
	$CfgDaten["yAxis"][0]['plotBands'][]= $pb;



	// akt Monat
	$tStart1 = mktime(0,0,0, date("m", time()), 1, date("Y",time()));
	$tEnd1 = mktime(23,59,59, date("m", time())+ 1, 0, date("Y",time()));
	$offset1 =  0;

	//Vormonat
	$tStart2 = mktime(0,0,0, date("m", time())-1, 1, date("Y",time()));
	$tEnd2 = mktime(23,59,59, date("m", time())+1-1, 0, date("Y",time()));
	$offset2 =  -($tStart2 - $tStart1);

	//Vorjahr
	$tStart3 = mktime(0,0,0, date("m", time()), 1, date("Y",time())-1);
	$tEnd3 = mktime(23,59,59, date("m", time())+1, 0, date("Y",time())-1);
	$offset3 = -($tStart3 - $tStart1);

	// Zeitraum welcher dargestellt werden soll
	$CfgDaten["StartTime"] = $tStart1; 
	$CfgDaten["EndTime"] = $tEnd1; 

	// Serie - akt. Monat
	$serie = array();
	$serie['Id'] = 23960 /*[Devices\Aussen\Aussenthermostat Balkon\TEMPERATURE]*/;
	$serie['name'] = "Aktueller Monat";
	$serie['Unit'] = NULL;  // Einheit automatisch aus Variablenprofil
	$serie['AggType'] = 0;  // Stundenwerte
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 2;
	$serie['type'] = 'spline';
	$serie['step'] = false;
	$serie['yAxis'] = 0;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 2;
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['states']['hover']['enabled'] = true;
	$serie['marker']['states']['hover']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['radius'] = 4;
	$serie['marker']['states']['hover']['lineWidth'] = 1;
	$serie['StartTime'] = $tStart1;
	$serie['EndTime'] = $tEnd1;
	$serie['Offset'] = $offset1;
	$CfgDaten['series'][] = $serie;

	// Serie - Vormonat
	$serie = array();
	$serie['Id'] = 23960 /*[Devices\Aussen\Aussenthermostat Balkon\TEMPERATURE]*/;
	$serie['name'] = "Vormonat";
	$serie['Unit'] = NULL;  // Einheit automatisch aus Variablenprofil
	$serie['AggType'] = 0;  // Stundenwerte
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 2;
	$serie['type'] = 'spline';
	$serie['step'] = false;
	$serie['yAxis'] = 0;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 2;
	$serie['dashStyle '] = 'Dot';
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['states']['hover']['enabled'] = true;
	$serie['marker']['states']['hover']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['radius'] = 4;
	$serie['marker']['states']['hover']['lineWidth'] = 1;
	$serie['StartTime'] = $tStart2;
	$serie['EndTime'] = $tEnd2;
	$serie['Offset'] = $offset2;
	$CfgDaten['series'][] = $serie;

	// Serie - Vorjahr
	$serie = array();
	$serie['Id'] = 23960 /*[Devices\Aussen\Aussenthermostat Balkon\TEMPERATURE]*/;
	$serie['name'] = "Vorjahr";
	$serie['Unit'] = NULL;  // Einheit automatisch aus Variablenprofil
	$serie['AggType'] = 0;  // Stundenwerte
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 2;
	$serie['type'] = 'spline';
	$serie['step'] = false;
	$serie['yAxis'] = 0;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 2;
	$serie['dashStyle '] = 'ShortDot';
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['states']['hover']['enabled'] = true;
	$serie['marker']['states']['hover']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['radius'] = 4;
	$serie['marker']['states']['hover']['lineWidth'] = 1;
	$serie['StartTime'] = $tStart3;
	$serie['EndTime'] = $tEnd3;
	$serie['Offset'] = $offset3;
	$CfgDaten['series'][] = $serie;


	$id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
	$s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
	include($s['ScriptFile']);

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Pies.

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .



  	$CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;  				// ID des Highcharts Scripts

  // Überschriften
	$CfgDaten['title']['text']= "Pie - Daten aus gespeicherten Variable";
	$CfgDaten['subtitle']['text']= "Zeitraum: %STARTTIME% - %ENDTIME%"; 	// "" = Automatisch über Zeitraum
	$CfgDaten['subtitle']['Ips']['DateTimeFormat']= "M Y"; 			// z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

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

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "file"; 	// file, script oder popup

	$serie = array();
	$serie['Id'] = 33441 /*[Devices\SpecialDevices\WebLogPro\Akt-Werte\Aktuelle Werte\E_TOTAL]*/;
	$serie['name'] = "Photovoltaik - Produktion";
	$serie['Unit'] = "kWh";
	$serie['AggType'] = 3;  // jedes Stück des pies ist stellt ein Monat dar
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 1;
	$serie['type'] = 'pie';
	$serie['allowPointSelect'] = true;
	$serie['size'] = 220;
	$serie['cursor'] = 'pointer';
	$serie['center'] = array(300,300);
	$serie['dataLabels']['enabled'] = true;
	$CfgDaten['series'][] = $serie;



	$id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
	$s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
	include($s['ScriptFile']);

07-05-2012 08-06-27.png

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Pies.

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

Achtung! Der Tooltip für die Binären Werte funktioniert aktuell in diesem Beispiel nicht nicht so wie ich mir das vorstelle.


  	$CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;  				// ID des Highcharts Scripts

  // Überschriften
	$CfgDaten['title']['text']= "ReplaceValues - Drehgriffkontakte und TF-Kontakte";
	$CfgDaten['subtitle']['text']= "Zeitraum: %STARTTIME% - %ENDTIME%"; 	// "" = Automatisch über Zeitraum
	$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)

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

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "script"; 	// file, script oder popup

//	$CfgDaten['tooltip']['formatter'] = "@function() {return false;}@";
	$CfgDaten['tooltip']['formatter'] ="";
	$CfgDaten['tooltip']['valuePrefix'] = "";
	$CfgDaten['tooltip']['useHTML'] = true;
	$CfgDaten['tooltip']['xDateFormat'] = "%Y-%m-%d %H:%M";

	// Definition Y-Achsen
	$CfgDaten["yAxis"][0]['title']['text'] = "Temperaturen";
	$CfgDaten["yAxis"][0]['Unit'] = "°C";
	$CfgDaten["yAxis"][0]['opposite'] = false;
	$CfgDaten["yAxis"][0]['tickInterval'] = 5;
	$CfgDaten["yAxis"][0]['min'] = 0;
	$CfgDaten["yAxis"][0]['max'] = 40;

	$CfgDaten["yAxis"][1]['title']['text'] = "Luftfeuchte";
	$CfgDaten["yAxis"][1]['Unit'] = "%";
	$CfgDaten["yAxis"][1]['opposite'] = true;
	$CfgDaten["yAxis"][1]['min'] = 0;
	$CfgDaten["yAxis"][1]['max'] = 80;

	$CfgDaten["yAxis"][2]['title']['text'] = "Drehgriffkontakte / Türkontakte";
	$CfgDaten["yAxis"][2]['labels']['formatter'] = "@function() { if (this.value == 0) return 'geschlossen'; if (this.value == 1) return 'gekippt';if (this.value == 2) return 'geöffnet' }@";
	$CfgDaten["yAxis"][2]['opposite'] = true;
	$CfgDaten["yAxis"][2]['tickInterval'] = 1 ;
	$CfgDaten["yAxis"][2]['min'] = 0;
	$CfgDaten["yAxis"][2]['max'] = 8;

	// series
	$serie = array();
	$serie['Id'] = 23960;
	$serie['name'] = "Aussentemperatur";
	$serie['Unit'] = NULL;
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 1;
	$serie['type'] = 'spline';
	$serie['step'] = false;
	$serie['yAxis'] = 0;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 1;
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['enabled'] = true;
	$serie['marker']['states']['hover']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['radius'] = 4;
	$serie['marker']['states']['hover']['lineWidth'] = 1;
	$serie['tooltip']['valueSuffix'] = " °C";
	$CfgDaten['series'][] = $serie;

	$serie = array();
	$serie['Id'] = 11590;
	$serie['name'] = "Luftfeuchte";
	$serie['Unit'] = NULL;
	$serie['ReplaceValues'] = false;
	$serie['RoundValue'] = 1;
	$serie['type'] = 'spline';
	$serie['step'] = false;
	$serie['yAxis'] = 1;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 1;
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['enabled'] = true;
	$serie['marker']['states']['hover']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['radius'] = 4;
	$serie['marker']['states']['hover']['lineWidth'] = 1;
	$serie['tooltip']['valueSuffix'] = " %";
	$CfgDaten['series'][] = $serie;

	$serie = array();
	$serie['Id'] = 29410;
	$serie['name'] = "Tür/Fenster Kontakt";
	$serie['Unit'] = array(0=>'geschlossen', 1=>'geöffnet');
	$serie['ReplaceValues'] = array(0=>0, 1=>2);
	$serie['RoundValue'] = 1;
	$serie['type'] = 'line';
	$serie['step'] = true;
	$serie['yAxis'] = 2;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 1;
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['symbol'] = 'circle';
	$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['Id'] = 44451;
	$serie['name'] = "Drehgriffkontakt";
	$serie['Unit'] = array(0=>'geschlossen',1=>'gekippt',2=>'geöffnet');
	$serie['ReplaceValues'] =array(0=>0, 1=>1, 2=>2);
	$serie['RoundValue'] = 1;
	$serie['type'] = 'line';
	$serie['step'] = true;
	$serie['yAxis'] = 2;
	$serie['shadow'] = true;
	$serie['lineWidth'] = 1;
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['symbol'] = 'circle';
	$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;


	$id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
	$s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
	include($s['ScriptFile']);

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Pies welchem die Daten aus dem Cfg-Script übergeben werden…

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .


  	$CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;  				// ID des Highcharts Scripts

  // Überschriften
	$CfgDaten['title']['text']= "Pie - Datenübergabe aus Script";
	$CfgDaten['subtitle']['text']= " "; 	// "" = Automatisch über Zeitraum
	$CfgDaten['subtitle']['Ips']['DateTimeFormat']= "M Y"; 			// z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)

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

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "script"; 	// file, script oder popup

	// Tooltip abändern
	$CfgDaten['tooltip']['formatter'] = "@function() {
						return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';}@";

	// Übergabe der Werte an das Pie direkt übergebene Werte
	$serie = array();
	$serie['Unit'] = '';
	$serie['type'] = 'pie';
	$serie['name'] = 'Browser share';
	
	$serie['data'][] = ['Firefox',   45.0];
	$serie['data'][] = ['IE',       26.8];
	$serie['data'][] = array(
						'name'=> 'Chrome',
						'y'=> 12.8,
						'sliced'=> true,
						'selected'=> true
						);
	$serie['data'][] = ['Safari',    8.5];
	$serie['data'][] = ['Opera',     6.2];
	$serie['data'][] = ['Others',   0.7];

	$serie['allowPointSelect'] = true;
	$serie['cursor'] = 'pointer';
	$serie['size'] = 200;
	$serie['dataLabels']['enabled'] = true;
	$CfgDaten['series'][] = $serie;

	$id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
	$s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
	include($s['ScriptFile']);

08-05-2012 16-05-27.png

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Charts welches aus unterschiedlichen Serien-Typen besteht. Das Beispiel wurde aus der Highcharts-Demo-Gallery kopiert (JSON Originaleinstellungen siehe hier).

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

   // ---->  hier muss EURE HighChartScriptId eingebenen werden
	$CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;  				// ID des Highcharts Scripts

  	// Überschriften
	$CfgDaten['title']['text']= "Combination chart";
	$CfgDaten['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)

	// Zeitraum welcher dargestellt werden soll
	$CfgDaten['StartTime'] = 0;
	$CfgDaten['EndTime'] = 0;

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "script"; 	// file, script oder popup

	$CfgDaten['credits']['enabled'] = true;
	$CfgDaten['credits']['href'] = "http://www.highcharts.com/demo/combo";
	$CfgDaten['credits']['text'] = "... gehe zu Original-Highcharts-Beispiel @ Highcharts Demo Gallery";


	// Tooltip anpassen
	$CfgDaten['tooltip']['formatter'] = "@function() {
				var s;
				if (this.point.name) { // the pie chart
					s = ''+
						this.point.name +': '+ this.y +' fruits';
				} else {
					s = ''+
						this.x  +': '+ this.y;
				}
				return s;
			}@";
	$CfgDaten['tooltip']['formatter'] =" ";
	
	// X-Achse
	$CfgDaten['xAxis']['type'] = "linear";
	$CfgDaten['xAxis']['categories'] = ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'];
	$CfgDaten['xAxis']['min'] = false;     // mit false wird festgelegt, dass kein Min vorgegeben werden soll
	$CfgDaten['xAxis']['max'] = false;     // mit false wird festgelegt, dass kein Min vorgegeben werden soll
	
	// Y-Achse
	$axis = array();
	$axis['title']['text'] = "Y-Values";
	$axis['Unit'] = "";
	$CfgDaten['yAxis'][] = $axis;

	// Serien.....
	$serie = array();
	$serie['type'] = 'pie';
	$serie['name'] = 'Total consumption';
	$serie['data'] = 	[[
				"name"=> 'Jane',
				"y"=> 13,
				"color"=> '#4572A7' // Jane's color
			], [
				"name"=> 'John',
				"y"=> 23,
				"color"=> '#AA4643' // John's color
			], [
				"name"=> 'Joe',
				"y"=> 19,
				"color"=> '#89A54E' // Joe's color
			]];
	$serie['center'] = [100, 100];
	$serie['size'] = 100;
	$serie['showInLegend'] = false;
	$serie['dataLabels']['enabled'] = false;
	$CfgDaten['series'][] =$serie;

	// Beschriftung für pie
	$lbl['html'] ='Total fruit consumption';
	$lbl['style']['left'] = '40px';
	$lbl['style']['top'] = '8px';
	$lbl['style']['color'] = 'white';
   $CfgDaten['labels']['items'][] = $lbl;

	$serie = array();
	$serie['type'] = 'column';
	$serie['name'] = "Jane";
	$serie['data'] = 	[3, 2, 1, 3, 4];
	$CfgDaten['series'][] =$serie;
	
	$serie = array();
	$serie['type'] = 'column';
	$serie['name'] = "John";
	$serie['data'] = 	[2, 3, 5, 7, 6];
	$CfgDaten['series'][] =$serie;
	
	$serie = array();
	$serie['type'] = 'column';
	$serie['name'] = "Joe";
	$serie['data'] = 	[3, 2.67, 3, 6.33, 3.33];
	$CfgDaten['series'][] =$serie;


	$serie = array();
	$serie['type'] = 'spline';
	$serie['name'] = 'Average';
	$serie['data'] = [3, 2.67, 3, 6.33, 3.33];
	$CfgDaten['series'][] =$serie;


   // ---->  hier muss die ScriptId des "leeren Cfg-Scripts" eingetragen werden
	$id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
	$s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
	include($s['ScriptFile']);

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung eines Line-Charts with Data Labels. Das Beispiel wurde aus der Highcharts-Demo-Gallery kopiert (JSON Originaleinstellungen siehe hier).

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .


   // ---->  hier muss EURE HighChartScriptId eingebenen werden
	$CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;  				// ID des Highcharts Scripts

  	// Überschriften
	$CfgDaten['title']['text']= "Monthly Average Temperature";
	$CfgDaten['subtitle']['text']= "Source: WorldClimate.com";

	// Zeitraum welcher dargestellt werden soll
	$CfgDaten['StartTime'] = 0;
	$CfgDaten['EndTime'] = 0;

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "script"; 	// file, script oder popup

	$CfgDaten['credits']['enabled'] = true;
	$CfgDaten['credits']['href'] = "http://www.highcharts.com/demo/line-labels";
	$CfgDaten['credits']['text'] = "... gehe zu Original-Highcharts-Beispiel @ Highcharts Demo Gallery";


	// X-Achse
	$CfgDaten['xAxis']['type'] = "linear";
	$CfgDaten['xAxis']['categories'] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	$CfgDaten['xAxis']['min'] = false;     // mit false wird festgelegt, dass kein Min vorgegeben werden soll
	$CfgDaten['xAxis']['max'] = false;     // mit false wird festgelegt, dass kein Min vorgegeben werden soll

	// Y-Achse
	$axis = array();
	$axis['title']['text'] = "Temperature (°C)";
	$axis['Unit'] = "°C";
	$CfgDaten['yAxis'][] = $axis;

	// Tooltip anpassen
	$CfgDaten['tooltip']['enabled'] = false;
	
	$CfgDaten['tooltip']['formatter'] = "@function() {
				return '<b>'+ this.series.name +'</b><br/>'+
					this.x +': '+ this.y +'°C';			}@";

	$CfgDaten['plotOptions']['line']['dataLabels']['enabled'] = true;
	$CfgDaten['plotOptions']['line']['enableMouseTracking'] = false;

	// Serien.....
	$serie = array();
	$serie['type'] = 'line';
	$serie['name'] = 'Tokyo';
	$serie['data'] = 	[7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6];
	$CfgDaten['series'][] =$serie;

	$serie = array();
	$serie['type'] = 'line';
	$serie['name'] = 'London';
	$serie['data'] = 	[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8];
	$CfgDaten['series'][] =$serie;


   // ---->  hier muss die ScriptId des "leeren Cfg-Scripts" eingetragen werden
	$id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
	$s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
	include($s['ScriptFile']);

Hier ein Konfigurationsbeispiel für IPS-Highcharts V2.x zur Darstellung von einfachen Bars. Das Beispiel wurde aus der Highcharts-Demo-Gallery kopiert (JSON Originaleinstellungen siehe hier).

Bei Fragen zu den Beispielen bitte nicht in diesem Thread darauf eingehen -> sondern hier Q&A Highcharts V2.0 .

   // ---->  hier muss EURE HighChartScriptId eingebenen werden
	$CfgDaten['HighChartScriptId']= 42061 /*[_Highcharts\Chart\HighCharts]*/;  				// ID des Highcharts Scripts

  	// Überschriften
	$CfgDaten['title']['text']= "Historic World Population by Region";
	$CfgDaten['subtitle']['text']= "Source: Wikipedia.org";

	// Zeitraum welcher dargestellt werden soll
	$CfgDaten['StartTime'] = 0;
	$CfgDaten['EndTime'] = 0;

	// damit wird die Art des Aufrufes festgelegt
	$CfgDaten['RunMode'] = "script"; 	// file, script oder popup

	$CfgDaten['credits']['enabled'] = true;
	$CfgDaten['credits']['href'] = "http://www.highcharts.com/demo/bar-basic";
	$CfgDaten['credits']['text'] = "... gehe zu Original-Highcharts-Beispiel @ Highcharts Demo Gallery";


	// X-Achse
	$CfgDaten['xAxis']['type'] = "linear";
	$CfgDaten['xAxis']['categories'] = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'];
	$CfgDaten['xAxis']['title']['text'] = Null;
	$CfgDaten['xAxis']['min'] = false;     // mit false wird festgelegt, dass kein Min vorgegeben werden soll
	$CfgDaten['xAxis']['max'] = false;     // mit false wird festgelegt, dass kein Min vorgegeben werden soll
	// Y-Achse
	$axis = array();
	$axis['title']['min'] = 0;
	$axis['title']['text'] = "Population (millions)";
	$axis['align'] = "high";
	$CfgDaten['yAxis'][] = $axis;

	// Tooltip anpassen
	$CfgDaten['tooltip']['formatter'] = "@function() {
				return '' +	this.series.name +': '+ this.y +' millions';}@";

	$CfgDaten['plotOptions']['bar']['dataLabels']['enabled'] = true;

	// legend
	$CfgDaten['legend']['layout'] = 'vertical';
	$CfgDaten['legend']['align'] = 'right';
	$CfgDaten['legend']['verticalAlign'] = 'top';
	$CfgDaten['legend']['y'] = -100;
	$CfgDaten['legend']['y'] = 100;
	$CfgDaten['legend']['floating'] = true;
	$CfgDaten['legend']['borderWidth'] = 1;
	$CfgDaten['legend']['backgroundColor'] = '#FFFFFF';
	$CfgDaten['legend']['shadow'] = true;
	
	// Serien.....
	$serie = array();
	$serie['type'] = 'bar';
	$serie['name'] = 'Year 1800';
	$serie['data'] = 	[107, 31, 635, 203, 2];
	$CfgDaten['series'][] =$serie;

	$serie = array();
	$serie['type'] = 'bar';
	$serie['name'] = 'Year 1900';
	$serie['data'] = [133, 156, 947, 408, 6];
	$CfgDaten['series'][] =$serie;

	$serie = array();
	$serie['type'] = 'bar';
	$serie['name'] = 'Year 2008';
	$serie['data'] = 	[973, 914, 4054, 732, 34];
	$CfgDaten['series'][] =$serie;


   // ---->  hier muss die ScriptId des "leeren Cfg-Scripts" eingetragen werden
	$id = 40363 /*[_Highcharts\Beispiele\Highcharts 2.x Beispiele\leeres Cfg-Script - Aufruf durch einzelne Beispiele]*/;
	$s = IPS_GetScript($id);      // Id des Highcharts-Config-Scripts
	include($s['ScriptFile']);

Hi @ @ll,

von mir auch ein kleines Tippchen zum Thema „wie baue ich mir individuelle Tooltips?“

Grundsätzlich sollte man mit der HighChart-Dokumentation vertraut sein, denn hier kann man nicht nur die Bedeutung eines jeden Parameters nachlesen, sondern diesen auch direkt ausprobieren!

Da ich sehr intensiv mit eigenen Tooltips arbeite, haben sich bei mir mittlerweile einige Stanbdards etabliert.
Grundsätzlich lassen sich diese Standards in 2 Arten unterteilen:

1. non shared Tooltip
damit ist gemeint, das im Tooltip immer nur der Wert eines Graphen angezeigt wird, wenn man sich mit der maus über eindem der selben befindet (unabhängig davon, ob und wieviel weitere Graphen im Chart aktiv sind) -> siehe Bild 1:

2. shared Tooltip
damit ist gemeint, dass immer alle im Chart aktiven Graphen incl. der dazugehörigen Werte im Tooltip angezeigt werden. Siehe Bild 2:

Hinweis: ab HC V2.xx ist die Namenskonvention geändert worden. Je nach Version kann es sein, dass die unten gezeigten Codes nicht funktionieren (und ein „undefined“ als Einheit in den Tooltips auswerfen).
Un diesem Falls sollte der Anfangsbuchstabe der Keys „Name“, „Series“ und „Unit“ klein geschrieben werden.

wie komme ich nun zu diesen Tooltips und welche Parameter haben welche Wirkung?

1. non shared Tooltip
ich verwende folgenden Code, dieser sollte per c&p in jedem anderen Chart funktionieren:


	// Chart-Optionen "Tooltip"
   $CfgDaten['tooltip']['useHTML'] 							= true;
   $CfgDaten['tooltip']['shared'] 							= false;
   $CfgDaten['tooltip']['crosshairs'][] 					= array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
	$CfgDaten['tooltip']['crosshairs'][] 					= array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
   $CfgDaten['tooltip']['formatter'] 						= "@function() {var unit = {
																			'".@$CfgDaten['Series'][0]['Name']."': '".@$CfgDaten['Series'][0]['Unit']."',
																			'".@$CfgDaten['Series'][1]['Name']."': '".@$CfgDaten['Series'][1]['Unit']."',
																			'".@$CfgDaten['Series'][2]['Name']."': '".@$CfgDaten['Series'][2]['Unit']."',
																			'".@$CfgDaten['Series'][3]['Name']."': '".@$CfgDaten['Series'][3]['Unit']."',
																			'".@$CfgDaten['Series'][4]['Name']."': '".@$CfgDaten['Series'][4]['Unit']."',
																			'".@$CfgDaten['Series'][5]['Name']."': '".@$CfgDaten['Series'][5]['Unit']."',
																			'".@$CfgDaten['Series'][6]['Name']."': '".@$CfgDaten['Series'][6]['Unit']."',
																			'".@$CfgDaten['Series'][7]['Name']."': '".@$CfgDaten['Series'][7]['Unit']."',
																			'".@$CfgDaten['Series'][8]['Name']."': '".@$CfgDaten['Series'][8]['Unit']."',
																			'".@$CfgDaten['Series'][9]['Name']."': '".@$CfgDaten['Series'][9]['Unit']."',
																			'".@$CfgDaten['Series'][10]['Name']."': '".@$CfgDaten['Series'][10]['Unit']."',
																			'".@$CfgDaten['Series'][11]['Name']."': '".@$CfgDaten['Series'][11]['Unit']."',
																			'".@$CfgDaten['Series'][12]['Name']."': '".@$CfgDaten['Series'][12]['Unit']."',
																			}[this.series.name];
																			return '<b>' + Highcharts.dateFormat('%A, %d.%m.%Y, %H:%M', this.x) + ' Uhr</b><br>' + this.series.name
																						+ ': ' + '<b><span style=color:' + this.series.color + '>' + this.y
																						+ unit + '</b></span>';
																			}@";

die Elemente im „return“-String dieses Tooltips haben folgende Bedeutung (siehe Bild 3)

[ul][li]Highcharts.dateFormat(’%A, %d.%m.%Y, %H:%M’, this.x) => Datumsangabe (1. Zeile im Tooltip), mit HighCharts-Funktion formatioert (ähnlich wie „date“ in PHP). this.x ist der aktuelle Timestamp unter dem Mauszeiger[]’ Uhr
’ => Teilstring mit HTML-Formatierungselementen[
]+ => Verküpfungszeichen für Einzelelemente zu einem Gesamt-String (jedes Element muß zwingen mit ‚+‘ an die vorhergehenden Elemente angefügt werden)[]this.series.name => Klartext-Name des Graphen unter der Maus, dieser Entspricht dem Namen, der in "$serie[‚Name‘] =„Helligkeit“ angegeben wurde[]this.series.color => gibt die Farbe des Graphen unter der maus zurück, diese ist hier eingebettet in ein HTML-Formatierungselement „<span style=color:…“[]this.y => gibt den aktuellen Wert des Graphen unter der Maus zurück (z.B. „106“)[]unit => zuvor definiertes Array aller Maßeinheiten (siehe im Bild 3, „Block für definition der Einheiten“), hier wird die passend zum Graphen definierte Einheit zugeordnet[*]’’ => Abschluß der HTML-Formatierung für den Teilstring „Meßwert + Einheit“’’
[/li]
[/ul]

2. shared Tooltip
wie in Bild 2 gezeigt, werden in diesem Tooltip die Werte aller aktiven (!) Graphen im Chartangezeigt, und zwar passend zum Timestamp unter dem mauszeiger.
Ich empfehle, dieses Tooltip erst in Charts anzuwenden, in denen die Granularität der zeil. Auflösung >= 1Tag ist. Anderenfalls läuft man Gefahr, das die Timestamps der Einzelwerte nicht exakt gleich sind, in diesem Falle wird immer nur ein Teil aller Meßwerte im Tooltip angezeigt. Das kann nervig werden.

der Code:


	// Chart-Optionen "Tooltip"
   $CfgDaten['tooltip']['useHTML'] 							= true;
   $CfgDaten['tooltip']['shared'] 							= true;
   $CfgDaten['tooltip']['crosshairs'][] 					= array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
	$CfgDaten['tooltip']['crosshairs'][] 					= array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
	$CfgDaten['tooltip']['formatter'] 						= "@function() {
	                                                      var s;
															            var s = '<b>' + Highcharts.dateFormat('%b %Y', this.x) + '</b>';
															            $.each(this.points, function(i, point)
																				{var unit = {
																			'".@$CfgDaten['Series'][0]['Name']."': '".@$CfgDaten['Series'][0]['Unit']."',
																			'".@$CfgDaten['Series'][1]['Name']."': '".@$CfgDaten['Series'][1]['Unit']."',
																			'".@$CfgDaten['Series'][2]['Name']."': '".@$CfgDaten['Series'][2]['Unit']."',
																			'".@$CfgDaten['Series'][3]['Name']."': '".@$CfgDaten['Series'][3]['Unit']."',
																			'".@$CfgDaten['Series'][4]['Name']."': '".@$CfgDaten['Series'][4]['Unit']."',
																			'".@$CfgDaten['Series'][5]['Name']."': '".@$CfgDaten['Series'][5]['Unit']."',
																			'".@$CfgDaten['Series'][6]['Name']."': '".@$CfgDaten['Series'][6]['Unit']."',
																			'".@$CfgDaten['Series'][7]['Name']."': '".@$CfgDaten['Series'][7]['Unit']."',
																			'".@$CfgDaten['Series'][8]['Name']."': '".@$CfgDaten['Series'][8]['Unit']."',
																			'".@$CfgDaten['Series'][9]['Name']."': '".@$CfgDaten['Series'][9]['Unit']."',
																			}[point.series.name];
																			s += '<br>' + this.series.name + ': ' + '<b><span style=color:' + this.series.color + '>'
								 													+ Highcharts.numberFormat(this.y, 1, ',', '.') + unit + '</b></span>'
														             	});
																			return s;
																			}@";

die Elemente im „return s“-String dieses Tooltips haben folgende Bedeutung (siehe Bild 4)

[ul][li]Einzel-Elemente und deren Bedeutung identisch wie oben[*]Highcharts.numberFormat => HighCharts-Funktion zur Formatierung von Zahlen, ähnlich „numberformat“ in PHP. In diesem Fall wird der Meßwert (this.y) jedes Graphen formatiert: 1 nachkommastelle, Dezimalzeichen = „,“, Tausenderzeichen = „.“
[/li]

[/ul]

Anmerkung: beide Tooltips funktionieren nicht, wenn Pie’s im Spiel sind!

Hinweis: ab HC V2.xx ist die Namenskonvention geändert worden. Je nach Version kann es sein, dass die unten gezeigten Codes nicht funktionieren (und ein „undefined“ als Einheit in den Tooltips auswerfen).
Un diesem Falls sollte der Anfangsbuchstabe der Keys „Name“, „Series“ und „Unit“ klein geschrieben werden.