Highcharts - Multigraph

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

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

Hallo Community,

hier die Implementierung von Highcharts in IPS. Damit sind recht einfach sehr ansprechende Multicharts zu realisieren.
Highcharts ist für die nichtkommerzielle Nutzung frei, basiert auf Javascript und ist interaktiv. Ich finde die Ergebnisse lassen sich sehen und werten das WebFront enorm auf.

Was muss gemacht werden um das Ding zum Laufen zu bringen (ab V3.00):

[ol]
[li]IPS-Highcharts-Dateien aus Anhang herunterladen und entpacken.
[/li][li]Daraus die “IPS-Highcharts.php” in das“webfront/user/“ Verzeichnis kopieren
[/li][li]„Highcharts_Vxxxx“ Scripts in IPS einspielen
[/li][li]Eine String-Variable mit dem Profil ~HTMLBox anlegen
[/li][li]Einspielen und Parametrieren des ConfigScripts (siehe Anhang)
[/li][li]Starten des ConfigScripts
[/li][/ol]

optional: wenn man die Highchart-Scripte und jQuery lokal halten will:

[ol]
[li]Download der JavaScripts für Highcharts von highcharts.com
[/li][li]und heruntergeladenes ZIP (von highcharts.com) ins Verzeichnis „webfront/user” entpacken
[/li][li]In Config [‚Ips‘][‚ScriptsHighCharts‘] anpassen
[/li][/ol]

[ol]
[li]Download der JavaScripts für jQuery -->
[/li][li]in lokalen Verzeichnis ablegen und in Config [‚Ips‘][‚Scriptsjquery‘] anpassen
[/li][/ol]

Bis zur V2.0003 war der Ablauf folgendermaßen:

[ol]
[li]Download der JavaScripts für Highcharts von highcharts.com
[/li][li]und heruntergeladenes ZIP (von highcharts.com) ins Verzeichnis „webfront/user” entpacken
[/li][li]Aktuellste IPS-Highcharts-Dateien aus Anhang herunterladen und entpacken.
[/li][li]Daraus die “IPS_Template.php” in das“webfront/user/Highcharts“ Verzeichnis kopieren
[/li][li]„Highcharts_Vxxxx“ Scripts in IPS einspielen
[/li][li]Eine String-Variable mit dem Profil ~HTMLBox anlegen
[/li][li]Einspielen und Parametrieren des ConfigScripts (siehe Anhang)
[/li][li]Starten des ConfigScripts
[/li][/ol]
ChangeLog:

V1.0001

[ul]
[li]FIX: Keine Darstellung im Firefox
[/li][li]NEU: CfgDaten - Übernahme des Variablenprofils in die Einheit (Unit=NULL)
[/li][li]NEU: CfgDaten - Width und Height: Eingabe in px, bei Width=0 wird 100% verwendet
[/li][/ul]
V1.0002

[ul]
[li]NEU: Der komplette Highcharts-Parmeter-String (siehe auch Highcharts - Options Reference) kann über das Config-File-Script übergeben werden -> dadurch beliebige Anpassungen und Darstellungen möglich, u.a. Wunsch von @wgreipl (dynamische X-Achse) realisierebar
[/li][li]NEU: Wochentage, Monatsnamen auf Deutsch -> im IPS_Template.php
[/li][li]NEU: Im Tooltip wird zusättlich der Wochentag angezeigt
[/li][li]NEU: Möglichkeit des automatischen Aktualisierens der Daten beim Anzeigen der Content-HTML-Textbox (siehe hierzu am Ende des Config-Scripts) - alte Möglichkeit mit Übergabe der Daten in die tmp-Datei ist weiterhin funktionsfähig
[/li][/ul]
V1.0003

[ul]
[li]NEU: RunMode [Script oder File] über Parameter in CfgDaten einstellbar
[/li][li]NEU: CheckCfgDaten: Zum Prüfen bestimmter notwendiger Parameter im CfgDaten und Korrektur (wird in Config Script aufgerufen)
[/li][li]NEU: Einstellung per Config wann Werte als Stunden bzw. Tageswerte herangezogen werden (AggregatedValues)
[/li][li]NEU: AggregatedValues Einstellungen auch pro Serie möglich
[/li][li]NEU: AggregatedValues.MixedMode zum Kombinieren der Einstellungen (z.B.: x Tage alle Werte und danach x Tage nur Stunden Werte, usw.)
[/li][li]NEU: AggregatedValues.NoLoggedValues liest jetzt Werte bis zu diesem Zeitpunkt (zuvor wurden wenn der Zeitraum größer war wurden gar keine Werte gelesen)
[/li][li]FIX: IPS_Template.php: Umlaut im ‚März‘ wurde nicht richtig angezeigt
[/li][li]FIX: Deutsche Tage im Zeitraum
[/li][/ul]
V1.0004

