Performance lastige Diagramme

[Skaschy]

Hallo zusammen,

ich sitze gerade vor einem Problem wie am geschicktesten Diagramme erstelle, welche auf jeden Browser und auch noch Ressourcen sparen sind.

Verfügbare Technologien
GD2
SVG
Canvas

Agenda

Kritikpunkte
-- Cross-Browser Kompatibel
-- Ressourcenschonend
-- Optisch ansprechend und vor allem
-- optisch flexibel
-- speicherbar


GD2

Nachteile
-- Nicht wirklich Ressourcen schonend
-- "schwer" zu handlen da recht aufwenig.
Vorteile
-- Crossplatform fähig
-- Speicherbar


Canvas

Nachteile
-- Nicht speicherbar
-- Keine Native unterstützung im Internet Explorer
Vorteile
-- durch offenes Framework auch IE nutzbar (google)
-- in XHTML einbettbar
-- Ressourcenlast wird auf den Client übertragen
-- Geringe Grösse der zu übermittelnden Daten.


SVG

Nachteile
-- Volle native Unterstützung bietet nur der Opera
Vorteile
-- Einfache Erstellung
-- Ressourcenlast wird auf den Client übertragen.
-- bedingt Speicherbar
-- Konvertierbar in ein gänginges Grafikformat.


Ich bin zur Zeit auf dem Weg:

Entwicklung findet in SVG statt, welches an einen Canvas Controller geschickt wird der mir die Browser unabhängigkeit gibt.

Desweiteren kann ich den Download als Image anbieten.

Performance ist aus dem Grund wichtig, da diese Statistiken Diagramme alle ~2 Sek. abgerufen werden.

Frage hier, wie würdet Ihr das lösen?

Gibt es noch eine Alternative?

Ist es Sinnvoll einen so komplexen Schritt zu wagen SVG nach Canvas zu portieren?

Liebe Grüsse

Toby

[tontechniker]

Bei zwei Sekunden sollte GD imho kein Problem sein, hier hast du die volle Kontrolle und jeder Browser kann das nativ darstelllen (gif/png/jpg) - nicht jeder nutzer möchte erstmal etwas installieren.

[Skaschy]

Die Frage ist, bei wieviel Benutzern wirds problematisch?

Teilweise sind es sehr komplexe Datensätze die visualisiert werden müssen, zbs. aus einer Live Datenbank Einzelverbindungsdaten, dazu kommt dann noch die GD2 Berechnung.

Ich bin da etwas misstrauisch.

[highrise]

Da es bei der Anwendung um schnell aktualisierende Daten geht, würde ich auf jeden Fall einen Ansatz wählen, der dem Client nur Rohdaten (keine Bilddaten) zur Verfügung stellt.

Das Zeichnen der Diagramme lässt sich (mit etwas mehr Aufwand) auch in JavaScript auf dem Client realisieren.

Da ich die Struktur deiner Daten nicht kenne, kann ich nur raten. Falls es nicht um komplett unterschiedliche Datensätze sondern nur um Aktualisierungen der bereits geladenen Daten geht, die in ca. 2s Abständen erfolgen, macht auch ein Server-Push Verfahren Sinn...

Der Client erhält in dem Fall nur dann neue Daten, wenn sich wirklich etwas geändert hat, und er schaut nicht regelmässig mal auf gut Glück nach... ein nahezu Server-Push wäre auch schon per XHTMLRequest (das Kunstwort heißt AJAX... ich hasse Putzmittel in meinem Browser, deshalb verzichte ich auf dieses neudeutsch) möglich...

Beispiele für interessante Umsetzungen und Ideen gibt es auch hier:

http://www.lightstreamer.com/demos.htm

greetz, high

[PHP-Desaster]

ein nahezu Server-Push wäre auch schon per XHTMLRequest (das Kunstwort heißt AJAX... ich hasse Putzmittel in meinem Browser, deshalb verzichte ich auf dieses neudeutsch) möglich...

Dann aber bitte auch Richtig: XmlHttpRequest

Spricht etwas gegen eine Java oder Flash-Lösung?

[Skaschy]

Hallo,

danke für die Anregungen.

Es handelt sich bei den Datensätzen um Live EVN's (Einzelverbindungsnachweise) von Telefongesprächen.

Da geht um eine Visualisierung von Verbindungsstatistiken von div. Rufnummer (in / out peak) usw. sowie weitere interne Statistiken.

Das Problem an der Sache ist, es darf kein extra Plugin installiert werden, so die Bestimmung, deshalb fallen Sachen aus der Java / Flash Welt weg.

Habe nun den Weg gewählt, dass Basis Diagramm als solches in SVG zu erstellen und konvertiere dieses in Canvas (Javascript), damit habe ich die Möglichkeit die Rechenlast grössteteils auf den Client PC zu übertragen und kann die Diagramme als Image zum Download anbieten (JPEG/ PNG).

Somit habe ich eine Browserplattform unabhängige und keine Plugin basierte Lösung.


Mal schauen wie Performant das ist.