Xpert.ivy Code Rezept: PrimeFaces Charts anzeigen

Problem

Sie wollen Charts in Ihren Html User Dialogen anzeigen.

Lösung

PrimeFaces hat out of the box diverse Chart Komponente die einfach in die Html User Dialoge integriert werden können.

In diesem Tutorial zeige ich, wie man Bar-, Line- und MeterGaugeChart konfiguriert und in einem Html User Dialog anzeigt.

Abb. 1: Chart Demo

SVN

Sie können das fertige Projekt per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importieren.

Code

Charts in PrimeFaces zu erstellen ist relativ einfach. Alles was man braucht ist das richtige ChartModel. Für Bar- und Linechart ist es das CartesianChartModel. Für das MeterGaugeChart das MeterGaugeChartModel.

Hier ein Beispiel wie man das Barchart Konfiguriert.

Code-Snippet 1: Barchart konfigurieren

Das CartesianChartModel an sich hat keine Daten. Die Daten werden durch ChartSeries Objekte konfiguriert. Im Fall von Code-Snippet 1 sind dies 2.

Das Linechart kann fast gleich konfiguriert werden, mit dem Unterschied, dass anstelle der ChartSeries LineChartSeries verwendet werden.

Code-Snippet 2: Linechart konfigurieren

Zu guter Letzt noch ein spezielles Chart: Das MeterGaugeChart. Oder in Deutsch einfach TachometerChart.

Code-Snippet 3: MeterGaugeChart konfigurieren

Im Gegensatz zu den 2 vorherigen Charts benötigt das MeterGaugeChart ein MeterGaugeChartModel. Dieses Model nimmt als Konstruktor-Parameter den Tachostand und die Intervalle, in die der Tacho eingeteilt ist, entgegen.

Die Charts selber in den Html User Dialog einzubetten ist trivial.

Code-Snippet 4: Charts in Html User Dialog einbetten

Jedes Chart bietet diverse Attribute um Aussehen und Verhalten zu steuern. Am besten schauen Sie sich die PrimeFace Demos und die PrimeFaces Dokumentation dazu an.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Keine Kommentare:

Kommentar veröffentlichen

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.