[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]
V1.0005 (für IP-Symcon 2.5)

[ul]
[li]NEU: Pie-Charts: Automatisches Auslesen von AggValues, neuer Parameter: AggType und AggNameFormat
[/li][li]FIX: Aktueller Wert wird bei Zählern nicht eingeblesen
[/li][li]NEU: Darstellung von Zählern unabhängig von den Mixed Mode Einstellungen, z.B: als Column
[/li][/ul]
V1.0006

[ul]
[li]FIX: Sortieren der eingelesen Daten da sonst die aktuellste Highcharts Version 2.2.0 Probleme macht
[/li][li]NEU: Je Serie kann ein eigener Zeitbereich vorgeben werden („StartTime“ und „EndTime“)
[/li][li]NEU: von @Neon: „Offset“ je Serie, in Verbindung mit eigenem Zeitbereich ist es dadurch möglich die ein und selbe Variable zb. für den akt. Monat und Vormonat gleichzeitig darzustellen
[/li][li]NEU: von @Raketenschnecke: Je Serie kann optional über „RoundValue“ festgelegt werden auf wie viele Nachkommastellen gerundet werden soll
[/li][li]NEU: von @axelp : Je Serie kann optional über „ScaleFactor“ ein Skalierungsfaktor definiert werden
[/li][li]NEU: Konfigurationsmöglichkeiten für SubTitle („SubTitleDateTimeFormat“ und „SubTitleFormat“)
[/li][li]NEU: von @Raketenschnecke: Je Serie kann optional über „AggValue“ definiert werden welcher Value (Min, Max oder Avg) im Chart angezeigt wird
[/li][li]NEU: von @Raketenschnecke: Integration der Highcharts-PlotBands
[/li][li]NEU: Möglichkeit des Aufrufs als WFCPopup und der Darstellung von Highcharts in diesem Fenster.
[/li][li]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.
[/li][/ul]
V1.0007

[ul]
[li]FIX: Bugfix von V1.006 (AggType für Zählerwerte und AggregatedValues)
[/li][li]NEU: AggregatedValues können jetzt auch Weeks, Months und Years vorgegeben werden (Achtung! Die Parametrierungssystematik hat sich geändert (Beschreibung siehe Cfg-Script))
[/li][li]NEU: von @Raketenschnecke: Möglichkeit der Farbeinstellung für Achsen
[/li][/ul]
V2.00

[ul]
[li]Grundlegende Änderungen der Konfigurationsmöglichkeiten, dadurch sollten fast alle originalen Highcharts Parameter genutzer werden können. Eine genaue Beschreibung der nutzbaren Parameter ist hier zu finden Highcharts - Options Reference
[/li][li]V1.x Konfigurationen sollten weitestgehend unverändert oder durch kleiner Anpassungen laufen - Eine detaillierte Beschreibung der Änderungen ist hierzu finden
[/li][li]Achtung! Es die IPS_Template.php ausgetauscht werden. Dies ist nicht mit der V1.x kompatibel.
[/li][/ul]
V2.01

[ul]
[li]NEU: neues IPS_Template.php mit jquery 1.7.2
[/li][li]FIX: krsort durch array_reverse getauscht, da krsort Probleme beim json_encode macht
[/li][li]FIX: Tooltip bei ReplaceValues war fehlerhaft
[/li][li]FIX: Fehler beim Auswerten der AggregatedValues behoben
[/li][li]NEU: über ‚CreateConfigFileByPathAndFilename($stringForCfgFile, $path, $filename)‘ kann eine Tmp_datei mit bel. Namen geschrieben werden
[/li][li]Start- und Endzeitpunkt der X-Achse wurde automatisch um 5 Minuten korrigiert -> jetzt Start und Ende genau wie vorgegeben
[/li][/ul]
V2.02

[ul]
[li]NEU: Parameter [‚Ips‘][‚Dashboard‘] für die Darstellung im Dashboard
[/li][li]FIX: RunType=file: Wenn Highstock vorgewählt wurde wurde das tmp File nicht in die Highstock-Verzeichnis geschrieben
[/li][li]NEU: Integration Highstock: [‚navigator‘], [‚rangeSelector‘] und [‚scrollbar‘]
[/li][li]NEU: Integration Highstock: Zusätzliche series.type ‚candlestick‘ und ‚ohlc‘ erlauben
[/li][/ul]
V3.00

