comment faire des histogrammes dans une application J2EE?

Version imprimable

08/06/2007, 09h49
bylka

comment faire des histogrammes dans une application J2EE?

bonjour

je developpe une application J2EE ,et j'utilise hibernate et struts ,mon probléme c'est que je récupére des données de ma BDD puis je calcul des statistiques que je veux afficher sous forme d'un histograme dans une page jsp,

donc le souci c'est comment transformer les données d'un tableau en un histogrames (camambert ou ...)

si quelqun a une idée ça me ferai trés plaisir

merci d'avance
08/06/2007, 11h01
c_nvy

Tu pourrais utiliser JFreeChart.

EDIT: j'avais donné un exemple dans cette discussion.
08/06/2007, 11h08
remika

Si tes graphes sont relativement simples, tu peux aussi utiliser cewolf, taglib basé sur JFreechart. N'hésite pas à utiliser le format svg, ça te permet entre autre de faire des jolis "tooltips".
08/06/2007, 22h38
bylka

effectivement mes histogrammes ne sont pas compliqués je veux faire des trucs simple,histoire de représenter les données d'un tableau sous forme de (pie Chart..),par example les ventes par produit ,donc si j'ai bien compris l'outils c'est JFreeChart ,le probléme c'est que j'ai pas trouvé beaucoup de documentation et je suis un peu perdue?

SVP pour le taglib cewolf,vous n'avez pas d'example a me donner :)

merci a vous
08/06/2007, 23h08
remika

Le mieux est de suivre le suivre le tutoriel du site officiel ;) .
09/06/2007, 18h41
bylka

merci beaucoup pour le fil ,je vai essayé de suivre le tutorial:lol:

bonjour

je viens d'essayer le code que vous avez posté dans la discussion, quand j'execute ma page jsp ,l'action est executée mais j'ai pas un affichage du graphe (j'ai une croix a la place).

je vous poste mes codes:

web.xml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.4" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <init-param>
      <param-name>debug</param-name>
      <param-value>3</param-value>
    </init-param>
    <init-param>
      <param-name>detail</param-name>
      <param-value>3</param-value>
    </init-param>
    <load-on-startup>0</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  <servlet>
		<servlet-name>DisplayChart</servlet-name>
		<servlet-class>org.jfree.chart.servlet.DisplayChart</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>DisplayChart</servlet-name>
		<url-pattern>/servlet/DisplayChart</url-pattern>
	</servlet-mapping>
 
</web-app>

l'action:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
package dz.naft.struts.action;
 
import java.text.SimpleDateFormat;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import dz.naft.struts.form.GraphForm;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import org.jfree.chart.*;
import org.jfree.chart.plot.*;
import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.NumberAxis; 
import org.jfree.chart.axis.NumberTickUnit;
import org.jfree.data.time.TimeSeries;
import org.jfree.data.time.TimeSeriesCollection;
import org.jfree.data.time.Hour;
import org.jfree.data.xy.*;
import org.jfree.data.time.Month;
import org.jfree.chart.servlet.ServletUtilities;
import org.jfree.chart.axis.DateAxis;
import org.jfree.chart.axis.DateTickUnit;
import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer;
import org.jfree.chart.labels.StandardXYToolTipGenerator;
import org.jfree.chart.entity.StandardEntityCollection;
import dz.naft.struts.Graphe;
import java.text.NumberFormat;
public class GraphAction extends Action
{
  public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response)
 throws Exception
  {
	XYDataset dataset = this.createDataset() ;
 
	JFreeChart jfreechart = ChartFactory.createTimeSeriesChart("titre", "abscisse", "ordonnee", dataset, true, true, false);
 
	jfreechart.setBackgroundPaint(Color.white);
 
        XYPlot xyplot = jfreechart.getXYPlot();
 
	DateAxis dateaxis = (DateAxis)xyplot.getDomainAxis();
	dateaxis.setTickUnit(new DateTickUnit(1, 1, new SimpleDateFormat("MMM-yyyy")));
	dateaxis.setVerticalTickLabels(true);
 
	XYLineAndShapeRenderer renderer = (XYLineAndShapeRenderer)xyplot.getRenderer();
	renderer.setBaseShapesVisible(true);
	renderer.setSeriesFillPaint(0, Color.red);
	renderer.setUseFillPaint(true);
	renderer.setToolTipGenerator(new StandardXYToolTipGenerator("{0} {1} {2}",new SimpleDateFormat("MMM-yyyy"),NumberFormat.getInstance()));
 
	ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection());
 
	int largeur = 900 ;
	int hauteur = 600 ;
 
	String filename = ServletUtilities.saveChartAsJPEG(jfreechart, largeur, hauteur, info, request.getSession());
 
	Graphe graphe = this.initImage(request, info, filename);
 
	request.setAttribute("graphe",graphe) ;
 
	return mapping.findForward("success"); 
  }
  private Graphe initImage(HttpServletRequest request,ChartRenderingInfo info, String filename)
  {
	String sMap = ChartUtilities.getImageMap(filename,info);
	String src = "/servlet/DisplayChart?filename=" + filename ;
 
	String useMap = "#" + filename  ;
 
	Graphe graphe = new Graphe() ;
	graphe.setMap(sMap);
	graphe.setSrc(src) ;
	graphe.setUseMap(useMap) ;
 
	return graphe ;
  }
  private XYDataset createDataset()
  {
        TimeSeries series = new TimeSeries("Series 1", Month.class); 
        series.add(new Month(1, 2006), 805); 
        series.add(new Month(2, 2006), 883); 
        series.add(new Month(3, 2006), 664); 
        series.add(new Month(4, 2006), 813); 
        series.add(new Month(5, 2006), 732); 
        series.add(new Month(6, 2006), 805); 
 
        TimeSeriesCollection dataset = new TimeSeriesCollection(); 
        dataset.addSeries(series);
 
        return dataset ;
  }
}

