Erstelle tolle Diagramme mit Angularjs

In der Arbeitswelt, wie auch in unserem privaten Leben, haben wir ständig mit großen Datenmengen zu tun. Oft ist das schnelle Erfassen dieser Daten wichtig, Tabellen und Zahlenkolonnen sind jedoch schwer zu lesen und die Bedeutung der Zahlen erschließt sich dabei oft nicht sofort. Die grafische Darstellung von Daten in Diagrammen ist also die perfekte Lösung. Dies gelingt mit Angularjs schnell und unkompliziert.

Was ist Angularjs?

pic_angularAngularjs ist klientseitiges Open-Source-Webframework, welches auf Java-Script basiert mit dem sich verschiedene Webanwendungen erstellen lassen. Diagramme und sogar interaktive Diagramme gehören dazu. Es wird von Google entwickelt und unter anderem in der Softwareentwicklung und bei Komponententests eingesetzt.

Tolle Diagramme mit Angularjs

Um Diagramme mit Angularjs zu erstellen benötigt man eben nur noch eine Grafikkomponente für sein Projekt. Der Einfachheit halber sei hier das FusionCharts Plugin für Angularjs empfohlen.

Die Erstellung eines Diagramms funktioniert dann in den folgenden 5 Schritten:

  • – 1) Die Daten vorbereiten: Die Daten müssen in einem zu FusionCharts kompatiblem Format vorliegen. JSON und XML Daten sind hier möglich.
  • – 2) Einfügen der 3 Java-Script Dateien: Wie bei jeder Webanwendung müssen die 3 Java-Script Dateien eingefügt werden. Hier sind es: Die Core AngularJS Bibliothek, die FusionCharts JavaScript Grafik-Bibliothek und die Bibliothek für das Angularjs Charts Plugin.
  • – 3)Erstellung der Angularjs App: Nachdem die 3 JavaSript Dateien eingefügt sind kann die Angularjs App erstellt werden. Dabei wird als FusionCharts Modul das FusionCharts Plugin eingesetzt.
  • – 4) Den Angular Controller festlegen: Hier wird der Controller für der Daten der Angularjs Anwendung festgelegt. Der Steuerungsbereich wird dazu um die FusionCharts Chart-Definition erweitert.
  • – 5) Die eigentliche Diagrammerstellung: Hier werden die Diagrammparameter wie Höhe, Breite, Typ und das Datenformat des Diagramms festgelegt.

Mit diesen 5 Schritten hat man ein simples Angularjs Diagramm erstellt. Um das Diagramm nun wirklich toll zu machen fügt man nach Bedarf und Laune Diagramm-Attribute ein. Hier gibt es wirklich hunderte von Optionen und die beste Möglichkeit herauszufinden, welche davon das eigene Diagramm interessant, wirkungsvoll und ästhetisch schön machen ist es, diese Diagrammattribute am selbsterstellten Diagramm einfach auszuprobieren.