<size size="150">[HowTo] Material Design: FLOT-Diagramm Zeitspanne setzen, Vollbild</size>

Ein FLOT Diagramm wird in einem basic-iFrame Widgets dargestellt. Zwar ist es möglich, hier einen „Finger-ZOOM“ für die Bestimmung der Zeitspanne vorzunehmen, jedoch ist es dann eher ein Zufall, eine gewünschte Zeitspanne wie z.B. „1 Woche“ zu erwischen. Besser geht dieses, wenn man dafür eigene Schaltflächen hätte. Und genau diese werden beschrieben.

Technisch wird die Eigenschaft „Quelle“ , welche die FLOT-URL enthält, via Javascript manipuliert. Hierzu müssen sowohl die MD CSS-Anweisungen als auch das MD Skript in das ioBroker.vis Projekt kopiert werden.

Weiterhin ist es möglich die komplette View, auf welcher das FLOT-Diagramm platziert wurde, als Vollbild darzustellen, siehe hierzu Unterkapitel 3.

Ein Beispiel-Video (download 500 KB): https://github.com/Uhula/ioBroker-Mater … mespan.mp4

Eine detaillierte Beschreibung: https://github.com/Uhula/ioBroker-Mater … eitung.pdf

ioBroker.vis Demo-Projekt: https://github.com/Uhula/ioBroker-Mater … 20projects

Da hierbei die CSS-Klassen und Javascript-Code des Material Designs benutzt werden, funktioniert es nur dort. Allerdings, wer mit CSS/JS umgehen kann, könnte sich die entsprechenden CSS-Klassen und den JS-Code auch herausziehen.