Alternative zu Flash für Grafiken und Instrumente

[Holli]

Nicht nur ich bin offensichtlich genervt von den ständigen Sicherheitslücken und Updates bei Flash. Mittlerweile haben fast 20% meiner Besucher kein Flash mehr installiert. Das sind für meinen Geschmack mehr, als man einfach ignorieren kann.

Ich suche deshalb nach Alternativen für meine Grafiken und Instrumente:
http://wetter.altenessen.info/
http://wetter.altenessen.info/grafiken/tag.html

Für die Grafiken habe ich bisher http://www.jqplot.com/ als beste Lösung gefunden. Kennt jemand noch eine Alternative?

Für die Instrumente habe ich aber überhaupt noch keinen Ansatz. Hat für sowas überhaupt schon mal jemand eine Lib für HTML5 gesehen?

Irgendwelche Bildgeneratoren, die lokal laufen und deren Bilder dann hochgeladen werden, kommen für die Aktualisierungsrate nicht in Frage. Die Instrumente müssen auf Anfrage auf dem Server erzeugt werden. Alles andere ist bei einem 2,5s-Intervall sinnlos.

[GrafZahl]

Hallo Holli,

sieh dir mal das an: http://www.tamarackacres.com/taws/wxgaugesbasic.php
Das basiert alles auf Javascript und stammt von hier: http://harmoniccode.blogspot.de/
Die Bibliothek nennt sich SteelSeries.

Gruss Roland

[noxx]

Nutze meteohub und der generiert ebenfalls mit gnuplot. Gefällt mir leider nicht so. Wenn ich zeit finde werde ich die Daten in eine mysql dB schreiben und die Grafiken mit Highcharts erstellen. Da hat man um einiges mehr an Möglichkeiten.
http://www.highcharts.com/demo/

[Holli]

Danke schon mal, sieht alles brauchbar aus.

Bei den Grafiken habe ich eine zusätzliche Anforderung: Ich möchte zusammengehörige Größen in einer Grafik darstellen können, also Temp/Hum zusammen, Niederschlagsmenge und -dauer, Strahlung und Sonnenscheindauer, Windgeschwindigkeit und -richtung. Dazu müssen in einer Grafik mindestens zwei Größen skalierbar sein. Zumindest bei den reinen Bildgrafiken, die ich schon mal getestet habe, ist das nicht selbstverständlich. Es wäre also schön, wenn das bei den interaktiven Grafiken klappen würde. Bei der aktuell genutzten Flash-Lib klappt das.

[noxx]

So?
http://www.highcharts.com/demo/combo-dual-axes
http://www.highcharts.com/demo/combo-multi-axes

[Jürgen]

Ich verwende pChart

http://www.pchart.net/

[joergeli]

Hallo Dietmar,

Instrumente auf HTML5/Canvas-Basis:

http://www.wettermichel.de/index.php/instrumente2.html
Downloadbar (nach vorheriger Anmeldung) unter:
http://www.neersen-wetter.de/forum/viewtopic.php?f=26&t=398

Meine Umsetzungen ( ist natürlich Geschmackssache):
http://www.joergeli.de/wetterinstrumente1.php
http://www.joergeli.de/solaranlage.php


Ansonsten mal nach "gauges steelseries" googeln.

Gruß
Jörg

P.S.
Diagramme:
http://www.php-faq.de/q-scripte-diagramme.html

Noch eine Diagramm-Alternative: jQuery Flot
http://www.flotcharts.org/flot/examples/
angewendet hier in der 48 Std.-Vorhersage
http://www.joergeli.de/000_vorhersage_yr.php

[docbee]

Die von Meteoplug verwendeten "amcharts" (www.amcharts.com) gibt es in fast identischem Look & Feel als "Flash" oder "JavaScript" Version. In Meteoplug kann man per Switch wählen, in welcher Form diese gerendert werden sollen.

An "amcharts" finde ich die Möglichkeit des Bündelns von Grafiken sehr angenehm.
JavaScript Beispiel: http://wiki.meteoplug.com/Server_Status
Die Lücke ist durch eine Aufzeichnungsuunterbrechung entstanden, und keine downtime!

Falls es interessiert... die Definiton für die obere Grafik wird in Meteoplug durch die folgenden paar Zeilen erreicht:

Code Auswählen Erweitern

timeframe=7D    # set total time frame to 7 days
res=min10           # get data per 10 minutes
zoom=MAX
periodselector=0
# scrollerselector=1
engine=js              # define javascript as rendering engine