[ul]
[li]NEU: Entfernen der Prüfung des Highcharts-Types --> dadurch alle Highcharts-Charttypen verwendet werden können
[/li][li]NEU: Parameter falls Script Dateien lokal gehalten werden sollen: [‚Ips‘][‚ScriptsHighCharts‘],[‚Ips‘][‚ScriptsHighstock‘],[‚Ips‘][‚ScriptsTheme‘], [‚Ips‘][‚Scriptsjquery‘]
[/li][li]NEU: [‚Ips‘][‚HtmlScript‘] default = leer, dann wird der komplette HtmlCode erzeugt, kann aber auch
[/li][li]NEU: IPS-Highcharts.php ist die neue Template.php (kommt jetzt direkt in Users Verzeichnis)
[/li][li]NEU: [‚HighChart‘][‚AddScrips‘] Array von zusätzlichen Scripten (z.B.: higcharts-3d.js)
[/li][/ul]
V3.01

[ul]
[li]FIX: Umstellung auf IPS 4.0 -> $var[‚VariableValue‘][‚ValueType‘] --> $var[‚VariableValue‘]
[/li][li]FIX: Probleme mit Umlauten -> mb_detect_encoding an Stelle $item = utf8_encode($item);
[/li][/ul]
Schaut direkt beim Hersteller die Demos an, da bekommt man einen guten Eindruck was machbar ist (siehe Highcharts Demo Gallery).

Hier ist auch noch ein Linkmit welchen man die Performance der verschiedenen Chart-Typen gut testen kann.

Viel Spaß!

Anbei noch ein paar Screenshots zum „Heiß machen“…

Highcharts_V3.00.rar (18.8 KB)

Highcharts_V2.02.rar (20.9 KB)

Highcharts_V3.01.rar (20 KB)

Ganz simpel mit drei Variablen und passenden Profilen in IPS.
Ich hab den gleichen Container auf mehreren Seiten und blende ihn per Widget ein oder aus.

Hier übrigens ein Vergleich mit dem Graph vom RRD tool. Ich lass das Highchart jetzt mal so spasseshalber mitlaufen.

gruß
bb

Servus bernardo

Na wenns so schlimm ist, und du gar nimmer warten kannst, dann findest hier meine Scripts für BAR & PIE Plots.
Sie basierten auf KHCs Vorarbeit, sind aber wesentlich simpler aufgebaut.

Ich habs mir für die Darstellung von Betriebsstunden und Betriebskosten hardgecodet.
Die Daten werden (noch) nicht aus der Datenbank gelesen, sondern müssen als Variablen vorliegen.
Ich denke mal für diesen Anwendungszweck ist das einfacher und flexibler, denn ich mag kleine einfache (hardgecodete) Module oft lieber als komplexe ALL-IN-ONE Lösungen.

Installation und Konfiguration ist gleich wie das originale KHCs Highchart.
Wennst das schon hast brauchst nur mehr die untenstehenden Scripte anlegen und nach Lust und Laune parametrieren.
Konfiguration ist gleich wie beim Original und sollte eigentlich selbsterklärend sein.

Alle Higchart spezifischen Konfigurationsparameter sind in der gleiche Syntax wie auf der Highchart Supportseite Supportseite. und können nach belieben von dort per Copy&Paste eingefügt werden.

In den angehängten Scripten sind natürlich meine ID drinnen, die müssen natürlich an deine angepaßt werden.

Hier das Highchart Script:
sinnvollerweise sollte dies als Highchart_PIE_BAR gespeichert werden.

