Was'n das jetzt schon wieder?
Dieses Plug-In ist wieder einmal aus der Notwendigkeit gepaart mit Neugier heraus entstanden. Ja, gesehen habe ich das bei Google und es mag sein, daß es soetwas auch schon wo anders gibt. Spass gemacht hat es aber trotzdem ;)
Also ich wollte so ein ganz einfaches Chart haben, wo ich ohne viel Aufhebens Werte reinstopfen kann - und zwar im Zeitverlauf. SVG kann ich nicht, wollte ich nicht lernen und schien mir in diesem Falle zu viel des Guten. Aus diesem Grunde funktioniert die gesamte Sache per JavaScript und CSS.
Live-Demo
Von links nach rechts ... | ... sknil hcan sthcer noV |
Einfach mal ausprobieren ...
Das Demo wählt alle 500 Millisekunden per Zufall aus, ob eine neue Spalte hinzugefügt oder der Wert der rechtesten Spalte neu gesetzt werden soll. Das mag ein wenig hektisch ausssehen, demonstriert aber die Möglichkeiten.
Bedienung und Programmatisches
Das Plugin kennt eigentlich nur wenige Funktionalitäten, nämlich die Initialisierung und ein paar nützliche Funktionen.
1. Initialisierung
Bei der Initialisierung kann ein Object wie folgt übergeben werden (die hier angegebenen Werte entsprechen den eingebauten Default-Werten):
{
direction : "rtl",
rows: {
maxValue : 100,
stepWidth : 20
},
columns : {
number: 10,
values: [0,0,0,0,0,0,0,0,0,0],
}
}
Die Parameter im Einzelnen:
- direction
- Gibt die Richtung an, in die die Spalten wandern. Mögliche Werte sind RTL und LTR.
- rows
- Dieser Bereich definiert die Reihen, also die horizontale Skala.
- maxValue
- Der größtmögliche Wert, den eine Spalte darstellen kann. Wird eine Spalte auf einfen größeren Wert gesetzt, so wird automatisch eine weitere Reihe in der angebenen stepWidth hinzugefügt.
- stepWidth
- Die Schrittweite der einzelnen Spalten. Beispiel: Ein maxValue von 100 und ein stepWidth von 20 ergeben 5 Reihen.
- columns
- Dieser Bereich definiert die Spalten bei der Initialisierung.
- number
- Definitert die Anzahl der leeren Spalten, die erzeugt werden sollen.
- values
- Definiert die Initialwerte der einzelnen Spalten. Dieser Parameter ist optional, wenn number gegeben ist.
Alternativ kann das Plugin die Konfiguration auch aus dem HTML 5 Atribute "data-" auslesen, wenn dieses mit einem korrekten(!) JSON-String befüllt ist. Beispiel:
<div class="runningBarChart" data-runningbarchart='{"rows":{"maxValue":200}}' ></div>
Neuere Browser können das.In diesem Fall werden die eingebauten Default-Options von den lokalen Option des HTML-Tags überschrieben und dann von den per Initialisierungsaufruf übergebenen. Mehr geht nicht - echt nicht.
2. addColum(value = 0)
Diese Methode fügt je nach Einstellung von direction links oder rechts einen neue Spalte ein und setzt diese auf den übergebenen Wert.
2. setColumnValue(value)
Diese Methode setzt der Wert der ersten Spalte ( das ist je nach Einstellung von direction links oder rechts) auf einen neuen Wert.
3. addRow(value = rows.maxValue + rows.stepWidth)
Fügt eine neue Reihe hinzu, entweder mit dem übergebenem Wert (Vorsicht: Wird nicht überprüft!) oder einfach einen Schritt weiter.
4. getColumnValue()
Liefert den Wert der aktuellen "Arbeitsspalte". Das ist - je nach Einstellung von direction links oder rechts - die Spalte
des linken oder rechten Randes. Dabei ist eine jQuery-Besonderheit zu bearchten:
jQueryMethoden können sich je nach Selector auch auf mehre "Objekte" beziehen. Aus diesem Grund liefert diese Funktion entweder einen
einzelnen Wert oder ein Array mit allen Werten der "Arbeitsspalten" aller per jQuery-Selektor angesprochenen "Objekte".
Styling und Design
Die Styles an sich sollten selbstreden sein, außerdem würde eine genau Erklärung hier zu weit führen. Aber ein paar nicht sofort ersichtliche Spezialitäten sollten hier angemerkt sein:
- Der Inhalt von Spalten erhält zusätzlich die Class low oder high, wenn eine Spalte in der untersten oder der obersten Reihe der Skala endet. Somit können Extremwerde ausgezeichnet werden. Derzeit wird das verwendent, ob das label vernünftig sichtbar zu machen.
-
[Version 0.1.4] Dem Ziel-Element wird noch die Class der Richtung, als "rtl" oder "ltr" begefügt. So kann mit CSS-Asudrücken wie ".runningBarChart.rtl" alles mögliche
weiters gestylt werden.
So wird zum Beispiel mit der folgenden Anweisung die Reihenbeschriftungen rechts anstatt links ausgerichtet, wenn die Spalten von links nach rechts wandern:
.runningBarChart.ltr .row-area .content .row .label { text-align: right; }
Abschließendes
Ist noch lange nicht perfekt - schon klar - daher hier ein paar Todos und bekannte Probleme:
- Nicht auf allen möglichen Browsern getestet, funktioniert aber nachweislich unter
FireFox 15.1, Chrome 21.0, Internet Explorer 9.0 (8.0 hat Darstellungsfehler, 7.0 ist Schrott).
Sorry - aber Opera mit seinen 2% ist mir herzlich egal. Nice try, guys. - Ungenügendes Verhalten bei Spaltenwerten unter 0 - es werden einfach keine Werte unter 0 zugelassen.
- Animiation ist immer da, kein Ein- oder Ausschalten.
- Fehlende Event-Handler für Custom-Code.
- Kein "on-the-fly" Umschalten der Bewegungsrichtung.
- Keine Möglichkeit, Spalten- und Zeilenbeschriftungen zu beeinflussen. Zb: Kein "100%", "50 Zugriffe" oder ähnliches.
- Reihen werden nicht wieder reduziert, wenn die Spaltenwerte zu klein sein.
- Bei "LTR" wird die Spalte ganz rechts nicht schön weich rausgeschoben, sondern verschwindet einfach. Version 0.1.4
Und zum Runterladen gibt es die aktuellste Version 0.1.4 natürlich auch noch. Wünsche, Anregungen und Beschwerden bitte an einfach an salzamt@chroot.at senden.