Running Bar Chart - A Funny But Usefull jQuery Plug-In



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:

Abschließendes

Ist noch lange nicht perfekt - schon klar - daher hier ein paar Todos und bekannte Probleme:

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.