<?
	//--------------------------------------------------------------------------------------------------------------------------------
	// Für die Darstellung der Graphen wird das HTML5/JS Framework "Highcharts" der Fa. Highslide Software verwendet (www.highcharts.com)
	// Alle Rechte dieses Frameworks liegen bei Highslide Software
	// 'Highcharts' kann unter folgenden Bedinungen kostenlos eingesetzt werden:
	// 	Namensnennung — Sie müssen den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen.
	// 	Keine kommerzielle Nutzung — Dieses Werk bzw. dieser Inhalt darf nicht für kommerzielle Zwecke verwendet werden.
	// Download unter wwww.highcharts.com/download und die Dateien einfach in das Webfront
	// Demos siehe http://www.highcharts.com/demo/

	//--------------------------------------------------------------------------------------------------------------------------------
	// Changelog: V1.0001
	// 30.05.2011  KHC   FIX		Keine Darstellung im Firefox (embed -> iframe) und frameborder = 0 für Darstellung per iFrame
	// 30.05.2011  KHC   NEU  		Über Unit=NULL im Serien-Parmeter kann definiert werden, dass das VariableProfile von IPS als Tooltip verwendet wird
	// 30.05.2011  KHC   NEU      CfgDaten: Width und Height werden in px eingegeben und nicht mehr als String, bei width = 0 für 100% möglich
	// Changelog: V1.0002
	// 30.05.2001 	KHC   FIX      Wenn keine Series definiert sind - Fehler abgefangen (brauche ich noch später....)
	// 31.05.2011  KHC   NEU      Möglichkeit der Übergabe des vollständigen HighchartConfigStrings (bei keiner Übergabe wird der aktuelle als Defaul genommen)
	// 31.05.2011  KHC   NEU      "IPS_Template.php" - Format auf Deutsch (Tage, Monate)
	// 31.05.2011  KHC   NEU      Im Tooltip wird jetzt zusätzlich der Wochentag angezeigt
	// 03.06.2011  KHC   NEU      Möglichkeit dass beim Anzeigen der Textbox der Inhalt automatisch aktualisiert wird (siehe Bsp.) in Config Script
	// 03.06.2011  KHC   NEU         und dadurch 2 Möglichkeiten der Nutzung: 1. über Textfile, 2. über ScriptId.
	//--------------------------------------------------------------------------------------------------------------------------------


	//20.5.2011  BB:  Based on KHCs Highchart implementation this moded version to plot BAR & PIE Graph
	


	// ------------------------------------------------------------------------
	// WriteContentWithFilename
	//    Mit dieser Funktion wird der Content-String geschrieben.
	//    IN: $CfgDaten = ..
	//    IN: $tmpFilename = Der Dateiname welche die Config Daten enthält
	//    OUT: der erzeugte Config String
	// ------------------------------------------------------------------------
	function WriteContentWithFilename($CfgDaten, $tmpFilename)
	{
		// damit das Ding auch sauber dargestellt wird
		$Height = $CfgDaten["HighChart"]["Height"] + 16;

			SetValue($CfgDaten["ContentVariableId"], '<iframe src="./User/Highcharts/IPS_Template.php?CfgFile='. $tmpFilename.'" width="100%" height="'. $Height .'" frameborder="0" scrolling="no"></iframe>');
		}
	// ------------------------------------------------------------------------
	// WriteContentWithScriptId
	//    Mit dieser Funktion wird der Content-String geschrieben.
	//    IN: $CfgDaten = ..
	//    IN: $scriptId = Die Script Id welche den ConfigString enthält.
	//    OUT: der erzeugte Config String
	// ------------------------------------------------------------------------
	function WriteContentWithScriptId($CfgDaten, $Self)
	{
		// damit das Ding auch sauber dargestellt wird
		$Height = $CfgDaten["HighChart"]["Height"] + 16;

			if ($Self >= 0)
			SetValue($CfgDaten["ContentVariableId"], '<iframe src="./User/Highcharts/IPS_Template.php?ScriptId='. $Self.'" width="100%" height="'. $Height .'" frameborder="0" scrolling="no"></iframe>');
		else
			SetValue($CfgDaten["ContentVariableId"], 'Falsche Parameter beim Funktionsaufruf "WriteContentTextbox"');
	}

	// ------------------------------------------------------------------------
	// CreateConfigString
	//    Erzeugt den für Higcharts benötigten Config String und gibt diesen als String zurück
	//    IN: $CfgDaten = ..
	//    OUT: der erzeugte Config String
	// ------------------------------------------------------------------------
	function CreateConfigString($CfgDaten)
	{

		// Breite und Höhe anpassen
		if ($CfgDaten["HighChart"]["Width"] == 0)
			$CfgDaten["HighChart"]["Width"] ="100%";
		else
			$CfgDaten["HighChart"]["Width"] .="px";

		$CfgDaten["HighChart"]["Height"] .="px";

		// zusätzliche Daten für File (hat jetzt aber nichts mit den eigentlichen Highchart Config String zu tun
		// z.B.: Breite und Höhe für Container
		$AdditionalConfigData = trim(print_r($CfgDaten["HighChart"], true), "Array
()") ;

		// Zusätzliche Config in Highchart Config hinzufügren
	$StringForCfgFile = $AdditionalConfigData . "
|||
" .  $CfgDaten["AllConfigString"];
		return $StringForCfgFile;
	}

	// ------------------------------------------------------------------------
	// CreateConfigFile
	//    Erzeuegt das tmp-Higcharts Config-File
	//    IN: $stringForCfgFile = String welcher in das File geschrieben wird
	// ------------------------------------------------------------------------
	function CreateConfigFile($stringForCfgFile,$Self)
	{
		// Standarddateiname .....
//		Global $IPS_SELF;
		$tmpFilename = IPS_GetKernelDir() . "webfront\user\Highcharts\HighChartsCfg$Self.tmp";  	// für jede ScriptID wird eine eigene Tmp-Datei erzeugt

		// oder es wird einer übergeben
		//Global $FilenameFromExtern;
		//if ($FilenameFromExtern!=false)
		//	$tmpFilename = IPS_GetKernelDir() . "webfront\user\Highcharts\\" . $FilenameFromExtern;  	// für jede ScriptID wird eine eigene Tmp-Datei erzeugt

		// schreiben der Config Daten
		$handle = fopen($tmpFilename,"w");
		fwrite($handle, $stringForCfgFile);
		fclose($handle);

		return $tmpFilename;
	}
?>



dann ein Config File um PIE zu erzeugen:
Ich nenne es „Stromkosten_PIE“

<?

$CfgDaten = array();

// IPS Variablen ID´s
$CfgDaten["ArchiveHandlerId"]= 22801 /*[Archive Handler]*/; 	// Archive Handler
$CfgDaten["ContentVariableId"]=23666 /*[Programe\Highcharts\Aquarium\plot_Stromkosten_Pie\plot_Stromkosten_Pie]*/; // ID der Content-Variable
$CfgDaten["HighChartScriptId"]= 11712 /*[Programe\Highcharts\Highcharts_Pie]*/;  				// ID des Highcharts Scripts

// Übergabe als File oder ScriptID
$CfgDaten["File"]= true;

// Überschriften
$CfgDaten["Title"]= "Stromkosten";
$CfgDaten["SubTitle"]= NULL; // ""

// Alle 	$CfgDaten["HighChart"] Parameter werden an das IP_Template übergeben
$CfgDaten["HighChart"]["Theme"]="IPS.js";   // created by KHC

// Abmessungen des erzeugten Charts
$CfgDaten["HighChart"]["Width"] = 0; 	// in px,  0 = 100%
$CfgDaten["HighChart"]["Height"] = 300; 	// in px


$CfgDaten["PlotType"]= 'pie';

// add your Variables
$Dataset["Data"][1] = 25220 /*[Aquarium\Kosten\Energieverbrauch als Float\Filter]*/;
$Dataset["Data"][2] = 55859 /*[Aquarium\Kosten\Energieverbrauch als Float\Heizstab]*/;
$Dataset["Data"][3] = 24533 /*[Aquarium\Kosten\Energieverbrauch als Float\LED]*/;
$Dataset["Data"][4] = 52466 /*[Aquarium\Kosten\Energieverbrauch als Float\Licht Fensterseite]*/;
$Dataset["Data"][5] = 48116 /*[Aquarium\Kosten\Energieverbrauch als Float\Licht Raumseite]*/;
$Dataset["Data"][6] = 22648 /*[Aquarium\Kosten\Energieverbrauch als Float\Luftpumpe]*/;


$CfgDaten["Daten"]=Null;
$CfgDaten["Categories"]=Null;

foreach ($Dataset["Data"] as $tmp) {
$CfgDaten["Daten"] = $CfgDaten["Daten"].'["'.IPS_GetName($tmp).'",'.GetValue($tmp).'],'."
";
$CfgDaten["Categories"] = $CfgDaten["Categories"].'"'.IPS_GetName($tmp).'",'."
";
}

   $CfgDaten["AllConfigString"] = '
	title: {
				text: "'.$CfgDaten["Title"].'",
    			style: {
				  	font: "17px Arial, sans-serif",
               },
					align: "left",
					x: -10,
					
		},

   subtitle: {
				text: "'.$CfgDaten["SubTitle"].'",
				x: -10,
            y: 20
		},

	yAxis: {
         showLastLabel: true,
           },


 	xAxis: {
        lineWidth: 1,
        title: {
            text:""
        },

        categories: ['.$CfgDaten["Categories"].'],

    },


	 plotOptions: {
   	bar: {
   	      showInLegend: false,
		       allowPointSelect: true,

            series: {

        },
				dataLabels: {
        				enabled: true,
                	color: "#CCC",
						formatter: function() {
                    return this.point.y.toPrecision(3) + " Std.";
						}
				},


		 		},



		pie: {
         size: 110,
			 showInLegend: true,
		    enableMouseTracking: true,
				allowPointSelect: true,
            slicedOffset: 20,
            dataLabels: {
        				enabled: true,
                	color: "#CCC",
						formatter: function() {
                    return this.point.name + "  " + (parseFloat(this.point.y)*0.14).toPrecision(2)  + "Euro";
						}
				},

             point: {
                events: {
                    legendItemClick: function() {
                     var point = chart.series[0].data[this.x],y, y_tmp;

						  if (typeof point.y_tmp == "number" && point.y == 0) {
                     y = point.y_tmp;
      					  y_tmp =  null;
     						   $(point.dataLabel.element).show();
      					  $(point.connector.element).show();   ;
							}
                     else
    						{
    					    y = 0;
   			   	    y_tmp = point.y;
  					      $(point.dataLabel.element).hide();
  					      $(point.connector.element).hide();
 						   };
 							chart.series[0].data[this.x].update({y: y, y_tmp: y_tmp});
						  },
                },
				},
			 },
          },

   exporting: {
		enabled: false,
		},

    tooltip: {
               backgroundColor: {
                  linearGradient: [0, 0, 10, 40],
                  stops: [
                     [0, "rgba(166, 160, 150, .7)"],
                     [1, "rgba(29, 27, 21, .4)"]
                  ]
               },
               borderWidth: 0,
               style: {
                  color: "#FFF"
               },
               formatter: function() {
                  return "<b>"+ this.point.name +"</b><br/>"+
                      this.percentage.toPrecision(2) +"%";
               }
   },

	 series: [{
     type: "'.$CfgDaten["PlotType"].'",
	  data: ['.$CfgDaten["Daten"].'],

		 }]
	 });
 ';

 $CfgDaten["AllConfigString"];

