Diagramme: Probleme + Feature Requests

[Robert_Mini]

Hallo zusammen!

Diagramm Touchbedienung ==> echt cool.

Hinsichtlich Anforderungen:
- x-y Diagramm feature (rrd1 vs. rrd2)
- Balkendiagramm zB Monatsverbräuche

Nice to haves - aber nett :-)

Lg
Robert

[tuxedo]

Gefällt mir von der Touch-Bedienung her. Und wenn man am PC weiß dass man mit einem Doppelklick wieder raus zoomt... eigentlich ganz brauchbar. Könnte aber etwas flüssiger in der Bedienung sein (ruckelt etwas auf meinem Nexus4).

Lizenz und Beispielcode hab ich noch nicht gesichtet.

[update]
Ok, nur die Demo auf der Startseite ruckelt etwas. Der rest bei den Demos geht eigentlich ganz gut.

[NetFritz]

Hallo an.
Schaut euch mal http://dygraphs.com/
Zoomen geht auch.
Gruß NetFritz

[NetFritz]

Hallo
Wenn man den Slider so umsetzt wie hier http://code.shutterstock.com/ricksha...les/multi.html
Gruß NetFritz

[jolt]

Genau, gibt es aber alles: http://code.shutterstock.com/ricksha...les/lines.html

Frage ist nur: Kann man alles kombinieren...

[tuxedo]

Ja, der ist nicht sooo schlecht. Allerdings fehlt mir da die Anzeige des Werter unter der Maus/dem Finger wenn man klickt/touched.

[jolt]

Ist mir auch sofort aufgefallen. Im Diagram selbst ist allerdings auch doof, da man (also ich zumindest) dort ja gerne Ist Werte bei Touch ablesen möchte. d3.js bietet aber einen Modus an, der ähnlich zu Highcharts / amCharts ist: http://bl.ocks.org/mbostock/1667367

Den finde ich sehr gelungen, vielleicht kann man das ja auch mit Rickshaw umsetzen.

[tuxedo]

In den Demos ist das Panning allerdings für meinen Geschmack nicht ganz so prickelnd. Ich muss unten einen 2-Punk-Slider einstellen um sowohl den Ausschnitt als auch den Zeitpunkt zu bestimmen.
Das mit dem Ausschnitt, okay. Wenn man dann wenigstens mit der Maus/dem Finger den Ausschnitt direkt im Diagramm verschieben könnte.

Oder hab ich da etwas übersehen?


Gruß
Alex

[NetFritz]

Hallo
Rickshaw gefällt mir, besonders das Demo. http://code.shutterstock.com/rickshaw/examples/extensions.html
Auf der Seite http://code.shutterstock.com/rickshaw/ sieht der Code sehr übersichtlich aus.
Gruß NetFritz

[jolt]

Wie gesagt, Grafana ist kein Charting Widget sondern ein ganzes Dashboard (= Visu) inkl. Userverwaltung und vielem mehr. Das sieht man auch in deinem Link (der übrigens zur Grafana Homepage zeigt).

Wer so ein ganzes Dashboard möchte kann das ja einfach in CV per iframe einbinden. Spricht nichts dagegen, man muss sich halt nur darüber klar sein, welcher Technologie Stack daran hängt und das es eben keine optische Integration gibt, sondern man hat dann eine Visu in der Visu.

Ich habe mittlerweile noch Rickshaw entdeckt. Das ist im Prinzip eine Library die D3.js nutzt um die Charts zu erstellen, gleichzeitig aber ein Easy to Use Interface ala Highcharts / amCharts bereit stellt. Könnte die Lösung unseres Problems sein, muss ich mir aber noch genauer angucken.

[NetFritz]

Hallo
Grafana : The leading graph and dashboard builder for visualiesierung time series metrics.
Hier mal Grafana in Aktion. http://ffka.xylou.info/#/dashboard/file/pernode.json
http://play.grafana.org/
Und wir wollen doch time serien metrics darstellen?
Gruß NetFritz

[jolt]

Können den diese Libraries von Haus aus rrds oder auch InfluxDB darstellen?
Oder muss man für jede DB ein eigenes Backend schreiben, das die DB-Daten dann in ein Time-Value Format konvertiert?

Das sind alles reine Javascript Libraries, die auf dem Client laufen. Viel mehr als JSON parsen geht daher technisch schon nicht. Manche können noch CSV oder TSV, dass war es dann aber auch. Man braucht also immer ein Backend, dass die Daten anliefert und dabei auf die gewünschten Datenbankformate zurückgreift.

[MGK]

Hmm, ist nicht die CV zum großen Teil GPL Code? Ich sehe nicht wie die genannten Alternativen da lizenzmässig sauber reinpassen sollen.
Highcharts würde ich nicht nehmen bei so komischen Bedingungen.

Michael

P.S. Wie wäre es mit Rrdtool direkt? Ist aber sehr statisch, das stimmt.

[NetFritz]

Hallo
Können den diese Libraries von Haus aus rrds oder auch InfluxDB darstellen?
Oder muss man für jede DB ein eigenes Backend schreiben, das die DB-Daten dann in ein Time-Value Format konvertiert?
Gruß NetFritz

[jolt]

Ich habe drei Libraries gefunden, von denen ich aktuell ausgehe, dass man damit oben gelistete Anforderungen halbwegs umsetzen kann:

1. Highcharts / Highstocks (Demo)
2. amCharts (Demo)
3. D3.js (Demo)

Es gibt noch eine ganze Reihe anderer Libraries, Übersicht z.B. hier: http://www.sitepoint.com/15-best-jav...ing-libraries/

Vieles ist davon aber direkt herausgefallen, entweder gibt es keine Entwicklung mehr, Touch hat nicht richtig funktioniert (nur getestet mit iPad 2), kein Pan + Zoom, etc etc. Die 3 verbleibenden Kandidaten sind allesamt extrem mächtige Werkzeuge, mit denen man extrem viele und abgefahrene Sachen machen kann. Leider sind es auch alles keine No Brainer:

1. Highcharts: Open Source, kostet aber Geld für kommerzielle Anwendung. Richtig übel wird es, wenn man den Source Code mit seinem Produkt verteilen will, dann braucht es eine OEM Lizenz, für die nicht mal ein Preis auf der Webseite steht. Das ist für CV direkt vermutlich noch kein Problem, built-in Support auf dem Wiregate wird dann aber teuer oder fällt ganz aus.

2. amCharts: Nicht Open Source, Free für Privat + Kommerziell, dann aber jeweils mit Werbelink im Chart. Dafür gibt es einen ziemlich genialen Editor mit dem selbst Noobs ihre Charts zusammenklicken können: Hier

3. D3.js: Open Source, Free für Privat + Kommerziell. Problem hier: Flot, Highcharts und amCharts sind jeweils eine Art widget. Parameter setzen, Daten füttern, Chart fällt raus. D3.js ist dagegen eher eine Charting Programmiersprache. Das ist nichts für Noobs, da braucht es dann ein paar sinnvolle Presets und ggf. eine Möglichkeit weitere Presets, die jemand anderes erstellt hat, schmerzfrei einbinden zu können.

Ich bin geneigt Highcharts aufgrund der Lizenzproblematik von der Liste zu streichen. Blieben noch zwei...