Cela fait longtemps que je souhaite consacrer un article sur les graphiques en JSF. Après avoir essayé plusieurs solutions je n’ai été convaincu par aucune librairie. Il me semble que la plus intéressante est la solution proposée par PrimeFaces. Ce que je n’aime pas dans cette approche c’est d’utiliser les classes spécifiques de la librairie JSF pour décrire les séries et non des collections simples. De plus, je ne trouve pas les graphiques très dynamiques. En tout cas pas à la hauteur des librairies Javascripts ou Flex qui existent actuellement.
Deux librairies Javascipts me semblent très performantes d’un point de vue utilisateur et développeur :
- amCharts :
- graphiques dynamiques, diversifiés, professionnels
- licence gratuite
- Highchart :
- graphiques dynamiques, diversifiés, professionnels
- approche déclarative des graphiques
- licence nécessaire selon le type d’utilisation
C’est l’approche déclarative des graphiques qui m’a convaincue de la fiabilité d’une librairie JSF basée sur Hightchart. On retrouve le même principe déclaratif dans les interfaces xhtml proposées par JSF. Je me suis donc lancé dans la création de cette librairie qui est un wrapper JSF de Highchart : jsfcharts. La demo ce trouve hébergée ici : http://showcase-jsfcharts.rhcloud.com/home.jsf.
Mon objectif : proposer une solution efficace à développer, agréable à utiliser et compatible avec plusieurs systèmes (PC, mobile, multi-navigateurs). C’est à dire :
- Rapide : peu de lignes à coder
- Simple :
- objets simples sans préparation
- Utilisation transparente de la librairie
Au final, créer un graphique dynamique en JSF est presque aussi simple que créer un tableau (h:dataTable). Par exemple, pour le graphique ci-dessous, il faut écrire ce fichier xhtml et cette classe java :
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:jsfcharts="http://everythingiswrong.org/jsfcharts"
template="/WEB-INF/templates/default.xhtml">
<ui:define name="content">
<jsfcharts:chart id="test" marginRight="130" marginBottom="25">
<jsfcharts:title text="Monthly Average Temperature" />
<jsfcharts:subtitle text="Source: WorldClimate.com" />
<jsfcharts:xAxis categories="#{chartBean.abscisse}" />
<jsfcharts:yAxis>
<jsfcharts:title text="Temperature (˚C)" />
</jsfcharts:yAxis>
<jsfcharts:legend layout="vertical" align="right" verticalAlign="top" x="-10" y="100" borderWidth="0"/>
<jsfcharts:tooltip valueSuffix="˚C" />
<jsfcharts:series>
<jsfcharts:serie label="Tokyo" value="#{chartBean.tokyo}" />
<jsfcharts:serie label="New York" value="#{chartBean.newYork}" />
<jsfcharts:serie label="Berlin" value="#{chartBean.berlin}" />
<jsfcharts:serie label="London" value="#{chartBean.london}" />
</jsfcharts:series>
</jsfcharts:chart>
...
</ui:composition>
package org.everythingiswrong.jsf.jsfchartsdemo;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.inject.Model;
@Model
public class ChartBean {
private Double[] tokyo;
private Double[] newYork;
private Double[] berlin;
private Double[] london;
private List<String> abscisse;
// Getter, Setter ...
@PostConstruct
public void initialize() {
tokyo = new Double[] {7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6};
newYork = new Double[] {-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5};
berlin = new Double[] {-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0};
london = new Double[] {3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8};
abscisse = Arrays.asList(new String[] {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"});
}
}
Pour aller plus loin, je vous invite à visiter le projet github de JSFCharts : https://github.com/yanLanglois/jsfcharts.
Comments (2) 