//___________________________________________________________________________________

//  Ab hier nichts mehr ändern  !!
//  Code um Plot zum WF zu Senden

$s=IPS_GetScript($CfgDaten["HighChartScriptId"]);      // Id des Highcharts-Pie-Scripts
include($s['ScriptFile']);
if ($CfgDaten["File"]==false) {

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

  	$Height = $CfgDaten["HighChart"]["Height"] + 16;
   WriteContentWithFilename ($CfgDaten, $tmpFilename);        // und jetzt noch die ContentTextbox

}


?>

und noch eines für BAR:
nennt sich bei mir „Betriebsstunden_BAR“

<?

$CfgDaten = array();

// IPS Variablen ID´s
$CfgDaten["ArchiveHandlerId"]= 22801 /*[Archive Handler]*/; 	// Archive Handler
$CfgDaten["ContentVariableId"]=11588 /*[Programe\Highcharts\Aquarium\plot_Stromkosten_bar\plot_Stromkosten_BAR]*/; // ID der Content-Variable
$CfgDaten["HighChartScriptId"]= 11712 /*[Programe\Highcharts\Highcharts_Pie]*/;  				// ID des Highcharts Scripts

// Übergabe als File oder ScriptID
$CfgDaten["File"]= true;

// Überschriften
$CfgDaten["Title"]= "Betriebsstunden";
$CfgDaten["SubTitle"]= NULL; // "" 

