Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 17. August 2012

Webdesign: JustGage bereitet trockene Zahlenwerte grafisch ansprechend auf

Diagramme hel­fen dabei, abs­trak­te Inhalte bes­ser zu ver­an­schau­li­chen. Gerade bei Zahlen ist es oft hilf­reich, die­se in Form eines Diagramms dar­zu­stel­len. Das macht sie anschau­li­cher und leich­ter erfass­bar. Das JavaScript-Plugin JustGage erzeugt Diagramme als ani­mier­te Messanzeige und berei­tet somit auch ein­fa­che Zahlenwerte anspre­chend auf.

Diagramme wie Tachometer

Gerade bei ein­fa­chen Angaben ist es nicht ein­fach, die­se gra­fisch sinn­voll dar­zu­stel­len. JustGage macht aus die­sen Werten schi­cke Messanzeigen, die an klas­si­sche Tachometer erin­nern. Diese wer­den zudem auch noch ani­miert, sodass das Tacho-Feeling fast per­fekt ist.

Das Plugin nutzt zur gra­fi­schen Darstellung der Anzeige die JavaScript-Bibliothek Raphaël, die zusam­men mit dem Plugin ins HTML-Dokument ein­ge­bun­den wer­den 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 wel­ches JustGage die Messanzeige plat­zie­ren soll. Dem Element muss eine Breite und Höhe sowie eine ID zuge­wie­sen wer­den, damit das Plugin dar­auf zugrei­fen 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 klei­ner JavaScript-Abschnitt dafür, dass die Messanzeige inklu­si­ve der dar­zu­stel­len­den Werte inner­halb des Containers plat­ziert wird:

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

Über ein Klassenobjekt wer­den ver­schie­de­ne Parameter mit den Werten und dem Titel sowie wei­te­re optio­na­le Angaben an das Plugin über­ge­ben. Als Werte sind ein Mindest- („min“) und ein Höchstwert („max“) sowie der eigent­li­che dar­zu­stel­len­de Wert („value“) anzu­ge­ben.

Individuelle Anpassung möglich

Die mit JustGage erzeug­ten Diagramme las­sen sich nun noch indi­vi­du­ell gestal­ten. Neben der Schriftfarbe besteht auch die Möglichkeit, die Farbe des Messbalkens anzu­pas­sen:

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

Der Messbalken nimmt je nach ange­zeig­tem Fortschritt eine ande­re Farbe an. Die ver­schie­de­nen Farben wer­den als Array („levelColor“) über­ge­ben. Standardmäßig ändert sich die Farbe von Grün über Gelb nach Rot.

Das Plugin ist unter der MIT-Lizenz ver­öf­fent­licht und läuft in allen aktu­el­len Browsern, ein­schließ­lich des Internet Explorer 9.

Fazit: JustGage ist eine schö­ne Spielerei, um ein­fa­che Zahlenangaben optisch anspre­chend dar­zu­stel­len. Komplex darf der dar­zu­stel­len­de Inhalt nicht wer­den, da nur ein Wert inner­halb einer Zahlenspanne ange­zeigt wer­den 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.

Schreibe einen Kommentar

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