ma page JSP:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
 
 <html:form  action="/graph">
<div align="center">
	${graphe.map}
	</br>
	<html:img src="${graphe.src}" usemap="${graphe.useMap}" border="0"/>
<div>
<TR>
<TD align="right"><html:submit   value="Afficher Graphe"/></TD>
<TD align="left"></TD>
</TR>
</html:form>

et struts-config.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.1//EN" "http://jakarta.apache.org/struts/dtds/struts-config_1_1.dtd">
 
<struts-config>
  <data-sources />
  <form-beans >
    <form-bean name="graphForm" type="dz.naft.struts.form.GraphForm" />
 
  </form-beans>
 
  <global-exceptions />
  <global-forwards />
  <action-mappings >
    <action
      attribute="graphForm"
      input="/graph.jsp"
      name="graphForm"
      path="/graph"
      scope="request"
      type="dz.naft.struts.action.GraphAction">
      <forward name="success" path="/graph.jsp" />
    </action>
 
  </action-mappings>
 
  <message-resources parameter="dz.naft.struts.ApplicationResources" />
</struts-config>

merci d'avance a toutes les personnes qui vont m'aider ,car je doit vraiment le réaliser dans les brefs delais

11/06/2007, 22h37
c_nvy
Ton Action GraphAction s'exécute bien avant l'affichage de la jsp ?
Normalement, le code suivant :
Code:

1 2 3 4 5 <div align="center"> ${graphe.map} </br> <html:img src="${graphe.src}" usemap="${graphe.useMap}" border="0"/> <div>
n'a pas de raison d'être dans un tag html:form.

Sinon, peux-tu montrer le code source de la page jsp (via Affichage -> Source) ?

j'ai rajouté le <html:form> pour executer l'Action ,la page jsp s'affiche en premier lieu puis il ya execution de l'action qui normalement doit retourner Graphe .excuse moi mais ya un truc qui m'echappe comment l'action peut s'executer sans mettre le tag <html:form action="/graph">?

la jsp:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <form name="graphForm" method="post" action="/TesGraf/graph.do;jsessionid=DAD12A7587EC65708E9C6F220B5497E2"> <div align="center"> </br> <img src="http://localhost:8088/TesGraf/;jsessionid=DAD12A7587EC65708E9C6F220B5497E2" border="0" usemap=""> <div> <TR> <TD align="right"><input type="submit" value="Afficher Graphe"></TD> <TD align="left"></TD> </TR> </form>
merci beaucoup pour l'interet que vous porter à mon probléme