// Alle 	$CfgDaten["HighChart"] Parameter werden an das IP_Template übergeben
$CfgDaten["HighChart"]["Theme"]="IPS.js";   // created by KHC

// Abmessungen des erzeugten Charts
$CfgDaten["HighChart"]["Width"] = 0; 	// in px,  0 = 100%
$CfgDaten["HighChart"]["Height"] = 290; 	// in px


$CfgDaten["PlotType"]= 'bar';


$Dataset["Data"][1] = 27686 /*[Aquarium\Kosten\Betriebsstunden\Filter]*/;
$Dataset["Data"][2] = 27934 /*[Aquarium\Kosten\Betriebsstunden\Heizstab]*/;
$Dataset["Data"][3] = 43124 /*[Aquarium\Kosten\Betriebsstunden\LED]*/;
$Dataset["Data"][4] = 30131 /*[Aquarium\Kosten\Betriebsstunden\Licht Fensterseite]*/;
$Dataset["Data"][5] = 37280 /*[Aquarium\Kosten\Betriebsstunden\Licht Raumseite]*/;
$Dataset["Data"][6] = 56631 /*[Aquarium\Kosten\Betriebsstunden\Luftpumpe]*/;



$CfgDaten["Daten"]=Null;
$CfgDaten["Categories"]=Null;

