Tip: Diagramme und Analoganzeigen über Google Chart API

Tixi-Support · **Verfasst:** Do Aug 07, 2008 12:51 pm

Die sehr mächtige Google Chart API kann immer dann zur Visualisierung von Alarm Modem Daten verwendet werden, wenn der aufs Alarm Modem zugreifende Browser gleichzeitig auch auf die Google-Webseite Zugriff hat (also "im Internet" ist). Das sollte in den meisten Fällen der Fall sein, sodaß dieser Tip eine einfache und performante Lösung zum Generieren von Diagrammen und Analoganzeigen ist.

Das Prinzip ist ganz einfach:
In die Webseite wird ein image <img src=""/> eingebunden, dessen URL auf die Google Chart API zeigt, und neben den darzustellenden Datenpunkten auch diverse Parameter zu Bestimmung des Diagrammtyps, Layouts usw. hat.

Das einfachste Beispiel ist das "Google-O-Meter":

Code:

http://chart.apis.google.com/chart?chs=225x125&cht=gom&chtt=Analogwert&chd=t:20&chl=Wert

erzeugt folgende Analoganzeige:
Bild

Um dieses nun mit Werten aus dem Alarm Modem zu verknüpfen, muss der Wert ( hier "20") und die Beschreibung (hier "Wert") einfach durch Referenzen auf die Variablenpfade ersetzt werden:

Code:

http://chart.apis.google.com/chart?chs=225x125&cht=gom&chtt=Analogwert&chd=t:&#xae;/Process/Bus1/Device_0/Variable_0;&chl=&#xae;/Process/Bus1/Device_0/Variable_0;

Das ganze kann dann auch noch dynamisch gestaltet werden (siehe "Aktualisierung von Prozessvariablen"), sodaß man eine tolle Analogwertvisualisierung hat.

Beispiel Kurvendiagramm mit einem Analogwert:

Code:

http://chart.apis.google.com/chart?cht=ls&chtt=Kurve&chdl=Analogwert&chs=432x220&chco=ff3333&chf=c,lg,90,99ccff,0.8,ffffff,0&chd=t:5,9,2,6,10,0

liefert die Grafik:
Bild

Wie Sie im Code sehen können, müssen die Daten am Ende hinter dem t: durch Komma getrennt aufgelistet werden.
Um dies zu erreichen, nimmt man ein Logfile mit nur einem Datenpunkt und wendet auf dieses einen Webserver LogAlias an, der die Daten entsprechend umformatiert:

FW 2.X:

Code:

   <LogAliases>
       <Google_CSV _="GoogleChart" flags="NoId,NoDate,NoTime,NoNames" type="CSV" rowend="," tabend="-1"/>
   </LogAliases>

Es werden alle Flags ausgeblendet, der Typ ist CSV und als Zeilenende wird ein Komma verwendet. Das entfernt zum einen die Zeilenumbrüche, und erzeugt zudem die gewünschte Aneinanderreihung von kommagetrennten Werten. Da leider auch an der letzten Zeile ein Komma hängt, muss noch der Wert -1 ans Dateiende angehängt werden. Google interpretiert das dann als "fehlenden Wert".

FW 3.X:

Code:

   <LogAliases>
       <Google_CSV _="GoogleChart" flags="NoId,NoDate,NoTime,NoNames" type="CSV" rowsep="," rowend="" tabend=""/>
   </LogAliases>

Es werden alle Flags ausgeblendet, der Typ ist CSV und das Zeilenende wird entfernt. Der neue Zeilentrenner "rowsep" erzeugt die kommagetrennte Auflistung.

Der Logalias wird danach über ein ReadLog SSI in den Link eingebunden:

Code:

<img src="http://chart.apis.google.com/chart?cht=ls&chtt=Kurve&chdl=Analogwert&chs=432x220&chco=ff3333&chf=c,lg,90,99ccff,0.8,ffffff,0&chd=t:
&#xae;(ReadLog=Google1_CSV+all);"/>

Hierbei muss unbedingt beachtet werden, dass vor dem readLog SSI ein Zeilenumbruch einzufügen ist, da die ReadLog SSI Funktion sonst den gesammten Zeileninhalt (und damit auch den ersten Teil des Links) überschreibt.

Auch hier sind natürlich dynamische Aktualisierungen möglich.

Diese Beispiele sind etwas verfeinert auch live auf unserer "WebCPU" zu sehen.

Die API beherrscht aber auch noch viele andere Diagrammtypen wie z.B. Balken und Torten und man kann mit einigen Tricks auch mehrere Kurven in ein Diagramm packen und dazu sogar mehrere Koordinatenachsen sowie horizontale (aus Alarm Modem Variablen berechnete) Min-Max-Linien einfügen.

Viel Spaß beim Experimentieren !

Tixi.Com