12/06/2007, 19h20
c_nvy

Il faut exécuter l'Action qui constitue le graphe avant d'afficher la jsp parce que sinon, je ne vois pas comment il peut t'afficher le graphe dans la page.:?

Je ne connais pas la structure de ton appli mais tu peux très bien par exemple faire appel à l'Action via un html:link ou directement dans l'url via http://localhost:8080/ContexteDeTonAppli/graph.do.
12/06/2007, 19h33
bylka

j'ai essayé d'appeler l'Action directement via l'URL ,mais c'est le méme resultat (j'ai une croix rouge qui s'afiche à la plage du Graphe) ,en dirais qu'il reconnais pas le chemin de mon Graphe !!

Sinon,dans ma JSP ,je n'ai pas utilisé :

Code:

<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html" %>

comme ce que vous avez donné sur le forum ,j'etais obligé de le remplacer par

Code:

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>

parceque il me généré une erreure,
est ce que l'erreure peut etre à cause de ça?
merci c_nvy pour l'aide :)
12/06/2007, 19h36
c_nvy

Pour la directive taglib, c'est bon car tu es en J2EE 1.4.

Sinon, avec quel serveur d'application travailles-tu ? Tomcat ou autre ?

Peux-tu me montrer le code source généré de la page jsp ?

je travail avec Tomcat ,
je vous poste l'erreure retournée par Tomcat

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
INFO: Server startup in 122093 ms
12 juin 2007 18:39:19 org.apache.struts.action.RequestProcessor processMapping
SEVERE: Invalid path /graf was requested
12 juin 2007 18:40:02 org.apache.struts.util.PropertyMessageResources <init>
INFO: Initializing, config='org.apache.struts.taglib.html.LocalStrings', returnNull=true
12 juin 2007 18:40:02 org.apache.struts.util.PropertyMessageResources <init>
INFO: Initializing, config='org.apache.struts.util.LocalStrings', returnNull=true
12 juin 2007 18:40:03 org.apache.struts.util.PropertyMessageResources <init>
INFO: Initializing, config='org.apache.struts.taglib.html.LocalStrings', returnNull=true
12 juin 2007 18:40:03 org.apache.struts.util.PropertyMessageResources <init>
INFO: Initializing, config='org.apache.struts.taglib.html.LocalStrings', returnNull=true
12 juin 2007 18:40:03 org.apache.struts.util.PropertyMessageResources <init>
INFO: Initializing, config='org.apache.struts.taglib.html.LocalStrings', returnNull=true

le code source généré quand j'execute l'Action:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form name="graphForm" method="post" action="/TesGraf/graph.do;jsessionid=7B026CBDFFAD2795B9794B593523A305">
<div align="center">
	<map id="jfreechart-57610.jpeg" name="jfreechart-57610.jpeg">
<area shape="poly" coords="872,199,878,199,878,205,872,205,872,199,872,199" title="Series 1 Jun-2006 805" alt=""/>
<area shape="poly" coords="707,341,713,341,713,347,707,347,707,341,707,341" title="Series 1 May-2006 732" alt=""/>
<area shape="poly" coords="547,183,553,183,553,189,547,189,547,183,547,183" title="Series 1 Apr-2006 813" alt=""/>
<area shape="poly" coords="382,474,388,474,388,480,382,480,382,474,382,474" title="Series 1 Mar-2006 664" alt=""/>
<area shape="poly" coords="233,47,239,47,239,53,233,53,233,47,233,47" title="Series 1 Feb-2006 883" alt=""/>
<area shape="poly" coords="68,199,74,199,74,205,68,205,68,199,68,199" title="Series 1 Jan-2006 805" alt=""/>
</map>
	</br>
	<img src="/servlet/DisplayChart?filename=jfreechart-57610.jpeg" border="0" usemap="#jfreechart-57610.jpeg">
<div>
<TR>
<TD align="right"><input type="submit" value="Afficher les Prix du tarif"></TD>
<TD align="left"></TD>
</TR>
</form>

