Primefaces Charts

Kleines HowTo für alle die Chartes von Primefaces benützen möchten. Um es vorweg zu nehmen. Es ist leider nicht möglich eine DateTime X Achse zu nutzen. Wir benützen hierzu um dem ganzen Abhilfe zu schaffen KW/Jahr (Kalenderwoche/Jahr). Es ist natürlich auch möglich Monat/Jahr oder ähnliches zu verwenden.

Primefaces arbeitet hierbei im Backend mit jQuery und einer eigens angefertigten charts.js … Leider hatte ich bisher noch keine Zeit mich genauer mit dieser File auseinander setzen zu können.

Auf der JSF Seite ist es ein Einzeiler. Super von den Primefaces Jungs umgesetzt.

<p:lineChart id="linear" value="#{chartBean.linearModel}" legendPosition="e"  
     title="Linear Chart" minY="0" maxY="10" style="height:300px"/>

Die Java Seite ist etwas umständlicher aber auch hier ist es sehr schlank gehalten.

package org.primefaces.examples.view;  
  
import java.io.Serializable;  
  
import org.primefaces.model.chart.CartesianChartModel;  
import org.primefaces.model.chart.ChartSeries;  
import org.primefaces.model.chart.LineChartSeries;  
  
public class ChartBean implements Serializable {  
  
    private CartesianChartModel categoryModel;  
  
    private CartesianChartModel linearModel;  
  
    public ChartBean() {  
        createCategoryModel();  
        createLinearModel();  
    }  
  
    public CartesianChartModel getCategoryModel() {  
        return categoryModel;  
    }  
  
    public CartesianChartModel getLinearModel() {  
        return linearModel;  
    } 
    private void createLinearModel() {  
        linearModel = new CartesianChartModel();  
  
        LineChartSeries series1 = new LineChartSeries();  
        series1.setLabel("Series 1");  
  
        series1.set(1, 2);  
        series1.set(2, 1);  
        series1.set(3, 3);  
        series1.set(4, 6);  
        series1.set(5, 8);  
  
        LineChartSeries series2 = new LineChartSeries();  
        series2.setLabel("Series 2");  
        series2.setMarkerStyle("diamond");  
  
        series2.set(1, 6);  
        series2.set(2, 3);  
        series2.set(3, 2);  
        series2.set(4, 7);  
        series2.set(5, 9);  
  
        linearModel.addSeries(series1);  
        linearModel.addSeries(series2);  
    }  
}

Ich habe hier zu großen Teilen das Tutorial von Primefaces benützt weil es super einfach beschrieben ist und übersichtlich. Hier gehts zum Orginalbeitrag.

Schreibe einen Kommentar

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