Meinte die Buttons über den Graphen. Hat sich ja jetzt geklärt 
Wieder ne Arbeit für Wochenende
Achja … Welche Doku :rolleyes:
Achso, Danke 
Ist wie mit IKEA … erst wird zusammengebaut und hinterher blöde Fragen gestellt.
Servus
hat ein bisl gedauert, aber ich will euch nun meine finale Lösung zur Einstellung des Highcharts Plotzeitraumes nicht vorenthalten:
Aufgabe war:
- möglichst wenig zusätzlicher Platzbedarf
- schnelle und trotzdem flexible Bedienung
- möglichst unauffällig
Nun, ich hab erstmal die Idee von 1007 weiterverfolgt und die Highcharts Option verwendet um eigene Buttons zu erstellen. So wird kein zusätzlicher Platz benötigt.
Die Buttons decken erstmal die am häufigsten gebrauchten Intervalle ab. Nach Klick auf „Stunde Tag Woche Monat“ wird der Plot sofort entsprechend upgedated.
Klickt man auf „Zeitraum“ so werden werden zwei Eingabefelder zur detailierten Eingabe für Start und Endzeit eingeblendet. Nach Änderung eines Wertes wird der Plot sofort neu gezeichnet.
Klickt man auf den Pfeil so Öffnet sich ein Kalenderwidget um bequem per Maus seine Auswahl zu treffen. da es ein natives HTML5 Objekt ist wird es auf Touchscreens praktischerweise in fingertauglicher Größe gezeichnet.
Nochmals auf Zeitraum und die Eingabefelder verschwinden.
Perfekt, oder ? Der große Vorteil: Kein zusätzlicher Platzbedarf bei voller Flexibilität.
Nachteil:
- läuft nur unter Chrome,Opera und Safari
- ich habs nur in meine eigene Highchartsimplementierung reingebastelt. Die offizielle Variante von khc ist mir mit den vielen Arrays zu umständlich, ich verwende die nicht. Wenn jemand Lust hat dies zu tun kann ich einige snippets gerne weitergeben.
hallo bbernhard
natürlich hätte ich interesse an deinem code wie ich die Zeitintervalleingabe und die buttons integrieren kann.
Gruß
hardlog
Ich hätte auch daran Interesse… das mit den Buttons sieht echt gut aus, vor allem die Datumseingabemöglichkeit. Könnte man sowas auch für die Eingabe einer Weckzeit gebrauchen?? (Bisher sind das umständliche Variablen…) Ich habe aber noch keine Vorstellung wie das gehen könnte. Deshalb ist ggf. jeder kleinste Tipp hilfreich…
Danke Gruß Helmut
Hallo
Die Idee von mir ist keine Idee sondern hab ich bei mir so eingesetzt.
Hab aber nicht die schoene Zeitauswahl, sondern nur Jahr,Monat,Tag,Stunde und
dann noch blaettern vorwaerts,rueckwaerts und aktuell.
Die Zeitauswahl nehm ich mal als Anregung.
Umgesetzt hab ich das mit dem Highchart der IPSLibrary.
Interesse vorhanden?
Gesendet von meinem iPad mit Tapatalk HD
Auf jeden Fall hab ich dran Interesse.
Gruß
hardlog
Servus
ich versuche es mal zu erklären, aber wie gesagt, mein Highcharts verwendet die Arrays nur zur Definition der Datenreihen.
Das optische Aussehen der Diagramme ist als String hardgecodet. Ich find das leichter, denn so konnte ich vieles direkt per Copy&Paste von der Highchgartsseite übernehmen. Die config.php ist so auch wesentlich kürzer und übersichtlicher.
Ist aber wohl Geschmackssache.
Nun also die Diagramme sind so definiert:
Diese Datei gilt für alle mein Highchart Diagramme und wird in das Highchart config Script includet.
<?php
function CreatePlotDefinition($IPSSELF) {
$ColorHour ="'#777'";
$ColorDay ="'#777'";
$ColorWeek ="'#777'";
$ColorMonth ="'#777'";
$ColorFree ="'#777'";
IF (GetValueString(37567 /*[Programe\Highcharts\calc_Plotzeitraum\Zeitraum]*/) =='Hour') $ColorHour = "'#EEE'";
IF (GetValueString(37567 /*[Programe\Highcharts\calc_Plotzeitraum\Zeitraum]*/) =='Day') $ColorDay = "'#EEE'";
IF (GetValueString(37567 /*[Programe\Highcharts\calc_Plotzeitraum\Zeitraum]*/) =='Week') $ColorWeek = "'#EEE'";
IF (GetValueString(37567 /*[Programe\Highcharts\calc_Plotzeitraum\Zeitraum]*/) =='Month') $ColorMonth = "'#EEE'";
IF (GetValueString(37567 /*[Programe\Highcharts\calc_Plotzeitraum\Zeitraum]*/) =='Auswahl') $ColorFree = "'#2E2'";
$ConfigString = "
title: {
text: '%title.text%',
align: 'left',
x: 60,
style: {
color: '#FFFFFF',
textWeight: 'bold',
fontSize: '14px',
},
},
xAxis: [{
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
}
}],
yAxis: [ %yAxis% ],
tooltip:
{ %tooltip%
},
navigation: {
buttonOptions: {
theme: {
fill:'transparent',
style: {
color: '#999',
textDecoration: 'underline',
},
states: {
hover: {
fill: 'transparent',
color: '#DDD',
textDecoration: 'underline',
},
},
}
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
},
AuswahlButton: {
text: 'Zeitraum:',
onclick: function () { new Image().src = '/user/Highcharts/HighchartsCommand.php?ScriptID=".$IPSSELF."&Interval=Auswahl&StartDate=0&EndDate=0';},
align: 'right',
y: 0,
x: -250,
theme: {
fill:'transparent',
style: {
color: ".$ColorFree.",
textDecoration: 'normal',
},
},
},
StundeButton: {
text: 'Stunde',
onclick: function () { new Image().src = '/user/Highcharts/HighchartsCommand.php?ScriptID=".$IPSSELF."&Interval=Hour&StartDate=0&EndDate=0';},
align: 'right',
y: 0,
x: -180,
theme: {
fill:'transparent',
style: {
color: ".$ColorHour.",
textDecoration: 'normal',
},
},
},
TagButton: {
text: 'Tag',
onclick: function () { new Image().src = '/user/Highcharts/HighchartsCommand.php?ScriptID=".$IPSSELF."&Interval=Day&StartDate=0&EndDate=0';},
align: 'right',
y: 0,
x: -150,
theme: {
fill:'transparent',
style: {
color: ".$ColorDay.",
textDecoration: 'normal',
},
},
},
WocheButton: {
text: 'Woche',
onclick: function () { new Image().src = '/user/Highcharts/HighchartsCommand.php?ScriptID=".$IPSSELF."&Interval=Week&StartDate=0&EndDate=0';},
align: 'right',
y: 0,
x: -100,
theme: {
fill:'transparent',
style: {
color: ".$ColorWeek.",
textDecoration: 'normal',
},
},
},
MonatButton: {
text: 'Monat',
onclick: function () { new Image().src = '/user/Highcharts/HighchartsCommand.php?ScriptID=".$IPSSELF."&Interval=Month&StartDate=0&EndDate=0';},
align: 'right',
y: 0,
x: -50,
theme: {
fill:'transparent',
style: {
color: ".$ColorMonth.",
textDecoration: 'normal',
},
},
},
},
},
series: [ %data% ]
});";
return $ConfigString;
}
?>
Damit sind schon mal die Buttons mit den fixen Intervallen definiert.
Wie man sieht rufen diese eine Datei Namens HighChartsCommand.php auf.
Dieser Datei wird die Button-ID übergeben.
In der Datei werden dann je nach Button-ID fixe Werte für StartTime und Endtime gesetzt und der Plot neu gezeichnet.
Dazu ist die $IPSSELF notwendig, welche die ID der aufrufenden Highchart config.php enthält.
<?php
$PlotScriptId = intval($_GET["ScriptID"]);
$Interval = ($_GET["Interval"]);
$StartDate=strtotime($_GET["StartDate"]);
$EndDate=strtotime($_GET["EndDate"]);
Switch ($Interval) {
Case "Auswahl":
if ( intval($StartDate) > 0) SetValueInteger(14163,$StartDate);
if ($EndDate <> 0 )SetValueInteger(35060,$EndDate);
if (GetValue(37567) == 'Auswahl') {
SetValueString(37567,'');
}
else {
SetValueString(37567,'Auswahl');
}
break;
Case "Hour":
SetValueInteger(35060,time());
SetValueInteger(14163,time()-3600);
SetValueString(37567,'Hour');
break;
Case "Day":
SetValueInteger(35060,time());
SetValueInteger(14163,time()-(24*3600));
SetValueString(37567,'Day');
break;
Case "Week":
SetValueInteger(35060,time());
SetValueInteger(14163,time()-(7*24*3600));
SetValueString(37567,'Week');
break;
Case "Month":
SetValueInteger(35060,time());
SetValueInteger(14163,time()-(31*7*24*3600));
SetValueString(37567,'Month');
break;
Case "Year":
SetValueInteger(35060,time());
SetValueInteger(14163,time()-(365*24*3600));
SetValueString(37567,'Year');
break;
}
IPS_RunScript($PlotScriptId);
echo "test";
?>
Für den Fall das freie Zeiteingabe (Button-ID = „Auswahl“) gewünscht ist wird ein Flag gesetzt und der Plot wieder neu gezeichnet.
Die Highcharts.php wertet dieses Flag beim erstellen des HTML Codes aus und blendet bei Bedarf das Kalenderwidget (HTML input=datetime) ein:
Um nicht die ganze ewiglange Highcharts.php hier zu posten, nur der relevante Teil.
function WriteContentWithScriptId($CfgDaten, $scriptId)
{
// damit das Ding auch sauber dargestellt wird
$Height = $CfgDaten["HighChart"]["Height"] + 0;
$StartTime = GetValue(14163 /*[Programe\Highcharts\Starttime]*/);
$StartTime = date('Y-m-d',$StartTime).'T'.date('H:i',$StartTime);
$EndTime = GetValue(35060 /*[Programe\Highcharts\Endtime]*/);
$EndTime = date('Y-m-d',$EndTime).'T'.date('H:i',$EndTime);
$selectInterval = ' <script type="text/javascript">
function updateStart(value) {
httpRequest = new XMLHttpRequest();
httpRequest.open("POST", "./User/Highcharts/HighchartsCommand.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("ScriptID='.$scriptId.'&Interval=Auswahl&StartDate="+value+"&EndDate=0");
}
function updateEnd(value) {
httpRequest = new XMLHttpRequest();
httpRequest.open("POST", "./User/Highcharts/HighchartsCommand.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("ScriptID='.$scriptId.'&Interval=Auswahl&StartDate=0&EndDate="+value+"");
}
</script>
<div style="position:absolute; right:60px; top:15px; z-index:1;" >
<input id="start" type="datetime-local" value='.$StartTime.' onchange= "updateStart(this.value)" />
</div>
<div style="position:absolute; right:60px; top:40px; z-index:1;" >
<input id="end" type="datetime-local" value='.$EndTime.' onchange= "updateEnd(this.value)" />
</div>
';
if ($scriptId >= 0)
if (GetValue(37567 /*[Programe\Highcharts\Zeitraum]*/) =='Auswahl') {
SetValue($CfgDaten["ContentVarableId"], $selectInterval .'
<iframe
src="./User/Highcharts/IPS_Template.php?ScriptId='. $scriptId.'" width="100%" height="'. $Height .'" frameborder="0" scrolling="no">
</iframe>
');
}
else {
SetValue($CfgDaten["ContentVarableId"],'
<iframe src="./User/Highcharts/IPS_Template.php?ScriptId='. $scriptId.'" width="100%" height="'. $Height .'" frameborder="0" scrolling="no"></iframe>');
}
else
SetValue($CfgDaten["ContentVarableId"], 'Falsche Parameter beim Funktionsaufruf "WriteContentTextbox"');
}
Wie du siehst verwende ich den HTML datetime inputtype. Erklärt ist das input hier:
Vieleicht kannst ja Teile daraus für eigene Scripte umwandeln und gebrauchen.
gruß
bb
Moin
So mal schnell um die Uhrzeit als Schnellinfo.
Ich erstelle meine Buttons so
$CfgDaten['exporting']['buttons']['Woche']['x'] = 122;
$CfgDaten['exporting']['buttons']['Woche']['y'] = 1;
$CfgDaten['exporting']['buttons']['Woche']['symbol'] = "url(/user/icons/fixed/HighchartsWoche.png)";
$CfgDaten['exporting']['buttons']['Woche']['symbolX'] = 6;
$CfgDaten['exporting']['buttons']['Woche']['symbolY'] = 6;
$CfgDaten['exporting']['buttons']['Woche']['height'] = 32;
$CfgDaten['exporting']['buttons']['Woche']['width'] = 59;
$CfgDaten['exporting']['buttons']['Woche']['align'] = "left" ;
$CfgDaten['exporting']['buttons']['Woche']['_titleKey'] = 'myWeekButton';
$CfgDaten['exporting']['buttons']['Woche']['onclick'] = "@function() { new Image().src = '/user/IPSHighcharts/HighchartsCommand.php?VarID=".$IPS_SELF."&Time=Week&Start=".$CfgDaten['StartTime']."&End=".$CfgDaten['EndTime']." '; }@";
exporting muss enabled sein. Die Symbole ,also die PNG-Dateien, erstelle ich auch ueber ein PHP-Script da kann man schneller Farbe und Fonts aendern .
Moin 1007
ich steig noch nicht ganz durch die HC Konfiguration durch… (trotz Doku 
, liegt eher an meinen Programmierkenntnissen…)
was bewirkt folgende deiner Zeilen?
$CfgDaten['exporting']['buttons']['Woche']['_titleKey'] = 'myWeekButton';
Wenn ich den Button nicht als Bild darstellen will, sondern „nur“ als Text hab ich es mit "[…][‚text‘]=‚1 Woche‘; probiert, zu sehen ist aber nichts… außer des grauen „Standard“-Buttons (kann ich den in seiner Optik denn beeinflussen?).
Gruß
hardlog
Das mit dem nur Text kann ich gerade nicht testen , da unterwegs aber
‚myWeekButton‘ wird bei mir in meinem Highcharts-Theme definiert.
…\webfront\user\IPSHighcharts\Highcharts\js hemes…
_titleKey ist der Text des Tooltip.
navigation: {
buttonOptions: {
backgroundColor: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#606060'],
[0.6, '#333333']
]
},
borderColor: '#000000',
symbolStroke: '#C0C0C0',
hoverSymbolStroke: '#FFFFFF'
}
},
lang: {
resetZoom: 'Reset Zoom',
myHourButton: 'Auswahl: Stunde',
myDayButton: 'Auswahl: Tag',
myWeekButton: 'Auswahl: Woche',
myMonthButton:'Auswahl: Monat',
myYearButton: 'Auswahl: Jahr',
myBackButton: 'Auswahl: zurueck',
myHomeButton: 'Auswahl: Aktuelle Zeit',
myForButton: 'Auswahl: vorwaerts'
},
Und was steht dann bei Dir im Script HighchartsCommand.php?
Gruß
hardlog
<?php
IPSUtils_Include ("IPSLogger.inc.php","IPSLibrary::app::core::IPSLogger");
$debug = true;
IPS_Sleep(50);
if (isset($_GET['VarID'])) $varid = intval($_GET['VarID']); else die() ;
if (isset($_GET['Time'])) $time = $_GET['Time']; else die() ;
if (isset($_GET['Start'])) $starttime = intval($_GET['Start']); else die() ;
if (isset($_GET['End'])) $endtime = intval($_GET['End']); else die() ;
$starttime_string = date('d.m.Y h:i:s',$starttime);
$endtime_string = date('d.m.Y h:i:s',$endtime);
$s = $varid ."-". $time ."-".$starttime_string."-".$endtime_string;
if ($debug) IPSLogger_Dbg(__FILE__,$s );
$CfgDaten = array();
$CfgDaten['RefreshID'] = $varid;
$akt_zeitraum = $endtime - $starttime ; // aktueller Zeitraum
$sprungweite = $akt_zeitraum/2;
switch($time)
{
case "Backward" :
$CfgDaten['StartTime'] = $starttime - $sprungweite;
$CfgDaten['EndTime'] = $endtime - $sprungweite;
break;
case "Home" :
break;
case "Forward" :
$CfgDaten['StartTime'] = $starttime + $sprungweite;
$CfgDaten['EndTime'] = $endtime + $sprungweite;
if ( $CfgDaten['EndTime'] > time() )
{
//unset( $CfgDaten['StartTime'] );
//unset( $CfgDaten['EndTime'] );
die();
}
break;
case "Hour" :
$CfgDaten['StartTime'] = time() - 3600;
$CfgDaten['EndTime'] = time() ;
break;
case "Day" :
$CfgDaten['StartTime'] = time() - ( 3600 * 24 );
$CfgDaten['EndTime'] = time() ;
break;
case "Week" :
$CfgDaten['StartTime'] = time() - ( 3600 * 24 * 7 );
$CfgDaten['EndTime'] = time() ;
break;
case "Month" :
$CfgDaten['StartTime'] = time() - ( 3600 * 24 * 31);
$CfgDaten['EndTime'] = time() ;
break;
case "Year" :
$CfgDaten['StartTime'] = time() - ( 3600 * 24 * 365);
$CfgDaten['EndTime'] = time() ;
break;
default : die();
}
$scriptid = IPSUtil_ObjectIDByPath("Program.IPSLibrary.app.privat.IPSHighcharts.VerwaltungHighcharts");
$s = IPS_GetScript($scriptid);
$s = IPS_GetKernelDir() ."scripts\\" . $s['ScriptFile'];
include($s);
?>
Danke 1007 für die Geduld und schnelle Antwort,
soweit komme ich langsam dahinter.
Aber was machen die letzten deiner Codezeilen?
IPS_GetScript
Deine bisherigen Schritte hab ich in mein script eingebaut, aber es ändert sich noch nichts, fehlt noch mehr?
Gruß
hardlog
Hallo
Das obige Script nimmt nur die Webfronteingaben an und ruft dann das Hauptscript auf um den Graph neu aufzubauen.
Hab alles in diesem einem Hauptscript drin.
Buttons,Beschriftungen,Daten etc.
Schick nachher mal was da so drin steht.
Gesendet von meinem iPad mit Tapatalk HD
Anbei mein Hauptscript reduziert auf eine einzige Variable.
Aufgerufen wird es bei Aenderung dieser Variablen bzw. beim
Anklicken einer Zeitraumaenderung.
HCTest.ips.zip (2.75 KB)
moin 1007,
danke für das script.
Auf welche Struktur bezieht sich denn folgende Zeile (ich glaube 13 wars) in deinem Hauptscript?
$scriptid = IPSUtil_ObjectIDByPath("Program.IPSLibrary.app.privat.IPSHighcharts.VerwaltungHighcharts");
hardlog
[QUOTE=hardlog;207641
Auf welche Struktur bezieht sich denn folgende Zeile (ich glaube 13 wars) in deinem Hauptscript?
$scriptid = IPSUtil_ObjectIDByPath("Program.IPSLibrary.app.privat.IPSHighcharts.VerwaltungHighcharts");
[/QUOTE]
Da musst ich jetzt wirklich erst ueberlegen, denn die wird in dem Hauptscript garnicht benutzt.
Kann man da also weglassen.
Mein Hauptscript heisst „VerwaltungHighcharts“ und damit ermittle ich die ScriptID.
Im Script fuer das Webfront wird die ID aber gebraucht zum neu generieren .
Start und Ende werden neu errechnet und dann „VerwaltungHighcharts“ aufgerufen.
$scriptid = IPSUtil_ObjectIDByPath("Program.IPSLibrary.app.privat.IPSHighcharts.VerwaltungHighcharts");
$s = IPS_GetScript($scriptid);
$s = IPS_GetKernelDir() ."scripts\\" . $s['ScriptFile'];
include($s);
Hallo 1007,
würde auch gerne deine Buttons in meinen Diagrammen nutzen, könntest du eventuell nochmal erklären, was von deinen Skriptschnipseln wo verwendet werden müsste?
Blicke irgendwie nicht ganz durch…
Wäre schön, von dir zu hören.
Grüße
Dan