SVP je veux confirmer un truc ,pour ce code

Code:

1
2
3
4
5
 
            Graphe graphe = new Graphe() ;
	graphe.setMap(sMap);
	graphe.setSrc(src) ;
	graphe.setUseMap(useMap) ;

j'ai creer dans mon application une classe Graphe ,et voila le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
package dz.naft.struts;
 
public class Graphe {
private String map;
private String src ;
private String useMap;
public String getMap() {
	return map;
}
public void setMap(String map) {
	this.map = map;
}
public String getSrc() {
	return src;
}
public void setSrc(String src) {
	this.src = src;
}
public String getUseMap() {
	return useMap;
}
public void setUseMap(String useMap) {
	this.useMap = useMap;
} 
}

est ce que c'est Bon?

12/06/2007, 20h09
c_nvy

Le code de la classe Graphe est bon.

Vu le code source de la jsp, le graphe est bien généré et devrait s'afficher.

Peux-tu faire un test en enlevant le tag html:form et le tah html:submit ?

Citation:

SEVERE: Invalid path /graf was requested

Sinon, à quel moment fais-tu appel à une Action de path /graf ?

Le path de ton Action, c'est bien /graphe ?
12/06/2007, 20h13
c_nvy

Finalement, dans le code source, il y a quelque chose qui ne va pas.

Tu as ceci :

Code:

<img src="/servlet/DisplayChart?filename=jfreechart-57610.jpeg" border="0" usemap="#jfreechart-57610.jpeg">

alors que tu devrais avoir :

Code:

<img src="/ContexteDeTonAppli/servlet/DisplayChart?filename=jfreechart-57610.jpeg" border="0" usemap="#jfreechart-57610.jpeg">

Apparemment, tu n'utilises pas le tag html:img.
Il vaut mieux l'utiliser car il ajoute automatiquement le contexte de l'appli.
12/06/2007, 20h36
bylka

j'ai retiré les tag html:form et html:submit et c'est le méme resultat,

Sinon,pour

Code:

<img src="/ContexteDeTonAppli/servlet/DisplayChart?filename=jfreechart-57610.jpeg" border="0" usemap="#jfreechart-57610.jpeg">

j'ai corrigé l'Action comme suit:

Code:

String src = "/ContexteDeTonAppli/servlet/DisplayChart?filename=" + filename ;

,et j'ai toujour pas d'affichage?
excuse moi c_nvy ,et merci enormement pour l'aide
12/06/2007, 20h46
c_nvy

Il ne faut pas modifier l'Action.
Il faut coder ceci dans la jsp :

Code:

<html:img src="${graphe.src}" usemap="${graphe.useMap}" border="0"/>
12/06/2007, 20h48
bylka

ça marche:yaisse2: ,merci beaucoup c_nvy pour ton aide ,sans toi je serai perdue ,

tellement que j'avais beaucoup de travail ,j'ai fais une erreure un peu ! dans le src j'avais un / en plus ,je l'ai corrigé et le graphe c'est affiché

merci encor une fois

Sinon ,puisque j'ai reglé ce probléme ,pour remplir le dataset à partir de ma BDD ,je rajoute la requette SQL et le resultat je le met dans le dataset ,est ce que c'est ça ?
12/06/2007, 20h57
c_nvy

Le code que j'avais donné est un exemple pour une courbe de type TimeSeriesChart.
Cela ne correspond peut-être pas au type de graphe que tu souhaites faire ?

Sinon, dans cet exemple, il faudrait effectivement modifier l'alimentation du TimeSeries à partir des données de ta base.

Effectivement, j'ai besoin aussi d'une PieChart ,normalement il ya des choses en commun je doit changer

Code:

JFreeChart jfreechart = ChartFactory.createTimeSeriesChart("evolution des ventes", "abscisse", "ordonnee", dataset, true, true, false);

par:
Code:

