Hallo Raketenschnecke!
Vielen Dank.
Nu gehts.
Hab die Datei gefunden, in Themes kopiert.
Hintergrund schön Black, Linien schön kräftig farbig.
$CfgDaten['HighChart']['Theme']="ips.js";
Ich hatte nur die Zeile mit ips.js aktiviert, war aber in den Themes nicht vorhanden.
dark-green,gray.js usw. funktioniert auch.
Schönen Gruß:)
Egon
ich denke das Problem liegt hier an der Nutzung im Dashboard.
Ich denke da beißt sich wieder irgend etwas mit den Pfaden…
Im IP_Template wird das Theme weiterverarbeitet
// Verzeichnis + Theme
if ($AdditionalConfigData['Theme'] != '')
$AdditionalConfigData['Theme']= 'js/themes/' . $AdditionalConfigData['Theme'];
und
<script type="text/javascript" src="<?php echo $AdditionalConfigData['Theme'] ?>"></script>
und ich denke dass die Pfade im Dashboard etwas anders lauten…
Das selbe Phänomen habe ich auch wenn ich
http://192.168.0.5:82/User/Highcharts/IPS_Template.php?CfgFile=HighChartsCfg42914.tmp
extern über einen Browser aufrufe. (1.png)
Letztendlich will ich für bestimmte Zwecke via CutyCapt eine statische Grafik erzeugen die dann auf Grund der Transparenz so aussieht (2.png)
Aus irgendeinem Grund übernimmt er die ips.js nicht korrekt. Habe auch schon versucht diese url-hardcoded einzufügen was auch nichts änderte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<script type="text/javascript" src="js/themes/ips.js"></script>
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
Highcharts.setOptions({
lang: {
decimalPoint: ',',
months: ['Januar', 'Februar', 'M\u00e4rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
}
});
$(document).ready(function() {
chart = new Highcharts.Chart({
chart:{zoomType:'x',animation:false,renderTo:'container'},credits:{enabled:true,href:'',text:'greipl-it.de',position:{align:'right',x:-10,verticalAlign:'top',y:15}},legend:{borderRadius:0,borderColor:'#1b2b3b',shadow:true},exporting:{enabled:false,buttons:{printButton:{enabled:false}}},title:{text:'Heizung 2.0'},subtitle:{text:'Zeitraum: (Di) 22.05.2012 00:00 - (Mi) 23.05.2012 23:59'},tooltip:{useHTML:true,shared:true,crosshairs:[{width:1,color:'grey',dashStyle:'dashdot'},{width:1,color:'grey',dashStyle:'dashdot'}],formatter:function() {var s = '<b>' + Highcharts.dateFormat('%H:%M', this.x) +'<\/b>'; $.each(this.points, function(i, point) { var unit = {'Gasverbrauch': 'm\u00b3','Kessel': '\u00b0C','Solar R\u00fccklauf': '\u00b0C','Solar Vorlauf': '\u00b0C','Warmwasser R\u00fccklauf': '\u00b0C','Warmwasser Vorlauf': '\u00b0C','': '',}[this.series.name]; s += '<br\/>' + '<b><span style=color:' + point.series.color + '>' + point.series.name +': <\/span><\/b>' + point.y + unit; }); return s; }},xAxis:{type:'datetime',dateTimeLabelFormats:{second:'%H:%M:%S',minute:'%H:%M',hour:'%H:%M',day:'%e. %b',week:'%e. %b',month:'%b %y',year:'%Y'},allowDecimals:false,min:Date.UTC(2012,4,22,00,00,00),max:Date.UTC(2012,4,23,23,59,59)},yAxis:[{title:{text:'Gasverbrauch',style:{color:'#FFFF00'}},Unit:'m\u00b3',opposite:false,tickInterval:0.1,min:0,max:1.2,labels:{style:{color:'#FFFF00'},formatter:function() { return this.value +' m\u00b3'; }}},{title:{text:'Temperatur',style:{color:'#FF0000'}},Unit:'\u00b0C',opposite:true,tickInterval:5,min:0,max:null,labels:{style:{color:'#FF0000'},formatter:function() { return this.value +' \u00b0C'; }},plotBands:[{zIndex:null,from:0,to:30,color:'rgba(0, 0, 255, 0.1)',label:{text:'Kalt',align:'right',x:-10,style:{color:'#606060'}}},{zIndex:null,from:30,to:50,color:'rgba(255, 0, 127, 0.1)',label:{text:'Warm',align:'right',x:-10,style:{color:'#606060'}}},{zIndex:null,from:50,to:80,color:'rgba(255, 0, 0, 0.2)',label:{text:'Hei\u00df',align:'right',x:-10,style:{color:'#606060'}}}]}],series:[{Id:42353,type:'area',zIndex:10,color:'#FFFF00',step:true,yAxis:0,shadow:true,lineWidth:0,states:{hover:{lineWidth:2}},marker:{enabled:false,states:{hover:{enabled:true,symbol:'circle',radius:4,lineWidth:1}}},name:'Gasverbrauch',data:[[Date.UTC(2012,4,22,00,00,00),0],[Date.UTC(2012,4,22,09,35,37),0],[Date.UTC(2012,4,22,09,39,25),0.3],[Date.UTC(2012,4,22,09,41,25),0.6],[Date.UTC(2012,4,22,09,43,25),0.3],[Date.UTC(2012,4,22,09,45,25),0],[Date.UTC(2012,4,23,11,27,30),0],[Date.UTC(2012,4,23,15,33,40),0]]},{Id:48704,type:'line',zIndex:5,color:'#FF0000',step:false,yAxis:1,shadow:true,lineWidth:1,states:{hover:{lineWidth:2}},marker:{enabled:false,states:{hover:{enabled:true,symbol:'circle',radius:4,lineWidth:1}}},name:'Kessel',data:
Data entfernt wegen Menge
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
</body>
</html>
Sorry, stimmt.
Aber auch mit dem neuen sieht es nicht besser aus 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="js/themes/gray.js"></script>
<script type="text/javascript" src="js/themes/grid.js"></script>
<script type="text/javascript" src="../../js/themes/ips.js"></script>
-->
<script type="text/javascript" src="../../js/themes/ips.js"></script>
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
Highcharts.setOptions({lang:{decimalPoint:',',thousandsSep:'.',months:['Januar','Februar','M\u00e4rz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],shortMonths:['Jan','Feb','M\u00e4r','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],weekdays:['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag']}});
$(document).ready(function() {
chart = new Highcharts.Chart({
chart:{zoomType:'x',animation:false,renderTo:'container'},credits:{enabled:true,href:'',text:'greipl-it.de',position:{align:'right',x:-10,verticalAlign:'top',y:15}},legend:{borderRadius:0,borderColor:'#1b2b3b',shadow:true},exporting:{enabled:false,buttons:{printButton:{enabled:false}}},title:{text:'Heizung 2.0'},subtitle:{text:'Zeitraum: (Di) 22.05.2012 00:00 - (Mi) 23.05.2012 23:59'},tooltip:{useHTML:true,shared:true,crosshairs:[{width:1,color:'grey',dashStyle:'dashdot'},{width:1,color:'grey',dashStyle:'dashdot'}],formatter:function() {var s = '<b>' + Highcharts.dateFormat('%H:%M', this.x) +'<\/b>'; $.each(this.points, function(i, point) { var unit = {'Gasverbrauch': 'm\u00b3','Kessel': '\u00b0C','Solar R\u00fccklauf': '\u00b0C','Solar Vorlauf': '\u00b0C','Warmwasser R\u00fccklauf': '\u00b0C','Warmwasser Vorlauf': '\u00b0C','': '',}[this.series.name]; s += '<br\/>' + '<b><span style=color:' + point.series.color + '>' + point.series.name +': <\/span><\/b>' + point.y + unit; }); return s; }},xAxis:{type:'datetime',dateTimeLabelFormats:{second:'%H:%M:%S',minute:'%H:%M',hour:'%H:%M',day:'%e. %b',week:'%e. %b',month:'%b %y',year:'%Y'},allowDecimals:false,min:Date.UTC(2012,4,22,00,00,00),max:Date.UTC(2012,4,23,23,59,59)},yAxis:[{title:{text:'Gasverbrauch',style:{color:'#FFFF00'}},Unit:'m\u00b3',opposite:false,tickInterval:0.1,min:0,max:1.2,labels:{style:{color:'#FFFF00'},formatter:function() { return this.value +' m\u00b3'; }}},{title:{text:'Temperatur',style:{color:'#FF0000'}},Unit:'\u00b0C',opposite:true,tickInterval:5,min:0,max:null,labels:{style:{color:'#FF0000'},formatter:function() { return this.value +' \u00b0C'; }},plotBands:[{zIndex:null,from:0,to:30,color:'rgba(0, 0, 255, 0.1)',label:{text:'Kalt',align:'right',x:-10,style:{color:'#606060'}}},{zIndex:null,from:30,to:50,color:'rgba(255, 0, 127, 0.1)',label:{text:'Warm',align:'right',x:-10,style:{color:'#606060'}}},{zIndex:null,from:50,to:80,color:'rgba(255, 0, 0, 0.2)',label:{text:'Hei\u00df',align:'right',x:-10,style:{color:'#606060'}}}]}],series:[{Id:42353,type:'area',zIndex:10,color:'#FFFF00',step:true,yAxis:0,shadow:true,lineWidth:0,states:{hover:{lineWidth:2}},marker:{enabled:false,states:{hover:{enabled:true,symbol:'circle',radius:4,lineWidth:1}}},name:'Gasverbrauch',data:[[Date.UTC(2012,4,22,00,00,00),0],[Date.UTC(2012,4,22,09,35,37),0],[Date.UTC(2012,4,22,09,39,25),0.3],[Date.UTC(2012,4,22,09,41,25),0.6],[Date.UTC(2012,4,22,09,43,25),0.3],[Date.UTC(2012,4,22,09,45,25),0],[Date.UTC(2012,4,23,11,27,30),0],[Date.UTC(2012,4,23,21,01,56),0]]},{Id:48704,type:'line',zIndex:5,color:'#FF0000',step:false,yAxis:1,shadow:true,lineWidth:1,states:{hover:{lineWidth:2}},marker:{enabled:false,states:{hover:{enabled:true,symbol:'circle',radius:4,lineWidth:1}}},name:'Kessel',data
---> DATA gelöscht.
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
</body>
</html>
Tach,
stelle gerade meine Charts auf 2.0 um und habe noch Schwierigkeiten mit den Pies. Ich möchte ein Pie mit eigenen Werten darstellen, also nicht einfach eine Variable ans Skript übergeben. Wie geht das? Früher konnte man eine Werte- und eine Labelreihe übergeben. Kann mich jemand auf den richtigen Pfad bringen? Die Werte schaff ich noch, aber statt der Labels wird nur „Slice“ angezeigt.
Aus der HighCharts-Doku werde ich nicht schlau, raffe ehrlich gesagt schon nicht ob ein String oder Array übergeben wird.
Danke & Gruß, Axel
Hi Alex,
hier sind zwei Beispiele wie Du mit HC 2.x Pies erzeugst
Beispiel Pie - gespeicherte Variable
Beispiel Pie - mit eigenen Daten füllen
Grüße KHC
Danke, das hatte ich gesucht - der 2. Link war ein Volltreffer.
Grüße, Axel
Hallo,
Danke für dne Hinweiss, jetzt hab ich wenigstens wieder die schönen dunkel Farben. Die ips.js hab ich nun hier nicht mehr gefunden, aber meine alte aus dem IPS-Backup genommen, damit läuft es nun.
Jetzt kann ich mich an die Umstellen machen, komischerweise laufen die alten Scripte aus V1 mehr oder weniger problemlos, aber die einzige, welche ich neu erstellt hab, zeigt nichts an. Mal schauen, was das TV-Programm heute bringt…
EDIT: Fehler gefunden, v2 läuft nun auch mit den ersten beiden Graphen und die restlicher werden ich nun nach und nach auch umstellen bzw. einzelen noch komplett umbauen, hab bei irgentjemanden noch was schönes gesehen - ein Graph über den IPS-Status ( Datenbankgrösse, Anzahl Variable usw. ), hab ich zwar auch schon, aber mir gefallen die Differenzwerte als Balkendiagramm darun plus die PIE
Problem war, ich hatte zwar schön eine PIE konfiguriert, aber den eigentlichen Graphen nicht 
Hallo zusammen,
ich habe eine grundsätzliche Frage zu den Highcharts. Bin ich auf den ArchiveHandler von IPS angewiesen, oder kann ich auch Daten aus einer mySQL Datenbank grafisch darstellen?
Danke und Guß,
Christoph
immer über den IPS-Archive-Handler
Kopfkratz…nachdenk…
ich glaube, jetzt verstehe ich erst Deine Frage: Du kannst im Konfig-Script auch eigene Rohdaten im Array-Format zuführen. Doku ist im Konfig-Script vorhanden
Und noch ein Beispiel für extern zugeführte Daten:
// Feuchte Max
$rawData = AC_GetAggregatedValues($CfgDaten["ArchiveHandlerId"], 17960 /*[Wetterdaten RS.loc\Außen\SZ HM Aussenthermometer WEATHER\Nord-West %]*/, 1, $CfgDaten["StartTime"], $CfgDaten["EndTime"], 1);
//print_r($rawData);
$HC_Data[0]["Value"] = $rawData[0]['Max'];
$HC_Data[0]["TimeStamp"] = $rawData[0]['MaxTime'];
$serie = array(//"Id"=>17960,
"Data" => $HC_Data,
Bisher nutze ich die Logging Funktion von IPS überhaupt nicht, ich logge alles in eine mySQL Datenbank. Die Frage war also so gemeint, ob ich die IPS DB in Zukunft nutzen muss, wenn ich Highcharts haben möchte, oder ob ich die Daten irgendwie auch aus meiner mySQL DB ziehen kann.
du kannst auch die Daten selbst aus der SQL_Datenbank lesen und an den Highcharts Script übergeben.
Beispiel:
$lastValue = rand (0, 30);
for ($i = 0; $i <=100 ; $i++)
{
$DataForSerie[] = array("TimeStamp"=>$CfgDaten["StartTime"] + $i * 60 * 60, "Value"=>$lastValue);
$min = $lastValue -5; $max = $lastValue + 5;
$lastValue = rand ($min,$max);
}
$serie = array("Id"=>0, "Name" =>"Manueller Werte 1", "Unit"=>"°C", "ReplaceValues"=>false);
$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['data'] = $DataForSerie;
$CfgDaten["Series"][] = $serie;
$serie = array("Name" =>"Manueller Werte 2", "Unit"=>"°C", "ReplaceValues"=>false);
$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['data'][] = array("TimeStamp"=>mktime(9,0,0,5,2,2012), "y"=>18); // Uhrzeit wird über TimeStamp als PHP Wert vorgegeben
$serie['data'][] = array("TimeStamp"=>mktime(10,0,0,5,2,2012), "y"=>19);
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,9,9,00)@", "y"=>21); // Uhrzeit wird als UTC-Time übergeben (Achtung Monat -1)
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,10,10,00)@", "y"=>25);
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,11,11,00)@", "y"=>19);
$serie['data'][] = array("@Date.UTC(2012,4,4,11,11,00)@", 10);
$serie['data'][] = "@[Date.UTC(2012,4,4,19,00,00),21]@"; // hier wird alles direkt übergeben
$serie['data'][] = "@[Date.UTC(2012,4,4,20,00,00),19]@";
$serie['data'][] = "@[Date.UTC(2012,4,4,31,00,00),25]@";
$CfgDaten["Series"][] = $serie;
Hallo zusammen,
ich bekomme die HighCharts leider nicht zum Laufen. Die HTML Box für die HighCharts bleibt schwarz
Mit dem Archive-Handler kann ich nicht testen, da in diesem bei mir keine Daten enthalten sind.
khc, wenn ich deinen PHP-Code richtig interpretieren, werden hier Zufallsdaten erzeugt. Leider weiß ich nicht, wo ich diesen Code genau einfügen muss. Kann mir jemand das entsprechende Config-Script posten? Das wäre nett.
Gruß,
Christoph
steht oben in meinem Beispiel drin:
$HC_Data[0]["Value"] = $rawData[0]['Max'];
$HC_Data[0]["TimeStamp"] = $rawData[0]['MaxTime'];
$serie = array(//"Id"=>17960,
"Data" => $HC_Data,
Vielen Dank für Deine Hilfe, aber Dein Beispiel oben verweist auf den ArchiveHandler …
Ich komme leider nicht weiter. Meine Config-Datei sieht nun so aus:
<?php
// bei der Konfiguration unbedingt auf die Groß/Kleinschreibung achten
// es wurde versucht folgende Namensgebeung in der Konfiguration zu verwenden
// Parameter mit kleinen Anfangsbuchstaben = Parameter welche von Highcharts übnernommen wurden. Siehe dazu: http://www.highcharts.com/ref/
// Parameter mit großen Anfangsbuchstaben = für das IPS-Highcharts-Script eingeführte Parameter
Global $CfgDaten; // damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden
// IPS Variablen ID´s
$CfgDaten['ContentVarableId']= 46251 /*[Allgemein\Highcharts\Highcharts]*/; // ID der String Variable in welche die Daten geschrieben werden (-1 oder überhaupt nicht angeben wenn die Content Variable das übergordnete Element ist)
$CfgDaten['HighChartScriptId']= 14265 /*[Allgemein\Highcharts\Highcharts_V2.02]*/; // ID des Highcharts Scripts
// Highcharts oder Highstock (default = Highcharts
$CfgDaten['Ips']['ChartType'] = 'Highcharts';
// Zeitraum welcher dargestellt werden soll (kann durch die Zeitvorgaben in den Serien verändert werden)
$CfgDaten['StartTime'] = mktime(0,0,0, date("m", time()), date("d",time())-10, 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, popup
if ($CfgDaten['RunMode'] == "popup")
{
$CfgDaten['WebFrontConfigId'] = 26841;
$CfgDaten['WFCPopupTitle'] = "Ich bin der Text, welcher als Überschrift im Popup gezeigt wird";
}
// Übergabe der IP-Adresse und des Ports für die Darstellung im Dashboard
// Wichtig! Wenn Darstellung in Webfront diese Variablen auskommentieren
//$CfgDaten['Ips']['Dashboard']['Ip'] = "127.0.0.1";
//$CfgDaten['Ips']['Dashboard']['Port'] = "82";
// Serienübergreifende Einstellung für das Laden von Werten
$CfgDaten['AggregatedValues']['HourValues'] = -1; // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
$CfgDaten['AggregatedValues']['DayValues'] = -1; // ist der Zeitraum größer als X Tage werden Tageswerte geladen
$CfgDaten['AggregatedValues']['WeekValues'] = -1; // ist der Zeitraum größer als X Tage werden Wochenwerte geladen
$CfgDaten['AggregatedValues']['MonthValues'] = -1; // ist der Zeitraum größer als X Tage werden Monatswerte geladen
$CfgDaten['AggregatedValues']['YearValues'] = -1; // ist der Zeitraum größer als X Tage werden Jahreswerte geladen
$CfgDaten['AggregatedValues']['NoLoggedValues'] = 1000; // ist der Zeitraum größer als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen $CfgDaten['AggregatedValues']['MixedMode'] = false; // alle Zeitraumbedingungen werden kombiniert
$CfgDaten['AggregatedValues']['MixedMode'] = false;
// Systematik funktioniert jetzt additiv. D.h. die angegebenen Werte gehen ab dem letzten Wert
//
// -5 Tage -3 Tage EndTime
// | | | |
// | |DayValue = 2 |HourValues = 3 |
// |Tageswerte |Stundenwerte |jeder geloggte Wert |
// **************************************************************************************
// *** Highcharts Options ***
// **************************************************************************************
// Ab hier werden die Bereiche des Highchart-Objektes parametriert.
// Dieser Bereich wurde (soweit möglich) identisch der Originalstruktur gehalten.
// Informationen über die Parametrierung findet man unter http://www.highcharts.com/ref/
// **************************************************************************************
// *** chart *** http://www.highcharts.com/ref/#chart
// **************************************************************************************
// $CfgDaten['chart']['zoomType'] = "'x'"; //default: $CfgDaten['chart']['zoomType'] = "'xy'";
// **************************************************************************************
// *** credits *** siehe http://www.highcharts.com/ref/#credits
// **************************************************************************************
// $CfgDaten['credits']['text'] = "used by IPS";
// $CfgDaten['credits']['href'] = "http://www.ip-symcon.de/forum/f53/highcharts-multigraph-v1-0-a-17625/#post120721";
// **************************************************************************************
// *** title *** siehe http://www.highcharts.com/ref/#title
// **************************************************************************************
// $CfgDaten['title']['text'] = "Chart-Überschrift"; // Überchrift des gesamten Charts
// -> veraltet: 'Title' -> verwende ['title']['text']
$CfgDaten['title']['text'] = "Chart-Überschrift";
// **************************************************************************************
// *** subtitle *** siehe http://www.highcharts.com/ref/#subtitle
// **************************************************************************************
// $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%" // Sub-Überschrift. Wenn nichts angegeben wird wird dieser String als Default verwendet
// -> veraltet: 'SubTitle' -> verwende ['subtitle']['text']
// $CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i" // z.B.: "(D) d.m.Y H:i" (wird auch als Default herangezogen wenn nichts konfiguriert wurde)
// -> veraltet: 'SubTitleDateTimeFormat' -> verwende ['subtitle']['Ips']['DateTimeFormat']
// -> entfallen: 'SubTitleFormat' -> unnötiger Paramter, wird jetzt in ['subtitle']['text'] angegeben
$CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%";
$CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "(D) d.m.Y H:i";
// **************************************************************************************
// *** tooltip *** http://www.highcharts.com/ref/#tooltip
// **************************************************************************************
// $CfgDaten['tooltip']['enabled'] = false;
// $CfgDaten['tooltip']['formatter'] = Null; // IPS erstellt selbständig einen Tooltip
// $CfgDaten['tooltip']['formatter'] = ""; // Standard - Highcharts Tooltip
// **************************************************************************************
// *** exporting *** http://www.highcharts.com/ref/#exporting
// **************************************************************************************
// $CfgDaten['exporting']['enabled'] = true;
// **************************************************************************************
// *** lang *** http://www.highcharts.com/ref/#lang
// **************************************************************************************
// $CfgDaten['lang']['resetZoom'] = "Zoom zurücksetzten";
// **************************************************************************************
// *** legend *** http://www.highcharts.com/ref/#legend
// **************************************************************************************
// $CfgDaten['legend']['backgroundColor'] = '#FCFFC5';
// **************************************************************************************
// *** xAxis *** http://www.highcharts.com/ref/#xAxis
// **************************************************************************************
// $CfgDaten['xAxis']['lineColor'] = '#FF0000';
// $CfgDaten['xAxis']['plotBands'][] = array("color"=>'#FCFFC5',"from"=> "@Date.UTC(2012, 3, 29)@","to"=> "@Date.UTC(2012, 3, 30)@");
// **************************************************************************************
// *** yAxis *** http://www.highcharts.com/ref/#yAxis
// **************************************************************************************
// $CfgDaten['yAxis'][0]['title']['text'] = "Temperaturen"; // Bezeichnung der Achse
// -> veraltet: 'Name' und 'TitleText' -> verwende ['title']['text']
// $CfgDaten['yAxis'][0]['Unit'] = "°C"; // Einheit für die Beschriftung die Skalenwerte
// $CfgDaten['yAxis'][0]['min'] = 0; // Achse beginnt bei Min (wenn nichts angegeben wird wird der Min der Achse automatisch eingestellt)
// $CfgDaten['yAxis'][0]['max'] = 40; // Achse geht bis Max (wenn nichts angegeben wird wird der Max der Achse automatisch eingestellt)
// -> veraltet: 'Min' und 'Max'
// $CfgDaten['yAxis'][0]['opposite'] = false; // Achse wird auf der rechten (true) oder linken Seite (false) des Charts angezeigt (default = false)
// -> veraltet: 'Opposite'
// $CfgDaten['yAxis'][0]['tickInterval'] = 5; // Skalenwerte alle x (TickInterval)
// -> veraltet: 'TickInterval'
// -> entfallen: 'PlotBands' -> verwende ['yAxis'][0]['plotBands'], (siehe Beispiel 'cfg - drehgriff und tf-kontakt')
// -> entfallen: 'YAxisColor' -> verwende ['yAxis'][0]['title']['style']
// -> entfallen: 'TitleStyle'-> verwende ['yAxis'][0]['title']['style']
// **************************************************************************************
// *** series *** http://www.highcharts.com/ref/#series
// **************************************************************************************
// $serie['name'] = "Temperatur; // Name der Kurve (Anzeige in Legende und Tooltip)
// -> veraltet: 'Name' -> verwende [series']['name']
// $serie['Unit'] = "°C"; // Anzeige in automatisch erzeugtem Tooltip
// wenn $serie['Unit'] = NULL; // oder Unit wird gar nicht definiert, wird versucht die Einheit aus dem Variablenprofil automatisch auszulesen
// $serie['ReplaceValues'] = false; // Werte werden wie geloggt übernommen
// $serie['ReplaceValues'] = array(0=>0.2,1=>10) // der Wert 0 wird in 0.2 geändert, der Wert 1 wird in 10 geändert
// das macht für die Darstellung von Boolean Werte Sinn, oder für Drehgriffkontakte (Werte 0,1,2)
// $serie['type'] = 'spline'; // Festlegung des Kuventypes (area, areaspline, line, spline, pie, Column)
// $serie['yAxis'] = 0; // Nummer welche Y-Achse verwendet werden soll (ab 0)
// -> veraltet: 'Param' -> verwende die Highcharts Parameter - sollte eigentlich noch so funktionieren wie in IPS-Highcharts V1.x
// $serie['AggType'] = 0 // Festlegung wie die Werte gelesen werden soll (0=Hour, 1=Day, 2=Week, 3=Month, 4=Year), hat Vorrang gegenüber den Einstellungen in AggregatedValues
// wird kein AggType definiert werden alle gelogten Werte angezeigt
// $serie['AggNameFormat'] = "d.m.Y H:i"; // (gilt nur bei den Pies, wenn eine Id verwendet wird), entspricht dem PHP-date("xxx") Format, welches das Format der Pie Namen festlegt, wenn keine Eingabe werden Default Werte genommen
// $serie['Offset'] = 24*60*60; hiermit können Kurven unterschiedlicher Zeiträume in einem Chart dargestellt. Angabe ist in Minuten
// $serie['StartTime'] = mktime(0,0,0,1,1,2012); // wird für die entsprechende Serie eine Anfangs- und/oder Endzeitpunkt festgelegt wird dieser verwendet. Ansonsten wird
// $serie['EndTime'] = mktime(0,0,0,2,1,2012); // der Zeitpunkt der Zeitpunkt aus den $CfgDaten genommen
// $serie['ScaleFactor'] = 10; // Skalierungsfaktor mit welchem der ausgelesene Werte multipliziert wird
// $serie['RoundValue'] = 1; // Anzahl der Nachkommastellen
// $serie['AggValue'] ='Min' // über AggValue kann Min/Max oder Avg vorgewählt werden (Default bei keiner Angabe ist Avg)
// ist sinnvoll wenn nicht Einzelwerte sondern Stundenwerte, Tageswerte, usw. ausgelesen werden
// $serie['data'] = array('TimeStamp'=> time(),'Value'=12) // hier kann ein Array an eigenen Datenpunkten übergeben werden. In diesem Fall werden für diese Serie keine Daten aus der Variable gelesenen.
$lastValue = rand (0, 30);
for ($i = 0; $i <=100 ; $i++)
{
$DataForSerie[] = array("TimeStamp"=>$CfgDaten["StartTime"] + $i * 60 * 60, "Value"=>$lastValue);
$min = $lastValue -5; $max = $lastValue + 5;
$lastValue = rand ($min,$max);
}
$serie = array("Id"=>0, "Name" =>"Manueller Werte 1", "Unit"=>"°C", "ReplaceValues"=>false);
$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['data'] = $DataForSerie;
$CfgDaten["Series"][] = $serie;
$serie = array("Name" =>"Manueller Werte 2", "Unit"=>"°C", "ReplaceValues"=>false);
$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['data'][] = array("TimeStamp"=>mktime(9,0,0,5,2,2012), "y"=>18); // Uhrzeit wird über TimeStamp als PHP Wert vorgegeben
$serie['data'][] = array("TimeStamp"=>mktime(10,0,0,5,2,2012), "y"=>19);
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,9,9,00)@", "y"=>21); // Uhrzeit wird als UTC-Time übergeben (Achtung Monat -1)
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,10,10,00)@", "y"=>25);
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,11,11,00)@", "y"=>19);
$serie['data'][] = array("@Date.UTC(2012,4,4,11,11,00)@", 10);
$serie['data'][] = "@[Date.UTC(2012,4,4,19,00,00),21]@"; // hier wird alles direkt übergeben
$serie['data'][] = "@[Date.UTC(2012,4,4,20,00,00),19]@";
$serie['data'][] = "@[Date.UTC(2012,4,4,31,00,00),25]@";
$CfgDaten["Series"][] = $serie;
// Highcharts-Theme
// $CfgDaten['HighChart']['Theme']="grid.js"; // von Highcharts mitgeliefert: dark-green.js, dark-blue.js, gray.js, grid.js
$CfgDaten['HighChart']['Theme']="ips.js"; // IPS-Theme muss per Hand in in Themes kopiert werden....
// Abmessungen des erzeugten Charts
$CfgDaten['HighChart']['Width'] = 0; // in px, 0 = 100%
$CfgDaten['HighChart']['Height'] = 600; // in px
// -------------------------------------------------------------------------------------------------------------------------------------
// und jetzt los ......
$s = IPS_GetScript($CfgDaten['HighChartScriptId']); // Id des Highcharts-Scripts
include($s['ScriptFile']);
// hier werden die CfgDaten geprüft und bei Bedarf vervollständigt
$CfgDaten = CheckCfgDaten($CfgDaten);
// abhängig von der Art des Aufrufs -> json String für Highcharts erzeugen
if (isset($CfgDaten['RunMode'])
&& ($CfgDaten['RunMode'] == "script" || $CfgDaten['RunMode'] == "popup"))
{
// Variante1: Übergabe der ScriptId. Daten werden beim Aufruf der PHP Seite erzeugt und direkt ü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 Anzeigen der Content-Textbox erfolgt nicht
$sConfig = CreateConfigString($CfgDaten); // erzeugen und zurückgeben des Config Strings
$tmpFilename = CreateConfigFile($sConfig, $IPS_SELF); // und ab damit ins tmp-Files
if ($IPS_SENDER != "WebInterface")
{
WriteContentWithFilename ($CfgDaten, $tmpFilename); // und jetzt noch die ContentTextbox
}
}
?>
Bin mir noch nicht einmal sicher, ob das so richtig ist. Die HTML Box bleibt immer noch schwarz … Vielleicht kann ja mal jemand über die Config drüberschauen.
Danke!
wenn du die Daten in diesem Format (bezieht sich auf das Array „HC_Data“ oben im Post) anlieferst und darauf achtest, dass das Array mit den ältesten Daten beginnt, kann HC das problemlos weiter verarbeiten. Enthalten sein müssen die Werte/Keys „Value“ und „TimeStamp“
Der Archive-Handler ist nur ein Beispiel, woher die daten kommen ist egal
Array
(
[0] => Array
(
[TimeStamp] => 1338681900
[humanDate] => 03.06.2012 04:05
[Value] => -13.27
)
[1] => Array
(
[TimeStamp] => 1338682200
[humanDate] => 03.06.2012 04:10
[Value] => -13.12
)
[2] => Array
(
[TimeStamp] => 1338682500
[humanDate] => 03.06.2012 04:15
[Value] => -12.95
)
[3] => Array
(
[TimeStamp] => 1338682800
[humanDate] => 03.06.2012 04:20
[Value] => -12.77
)
na du musst die daten auch an „$serie“ übergeben:
$serie = array("Data" => $DataForSerie, ........
Was macht denn die Zeile
$serie = array("Id"=>0, "Name" =>"Manueller Werte 1", "Unit"=>"°C", "ReplaceValues"=>false);
?
Sorry, ich bin halbwegs fit in PHP … aber durch die Funktionsweise der Highcharts bin überhaupt noch nicht durchgestiegen. Daher bringen mir CodeSchnipsel nichts. Ich bräuchte leider die idiotensichere Version „Füge X und Y an Position Z ein“ … Sorry …
ich hab deine Config mal in meine testumgebung übernommen. Hab die ID des HC-Scripts angepasst, die Content-Variable auf -1 gesetzt,
das hier geändert
$serie = array("Id"=>0, "Data"=>$DataForSerie, "Name" =>"Manueller Werte 1", "Unit"=>"°C", "ReplaceValues"=>false);
$serie['type'] = "spline";
und das hier gelöscht (hatte ich vorhin nicht gesehen):
$serie['data'][] = array("TimeStamp"=>mktime(9,0,0,5,2,2012), "y"=>18); // Uhrzeit wird über TimeStamp als PHP Wert vorgegeben
$serie['data'][] = array("TimeStamp"=>mktime(10,0,0,5,2,2012), "y"=>19);
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,9,9,00)@", "y"=>21); // Uhrzeit wird als UTC-Time übergeben (Achtung Monat -1)
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,10,10,00)@", "y"=>25);
$serie['data'][] = array("x"=>"@Date.UTC(2012,4,4,11,11,00)@", "y"=>19);
$serie['data'][] = array("@Date.UTC(2012,4,4,11,11,00)@", 10);
$serie['data'][] = "@[Date.UTC(2012,4,4,19,00,00),21]@"; // hier wird alles direkt übergeben
$serie['data'][] = "@[Date.UTC(2012,4,4,20,00,00),19]@";
$serie['data'][] = "@[Date.UTC(2012,4,4,31,00,00),25]@";
$CfgDaten["Series"][] = $serie;
Ergebnis im Bild-Anhang.
Hast Du eigentlich die ips.js runter geladen und ins entsprechende verzeichnis gelegt?
