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.