foreach ($Dataset["Data"] as $tmp) {
$CfgDaten["Daten"] = $CfgDaten["Daten"].'["'.IPS_GetName($tmp).'",'.GetValue($tmp).'],'."
";
$CfgDaten["Categories"] = $CfgDaten["Categories"].'"'.IPS_GetName($tmp).'",'."
";
}

   $CfgDaten["AllConfigString"] = '
	title: {
				text: "'.$CfgDaten["Title"].'",
    			style: {
				  	font: "17px Arial, sans-serif",
					},
				align: "left",
				x:-10,
		},

   subtitle: {
				text: "'.$CfgDaten["SubTitle"].'",
				x: -10,
            y: 20
		},

	yAxis: {
         showLastLabel: true,
         title: {
				text: ""
				},
           },


 	xAxis: {
        lineWidth: 1,
        title: {
            text:""
        },

        categories: ['.$CfgDaten["Categories"].'],

    },


	 plotOptions: {
   	bar: {
   	      showInLegend: false,
		       allowPointSelect: true,
	animation: {
                duration: 2000,
             
            },
            series: {
            
        },
				dataLabels: {
        				enabled: true,
                	color: "#CCC",
						formatter: function() {
                    return  this.point.y.toPrecision(3);
						}
				},
		      
		      
		 		},
		     				


		pie: {
		    showInLegend: true,
		    enableMouseTracking: true,
				allowPointSelect: true,
            slicedOffset: 20,
            dataLabels: {
        				enabled: true,
                	color: "#CCC",
						formatter: function() {
                    return this.point.name + "  " + (parseFloat(this.point.y)*0.14).toPrecision(2)  + "Euro";

						 
						}
				},

             point: {
                events: {
                    legendItemClick: function() {
                     var point = chart.series[0].data[this.x],y, y_tmp;

						  if (typeof point.y_tmp == "number" && point.y == 0) {
                     y = point.y_tmp;
      					  y_tmp =  null;
     						   $(point.dataLabel.element).show();
      					  $(point.connector.element).show();   ;
							}
                     else
    						{
    					    y = 0;
   			   	    y_tmp = point.y;
  					      $(point.dataLabel.element).hide();
  					      $(point.connector.element).hide();
 						   };
 							chart.series[0].data[this.x].update({y: y, y_tmp: y_tmp});
						  },
                },
				},
			 },
          },

   exporting: {
		enabled: false,
		},

    tooltip: {
               backgroundColor: {
                  linearGradient: [0, 0, 10, 40],
                  stops: [
                     [0, "rgba(166, 160, 150, .7)"],
                     [1, "rgba(29, 27, 21, .4)"]
                  ]
               },
               borderWidth: 0,
               style: {
                  color: "#FFF"
               },
               formatter: function() {
                  return "<b>"+ this.point.name +"</b><br/>"+
                      this.percentage.toPrecision(2) +"%";
               }
   },

	 series: [{
	  type: "'.$CfgDaten["PlotType"].'",
	  data: ['.$CfgDaten["Daten"].'],

		 }]
	 });
 ';

 $CfgDaten["AllConfigString"];

//___________________________________________________________________________________

//  Ab hier nichts mehr ändern  !!
//  Code um Plot zum WF zu Senden

$s=IPS_GetScript($CfgDaten["HighChartScriptId"]);      // Id des Highcharts-Pie-Scripts
include($s['ScriptFile']);
if ($CfgDaten["File"]==false) {

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

  	$Height = $CfgDaten["HighChart"]["Height"] + 16;
   WriteContentWithFilename ($CfgDaten, $tmpFilename);        // und jetzt noch die ContentTextbox

}

?>

Hier auch noch eine gepatchte „ips.js“ . Hab das original ein wenig umgebaut.
Obige Scripte sollte eigentlich auch mit der originalen laufen, habs aber nie probiert. Das originale KHZs Highchart läuft aber vermutlich nicht mit meiner gepatchten.
Im Zweifel mal die angehängte probieren. Um das original nicht zu beleidigen unter anderem Namen einspielen und in obigen Scripten den Namen entsprechend ändern.

/**
 * IPS theme for Highcharts JS
 * @author sanman
 */

