Ajouter des graphiques dynamiques dans un projet de site web avec Play Framework et Jfreechart.

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

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.

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.

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

Création d'un projet play.
Le projet est crée. Nous allons nous positionner dans le 
répertoire de travail. 

Changer de répertoire

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
Resolution des dependancesLe 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
run programme play

Le résultat.

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

Le resultat

Les limites

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

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.

Publicités

A propos Duarte TERENCIO

Chef de projet et Architecte J2EE - Portail d'entreprise - Cloud computing Vous trouverez plus d'information sur la page "Me contacter"
Cet article, publié dans Programmation, est tagué , . Ajoutez ce permalien à vos favoris.

2 commentaires pour Ajouter des graphiques dynamiques dans un projet de site web avec Play Framework et Jfreechart.

  1. Damien dit :

    un projet assez sympa qui utilise JFreeChart en toile de fond avec une servlet dédiée au rendering et une tag lib spécifique pour la partie présentation : cewolf http://cewolf.sourceforge.net/new/index.html qui a eut un moment un coup de mou (2007) mais qui est redevenu actif.

  2. Johnb907 dit :

    Keep working ,impressive job! cdkedefadkeb

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s