gtitle0=Load
gheight0=200 gwidth0=700 grunit0=% gtype0=line glmin0=0 grmin0=0             
sid0_0=data3 stype0_0=step syaxis0_0=l sname0_0=Processes scolor0_0=000088 sline0_0=30 sfill0_0=10 sprec0_0=0 ssel0_0=val
sid0_1=data0 ssmooth0_1=1 syaxis0_1=r sname0_1=System_Load scolor0_1=FF0000 sline0_1=100 sprec0_1=0 sfactor0_1=100 ssel0_1=val

gtitle1=Data_Logging
gheight1=200 gwidth1=700 grunit1=_min gtype1=line glmin1=0 grmin1=0       
sid1_0=data6 syaxis1_0=l sname1_0=Recompute_Queue scolor1_0=BB0000 stype1_0=step  sprec1_0=0 sline1_0=100 sfill1_0=30 ssel1_0=val
sid1_1=data4 syaxis1_1=l  sname1_1=Import_Queue scolor1_1=008800 stype1_1=step  sprec1_1=0 sline1_1=40 sfill1_1=20 ssel1_1=val
sid1_2=data5 ssmooth1_2=1 syaxis1_2=r sname1_2=Import_Age scolor1_2=444400 sline1_2=100 sprec1_2=0 sfactor1_2=0.016666 ssel1_2=val

gtitle2=Live_Queues
gheight2=200 gwidth2=700 grunit2=_sec gtype2=line glmin2=0 grmin2=0             
sid2_0=data8 syaxis2_0=l sname2_0=Live_Data_Queue scolor2_0=0088bb stype2_0=step  sprec2_0=0 sline2_0=100 sfill2_0=30 ssel2_0=val
sid2_1=data9 ssmooth2_1=1 syaxis2_1=r sname2_1=Live_Data_Age scolor2_1=7700ee sline2_1=100 sprec2_1=1 sfactor2_1=1 ssel2_1=val
sid2_2=data10 syaxis2_2=l sname2_2=Throughput_/sec scolor2_2=dd7700 stype2_2=step  sprec2_2=0 sline2_2=100 sfill2_2=10 ssel2_2=val
sid2_3=data11 syaxis2_3=l sname2_3=Live_Stations scolor2_3=009900 stype2_3=step  sprec2_3=0 sline2_3=100 sfill2_3=30 ssel2_3=val

gtitle3=Live_Data
gheight3=200 gwidth3=700 grunit3= gtype3=line glmin3=0 grmin3=0             
sid3_0=data12 syaxis3_0=l sname3_0=Requests_/min scolor3_0=ff0000  sprec3_0=0 sline3_0=70 sfill3_0=0 ssel3_0=val
sid3_1=data13 syaxis3_1=l sname3_1=Submissions_/min scolor3_1=0000ff  sprec3_1=0 sline3_1=70 sfill3_1=0 ssel3_1=val


[joergeli]

@docbee

An "amcharts" finde ich die Möglichkeit des Bündelns von Grafiken sehr angenehm.

Die amCharts in der Flash-Version waren bis dato auch meine Favoriten.
Wegen dem "langsamen Sterben" von Flash habe ich angefangen, auf JavaScript umzustellen,
was auch soweit funktioniert, aaaber:
Wenn man mehrere Diagramme auf einer Seite darstellen will, werden die Ladezeiten m.E. unerträglich lang.

Ich habe hier mal ein Beispiel mit mehreren JavaScript-amCharts:
http://www.joergeli.de/longtime.php
Erst wollte ich alle Langzeitdiagramme untereinander darstellen, aber da hat sich z.B. der IE "totgerödelt".
Daraufhin habe ich dann die Anzeige auf max 2-3 Diagramme gleichzeitig eingeschränkt
(auswählen durch Klicken auf Niederschlag, Wind, Sonnenschein, etc.)
Aufbau der Anzeige ist somit m.E. "noch erträglich", kommt aber auf den Browser/Betriebssystem an.
Am flottesten wird bei mir die Anzeige mit Chrome-Browser unter Android aufgebaut.
Probiert's am Besten selbst mal aus.

Gruß
Jörg

[docbee]

@joergeli: Sorry, das ist so nicht richtig. Bei den Stockcharts von "amcharts" kann man mehrere Diagramme zeitlich synchronisiert (mit einem Cursor) darstellen und das ist keineswegs langsam und funktioniert sowohl in der Flash als auch in der Javascript-Version.

Mehrere Grafiken einfach unabhängig in getrennten Containern untereinanderzubauen, bringt natürlich nix, aber das war auch nicht gemeint. Hast Du mit den Stockcharts mal gearbeitet? Auf Deinen Seiten habe ich nur die "einfachen" Charts gefunden.

Beispiel für gekoppelte Stockcharts (hier noch als Flash): 
http://www.meteoplug.com/examples/example-18.html