Denis Potschien 17. August 2012

Webdesign: JustGage bereitet trockene Zahlenwerte grafisch ansprechend auf

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:

<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:

<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:

<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:

<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

Denis Potschien

Denis Potschien ist seit 2005 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. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.