Diagramme helfen dabei, abstrakte Inhalte besser zu veranschaulichen. Gerade bei Zahlen ist es oft hilfreich, diese in Form eines Diagramms darzustellen. Das macht sie anschaulicher und leichter erfassbar. Das JavaScript-Plugin JustGage erzeugt Diagramme als animierte Messanzeige und bereitet somit auch einfache Zahlenwerte ansprechend auf.

Diagramme wie Tachometer

Gerade bei einfachen Angaben ist es nicht einfach, diese grafisch sinnvoll darzustellen. JustGage macht aus diesen Werten schicke Messanzeigen, die an klassische Tachometer erinnern. Diese werden zudem auch noch animiert, sodass das Tacho-Feeling fast perfekt ist.

Das Plugin nutzt zur grafischen Darstellung der Anzeige die JavaScript-Bibliothek Raphaël, die zusammen mit dem Plugin ins HTML-Dokument eingebunden werden muss:

1
2

<script src="raphael.2.1.0.min.js"></script>
<script src="justgage1.0.min.js"></script>

Anschließend wird per HTML ein Container-Element erstellt, in welches JustGage die Messanzeige platzieren soll. Dem Element muss eine Breite und Höhe sowie eine ID zugewiesen werden, damit das Plugin darauf zugreifen kann:

1

<div id="tacho" style="width: 300px; height: 200px"></div>

Das Diagramm passt sich immer der Größe des Containers an. Zu guter Letzt sorgt ein kleiner JavaScript-Abschnitt dafür, dass die Messanzeige inklusive der darzustellenden Werte innerhalb des Containers platziert wird:

1
2
3
4
5
6
7
8
9

<script>
  var g = new JustGage({
    id: "tacho", 
    value: 27, 
    min: 0,
    max: 100,
    title: "Bezeichnung"
  }); 
</script>

Über ein Klassenobjekt werden verschiedene Parameter mit den Werten und dem Titel sowie weitere optionale Angaben an das Plugin übergeben. Als Werte sind ein Mindest- („min“) und ein Höchstwert („max“) sowie der eigentliche darzustellende Wert („value“) anzugeben.

Individuelle Anpassung möglich

Die mit JustGage erzeugten Diagramme lassen sich nun noch individuell gestalten. Neben der Schriftfarbe besteht auch die Möglichkeit, die Farbe des Messbalkens anzupassen:

1
2
3
4
5
6

<script>
  var g = new JustGage({
    …
    titleFontColor: "#000000",
    valueFontColor: "#000000",
    levelColors: ["#00c8ff", "#7800ff"]

  }); 
</script>

Der Messbalken nimmt je nach angezeigtem Fortschritt eine andere Farbe an. Die verschiedenen Farben werden als Array („levelColor“) übergeben. Standardmäßig ändert sich die Farbe von Grün über Gelb nach Rot.

Das Plugin ist unter der MIT-Lizenz veröffentlicht und läuft in allen aktuellen Browsern, einschließlich des Internet Explorer 9.

Fazit: JustGage ist eine schöne Spielerei, um einfache Zahlenangaben optisch ansprechend darzustellen. Komplex darf der darzustellende Inhalt nicht werden, da nur ein Wert innerhalb einer Zahlenspanne angezeigt werden kann.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (156)