1 2 3 4 5 6 7 final JFreeChart chart = ChartFactory.createPieChart3D( "ventes B13", // chart title data, // data true, // include legend true, false );
excuse moi ,mais pour la pie 3D (elle tourne ) ,est il possible de la realiser dans la jsp puisque elle est recupérée sous forme d'image?

Pour faire un PieChart3D, il faut modifier pratiquement tout le code.

Par contre, il faut conserver tout ce qui te permet d'afficher le graphe dans la page jsp soit ceci :
Code:

1 2 3 ChartRenderingInfo chartRenderingInfo = new ChartRenderingInfo(new StandardEntityCollection()); String filename = ServletUtilities.saveChartAsJPEG(jfreechart, largeur, hauteur, chartRenderingInfo, request.getSession()); Graphe graphe = this.initImage(request, chartRenderingInfo, filename);

12/06/2007, 21h28
bylka

Ok ,merci beaucoup
je vais essayer et je te donnerai les nouvelles

Bonne soirée

Allez, tiens, voici un exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
public class GraphePieAction extends Action
{
	public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		PieDataset pieDataset = this.createDataset() ;
 
		JFreeChart jfreechart = ChartFactory.createPieChart3D("Pie Chart 3D Demo 3", pieDataset, true, true, false);
 
		PiePlot3D piePlot3d = (PiePlot3D)jfreechart.getPlot();
		piePlot3d.setStartAngle(290D);
		piePlot3d.setDirection(Rotation.CLOCKWISE);
		piePlot3d.setForegroundAlpha(0.5F);
		piePlot3d.setNoDataMessage("No data to display");
		piePlot3d.setLabelGenerator(new StandardPieSectionLabelGenerator("{0}"));
		piePlot3d.setLabelGenerator(new StandardPieSectionLabelGenerator("{0}={1} ({2})"));
 
		TextTitle textTitle = jfreechart.getTitle() ;
		textTitle.setFont(new Font("Arial", Font.BOLD, 15));
 
		int largeur = 800 ;
		int hauteur = 500 ;
 
		ChartRenderingInfo chartRenderingInfo = new ChartRenderingInfo(new StandardEntityCollection());
 
		String filename = ServletUtilities.saveChartAsJPEG(jfreechart, largeur, hauteur, chartRenderingInfo, request.getSession());
 
		Graphe graphe = this.initImage(request, chartRenderingInfo, filename);
 
		request.setAttribute("graphe",graphe) ;
 
		return mapping.findForward("success"); 
	}
	 private PieDataset createDataset()
	 {
	 	DefaultPieDataset defaultPieDataset = new DefaultPieDataset();
	 	defaultPieDataset.setValue("Java", new Double(43.200000000000003D));
	 	defaultPieDataset.setValue("Visual Basic", new Double(10D));
	 	defaultPieDataset.setValue("C/C++", new Double(17.5D));
	 	defaultPieDataset.setValue("PHP", new Double(0D));
	 	defaultPieDataset.setValue("Perl", new Double(1.0D));
	 	return defaultPieDataset;
	 }
	private Graphe initImage(HttpServletRequest request,ChartRenderingInfo chartRenderingInfo, String filename)
	{
		String sMap = ChartUtilities.getImageMap(filename, chartRenderingInfo);
		String src = request.getContextPath()+"/servlet/DisplayChart?filename=" + filename ;
		String useMap = "#" + filename  ;
 
		Graphe graphe = new Graphe() ;
		graphe.setMap(sMap);
		graphe.setSrc(src) ;
		graphe.setUseMap(useMap) ;
 
		return graphe ;
	}
}

12/06/2007, 22h17
bylka

Vraiment merci 1000 fois c_nvy,une aide comme celle l'a c'est rare :king:
12/06/2007, 22h19
c_nvy

De rien.;)

N'oublie pas le tag :resolu:
12/06/2007, 22h43
bylka

j'ai essayer le code de la pie et ça marche à merveille :yaisse2: ,comme ça je pourrais avancer dans mon travail et etudier les codes utilisés
Encor une fois ,Merci c_nvy pour ta disponibilité et ton aide ,t'es geniallll:)

Bonne Soirée
13/07/2008, 14h21
sperwo

Bonjour;

j'ai essaie de refaire le même exemple pour affiche graphe
mais je ne vois rien :?
13/07/2008, 14h31
c_nvy

Ouvre une discussion en expliquant ce que tu as fait et en montrant ton code.;)