Highcharts.theme = {
//	colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee", 
//		"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
	
		
	chart: {
		backgroundColor: 'transparent',
		borderWidth: 0,
		borderRadius: 0,
		plotBackgroundColor: null,
		plotShadow: false,
		plotBorderWidth: 0,
		renderTo: 'container',
		zoomType: 'xy'

	},
	credits: {
      enabled: false
    	},
	title: {
		style: { 
			color: '#FFF',
			font: 'normal 12px Arial, sans-serif'
		}
	},
	subtitle: {
		style: { 
			color: '#DDD',
			font: '12px Arial, sans-serif'
		}
	},
	xAxis: {
		endOnTick: false,
		gridLineColor: 'rgba(20, 150, 100, .2)',
		gridLineWidth: 1,
		minorGridLineColor: 'rgba(180, 190, 50, .05)',
        minorTickInterval: 'auto',
		minorGridLineWidth: 1,
		lineColor: '#999',
		tickColor: '#999',
		labels: {
			style: {
				color: '#999',
				fontWeight: 'light'
			}
		},
		title: {
			style: {
				color: '#AAA',
				font: 'bold 12px Arial, sans-serif'
			}				
		}
	},
	yAxis: {
		alternateGridColor: null,
		minorTickInterval: null,
		gridLineColor: 'rgba(20, 150, 100, .2)',
		gridLineWidth: 1,
		lineWidth: 0.5,
		tickWidth: 0,
		minorGridLineColor: 'rgba(180, 190, 50, .05)',
        minorTickInterval: 'auto',
		minorTickColor: 'rgba(180, 190, 50, .1)',
		minorTickWidth: 1,
		minorGridLineWidth: 1,
		minorTickLength: 3,	
		labels: {
			style: {
				color: '#999',
				fontWeight: 'normal'
			}
		},
		title: {
			style: {
				color: '#AAA',
				font: 'bold 12px Arial, sans-serif'
			}				
		}
	},
	legend: {
		borderColor: 'transparent',
		
		itemStyle: {
			color: '#CCC'
		},
		itemHoverStyle: {
			color: '#FFF'
		},
		itemHiddenStyle: {
			color: '#333'
		},
	},
	
	
	
	labels: {
		style: {
			color: '#CCC'
		}
	},
	tooltip: {
	enabled:true,
		crosshairs: [{
            width: 1,
            color: 'rgba(110, 180, 50, .5)'
			},
		{   width: 1,
            color: 'rgba(180, 190, 50, .5)'
        }],
		shadow: false,
		borderColor: 'rgba(0, 0, 0, 0)',
		backgroundColor: 'rgba(0, 0, 0, 0)',
		
		style: {
			color: 'rgba(0, 0, 0, 0)',
	//		padding: 10,
	//		font: 'light 8px Arial, sans-serif'
			
		}
	},
	
	plotOptions: {
		
				
		line: {
			dataLabels: {
				color: '#CCC'
				
			},
			marker: {
				lineColor: '#333'
			}
		},
		spline: {
			marker: {
				lineColor: '#333'
			}
		},
		scatter: {
			marker: {
				lineColor: '#333'
			}
		}
	},
	
	toolbar: {
		itemStyle: {
			color: '#CCC'
		}
	},
	
	navigation: {
		buttonOptions: {
			backgroundColor: {
				linearGradient: [0, 0, 0, 20],
				stops: [
					[0.4, '#606060'],
					[0.6, '#333333']
				]
			},
			borderColor: '#000000',
			symbolStroke: '#C0C0C0',
			hoverSymbolStroke: '#FFFFFF'
		}
	},
	
	exporting: {
		enabled: false,
		},	
//		buttons: {
//			exportButton: {
	//			symbolFill: '#55BE3B'
		//	},
		//	printButton: {
		//		symbolFill: '#7797BE'
		//	}
	//	} 
		
//	},	
	
	// special colors for some of the demo examples
//	legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
//	legendBackgroundColorSolid: 'rgb(70, 70, 70)',
//	dataLabelsColor: '#444',
//	textColor: '#E0E0E0',
//	maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);


Achtung: Das ist meine nur-für-mich gebaute test-Implementierung.
Es erfolgt keine Validierung der Parameter und Konstanten.
Alle IDs beziehen sich auf meine Umgebung und sind logischerweise anzupassen.

Ein schöne Installationsroutine zusammen mit einem neuen Datenbank basierendem Btriebsstundenzähler hab ich in Arbeit. Die Zeit ist aber im Moment etwas knapp, und ein dreiwöchiger Kroation Urlaub steht auch an. Vor Ende August ist an dessen eine Ferigstellung nichts zu denken.
Drum mal vorab obige Codes zum selberspielen.

Extrafeature: Tooltip im PIE Chart zeigt nicht den Absolutwert, sonderen den prozentualen Anteil der jeweiligen Variblen.
Klick in Legende blendet die jeweilige Variable aus und berechnet Prozentanteil neu.

Plots sehen so aus:

Bar.PNG

BAr_Klick_in-Legend.PNG

Pie.PNG

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']);