Dans cet article, j’explique comment construire un graphique (camembert, histogramme, courbe) pour un projet de site web. Je présente uniquement la partie création d’une image à la volée, et l’inclusion dans une page (un template) HTML.

C’est un article technique , avec un programme source de démonstration autour

• du framework de développement Play Framework 1.2.X (4),
• de la librairie java open source : Jfreechart.

C’est un article rapide.

Préambule

Il existe de nombreuses manières pour concevoir des graphiques ( histogramme, camembert, courbe) pour un site WEB.

Il est possible d’utiliser des librairies javascript pour créer des graphiques à la volée sur le navigateur du client. Le traitement est réalisé sur le poste client.

• Google Charts Api,
• Highcharts,
• et beaucoup d’autres .

Coté serveur, nous pouvons faire appel à des solutions externes de génération de graphique. La solution fonctionne bien.

L’objectif de cet article, est de présenter une solution simple, qui utilise une libraire open source Jfreechart. La librairie Jfreechart est une librairie graphique complète, sous licence LGPL, avec de nombreuses fonctionnalités et beaucoup d’options. Elle demande un investissement personnel, pour comprendre les nombreuses options.

Le but de cet article est de créer une image, qui représente un camembert,  un graphique et de l’intégrer dans une page HTML.

Avant de commencer.

Il faut installer le Framework Play 1.2.4 (lien).

Je vous propose de suivre les procédures suivantes pour installer et configurer Play Framework sur votre machine.

• Pour windows,
  
• Pour mac et linux et aussi autre article.

Construire un nouveau projet

Il faut ouvrir une console CMD (command ou DOS) sous windows,  ou un terminal sous Mac / Linux. Je vous laisse parcourir les répertoires pour choisir votre répertoire de travail.

Nous allons construire un nouveau projet.

play new jfreechartplay

Il faut taper sur la touche Entrée, plusieurs fois, pour valider les options


Le projet est crée. Nous allons nous positionner dans le 
répertoire de travail. 

Ajouter la librairie graphique dans le projet

Nous allons éditer le fichier /conf/dependencies.yml

# Application dependencies

require:
    - play -> play 1.2.4
    - jfree -> jcommon 1.0.6
    - jfree -> jfreechart 1.0.2

Pour prendre en compte la librairie, il faut résoudre les dépendances.

play deps
Le traitement télécharge les librairies dans le répertoire lib.

Créer un nouveau contrôleur.

Nous allons créer un nouveau fichier Charts.java , dans le répertoire \app\controllers\

package controllers;

import play.*;
import play.mvc.*;

import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;

import javax.imageio.ImageIO;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.data.general.DefaultPieDataset;

//import models.*;

public class Charts extends Controller {

    public static void index() {
        render();
    }

    public static void apie() throws IOException {
        DefaultPieDataset data = new DefaultPieDataset();
        data.setValue("Category 1", 250);
        data.setValue("Category 2", 500);
        data.setValue("Category 3", 310);

        JFreeChart chart = ChartFactory.createPieChart("Sample Pie Chart",
                data, true, // legend?
                true, // tooltips?
                false // URLs?
                );
        BufferedImage bf = chart.createBufferedImage(500, 500);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(bf, "jpg", baos);
        baos.flush();
        byte[] imageInByte = baos.toByteArray();
        baos.close();
        InputStream is = new ByteArrayInputStream(imageInByte);

        response.contentType = "image/jpg";
        renderBinary(is);
    }

...
}

Ajouter une route vers le controleur

Nous allons modifier les routes, dans le fichier \conf\route

# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# Home page
GET     /                                       Application.index

GET     /images/pie                             Charts.apie

Modifier la vue.

Nous allons modifier la vue principale de l’application pour faire appel au rendu graphique, dans le fichier Application/index.html

#{extends 'main.html' /}
#{set title:'Home' /}

<h1>Affichage d'un camembert</h1>
<br/>
Génération d'un camembert à la volée.
<br/>
<img src="@{Charts.apie()}" />
<br/>
<br/>
Fin<br/>

Lancer le programme.

Taper play run

Le résultat.

Il faut taper l’url suivante dans son navigateur internet : http://localhost:9000/

Les limites

Vous trouverez un programme source beaucoup plus complet, avec plusieurs graphiques.

• https://github.com/TNT44/JfreechartPlay

Le programme ci-dessus fonctionne correctement sous windows et MAC. Il n’est pas  optimisé (factorisé).

La libraire Jfreechart consomme des ressources CPU et de la mémoire sur le serveur lors de la génération des images.

Je vous conseille de :

• limiter le nombre de graphique par page,
• limiter le nombre d’usage de la génération graphique,
• construire des graphiques simples,
• mettre en place des systèmes de cache , pour conserver les images.

Merci de me laisser des commentaires.