Générer pie statistique à partir de DataTable

**stoner2008** · 16/11/2014, 23h13

bonjour,
je dispose d'une datatable qui affiche les valeurs d'une arraylist de la façon suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
  <h:form id="form" style="red">  
            <p:growl id="growl1" showDetail="true" sticky="true" />
            <p:panel id="test" style="background: whitesmoke ">
                <p:dataTable value="#{eleve.valide}" var="o" paginator="true" rows="10" id="test1" styleClass="myTable" scrollable="true" 
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="10" widgetVar="50"   resizableColumns="true"  ><!--style="width: auto;"-->
                    <f:facet name="header"  >  
                         Liste des eleves   
                    </f:facet>
 
                    <p:column filterBy="#{o.header}" width="80px">
                        <f:facet name="header">  
                            <h:outputText value="En tete" style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.header}"/>
                    </p:column>
                    <p:column sortBy="#{o.texte}" width="360px" >
                        <f:facet name="header">  
                            <h:outputText value="Message " style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.texte}"/>
                    </p:column>
 
                    <p:column sortBy="#{o.date}" width="300px">
                        <f:facet name="header">  
                            <h:outputText value="Date" style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.date}"/>
                    </p:column>
 
                    <p:column sortBy="#{o.status}" width="100px" >
                        <f:facet name="header">  
                            <h:outputText value="Status" style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.status}"/> 
                    </p:column>
 
                    <p:column sortBy="#{o.solde}" width="40px">
                        <f:facet name="header">  
                            <h:outputText value="Nombre" style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.solde}"/>
                    </p:column>
 
                    <p:growl id="growl" showDetail="true" sticky="true" /> 
                    <p:column  width="100px" id="test3">
                        <f:facet name="header">  
                            <h:outputText value="Statistiques" style="color: #ffffff" />  
                        </f:facet>
                        <p:commandButton value="generer" actionListener="#{eleve.statistiques(o)}" update=":form:growl1"  icon="ui-icon-check" style="background:  green !important; color: white" />
 
 
 
                    </p:column>
 
 
 
                </p:dataTable>
            </p:panel>
 
 
        </h:form>

et voiçi la methode statistique qui calcule les valeur à partir d'une base de donnée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
public void statistiques(EleveBean eleve) {
        int nbreTotal = 0;
        int nbreTransmis = 0;
        int nbreNonTransmis = 0;
 
        selectedCompagne = eleve;
        String relatedTable = selectedCompagne.getRelatedtable();
 
        Connection conn = com.util.ConnectionPool.getGatewayConnection();
        nbreTotal = Commons.compterNbre(relatedTable, conn);
        nbreTransmis = Commons.compterNbreDelivred(relatedTable, conn);
        nbreNonTransmis = Commons.compterNbreUnDelivred(relatedTable, conn);
 
 
        pieModel = new PieChartModel();
        pieModel.set("Delivred", nbreTransmis);
        pieModel.set("UnDelivred", nbreNonTransmis);
        pieModel.set("En attente", nbreTotal - (nbreTransmis + nbreNonTransmis));
 
 
        try {
            conn.close();
        } catch (SQLException ex) {
            Logger.getLogger(EleveBeanBean.class.getName()).log(Level.SEVERE, null, ex);
        } 
 
    }

la methode calcule bien les differents nombres mais je n'ai pas réussi à afficher le pie dans ma page.
J'aimerai si c'est possible, lorsque je clique sur le bouton "generer" devant chaque eleve, afficher un popup (ou meme dans la meme page en dessous du datatable ) qui affiche le pieModel qui contient le résultat de ma methode déjà postée.

merci d'avance

**VirgApps** · 17/11/2014, 08h11

Bonjour, il y a peut être chose qui m'échappe mais je ne vois pas le composant <p:chart/> dans le formulaire, est-ce normal ?
Il faudrait le mettre sous le tableau ou à la limite dans un <p:dialog/> (pour simuler une popup) et updater ce composant <p:chart/> lors du clique sur le bouton "générer".

**Maine13** · 17/11/2014, 08h25

Bonjour,

Il te manque l'affichage de la boite de dialogue, dans la qu'elle tu dois déclarer ton composant de statistique, et faire appel à cette boite depuis ton bouton déclarer dans ton tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<p:column  headerText="Détails" style="width:32px;text-align: center">
             			<p:commandButton update=":form:carDetail" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View" styleClass="bouttonView">
                			<f:setPropertyActionListener value="#{cat}" target="#{date=.selected}" />
           			    </p:commandButton>
        			</p:column>
				</p:dataTable>
 
				<p:dialog header="Informations sur le lot" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
             <p:chart type="pie" model="#{statistiqueBean.pieModel}" />
        </p:outputPanel>
    </p:dialog>

**stoner2008** · 17/11/2014, 09h08

bonjour
merci pour votre réponse. j'ai essayé d'appliquer votre exemple mais ça n'a pas marché pour moi.
j'ai du oublié quelques chose.je vous poste mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
99
100
101
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
 
    <h:head>
        <title> Liste des eleves </title>
        <link rel="stylesheet" href="css/style_all2.css" type="text/css" media="screen" />
 
<style>
.ui-datatable.myTable th {
    background: #1E90FF;
}
</style>
        <!-- to choose another color scheme uncomment one of the foloowing stylesheets and wrap styl1.css into a comment -->
        <link rel="stylesheet" href="css/style1hay.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/jquery.wysiwyg.css" type="text/css" media="screen" /> 
 
    </h:head>
    <h:body>
        <!-- style="width: auto;" -->
        <h:form>
 
        </h:form>
        <h:form id="form" style="red">  
            <p:growl id="growl1" showDetail="true" sticky="true" />
            <p:panel id="test" style="background: whitesmoke ">
                <p:dataTable value="#{eleve.valide}" var="o" paginator="true" rows="10" id="test1" styleClass="myTable" scrollable="true" 
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="10" widgetVar="50"   resizableColumns="true"  ><!--style="width: auto;"-->
                    <f:facet name="header"  >  
                         Liste des eleves   
                    </f:facet>
 
                    <p:column filterBy="#{o.header}" width="80px">
                        <f:facet name="header">  
                            <h:outputText value="En tete" style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.header}"/>
                    </p:column>
                    <p:column sortBy="#{o.texte}" width="360px" >
                        <f:facet name="header">  
                            <h:outputText value="Message " style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.texte}"/>
                    </p:column>
 
                    <p:column sortBy="#{o.date}" width="300px">
                        <f:facet name="header">  
                            <h:outputText value="Date " style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.date}"/>
                    </p:column>
 
                    <p:column sortBy="#{o.status}" width="100px" >
                        <f:facet name="header">  
                            <h:outputText value="Status" style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.status}"/> 
                    </p:column>
 
                    <p:column sortBy="#{o.solde}" width="40px">
                        <f:facet name="header">  
                            <h:outputText value="Nombre" style="color: #ffffff" />  
                        </f:facet>
                        <h:outputText value="#{o.solde}"/>
                    </p:column>
 
                    <p:growl id="growl" showDetail="true" sticky="true" /> 
                    <p:column  width="100px" id="test2">
                        <f:facet name="header">  
                            <h:outputText value="valider" style="color: #ffffff" />  
                        </f:facet>
                        <p:commandButton update=":form:stat" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View" styleClass="bouttonView">
                			<f:setPropertyActionListener value="#{eleve}" target="#{eleve.valide}" />
           			    </p:commandButton>
 
 
                    </p:column>
 
 
 
                </p:dataTable>
 
                <p:dialog header="Informations sur le lot" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="stat" style="text-align:center;">
             <p:chart type="pie" model="#{eleve.statistiques(o)}" />
        </p:outputPanel>
    </p:dialog>
 
            </p:panel>
 
 
        </h:form>
 
    </h:body>
</html>

j'ai eu l'erreur suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
An Error Occurred:
 
java.lang.NullPointerException
- Stack Trace
 
java.lang.NullPointerException
	at beans.EleveBean.statistiques(CompagneBean.java:450)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:601)
	at javax.el.BeanELResolver.invoke(BeanELResolver.java:183)
	at javax.el.CompositeELResolver.invoke(CompositeELResolver.java:161)
	at org.apache.el.parser.AstValue.getValue(AstValue.java:173)
	at org.apache.el.ValueExpressionImpl.getValue(ValueExpressionImpl.java:184)
	at com.sun.faces.facelets.el.TagValueExpression.getValue(TagValueExpression.java:109)
	at javax.faces.component.ComponentStateHelper.eval(ComponentStateHelper.java:194)
	at org.primefaces.component.chart.Chart.getModel(Chart.java:100)
	at org.primefaces.component.chart.renderer.PieRenderer.encodeData(PieRenderer.java:30)

merci de m'aider

**Maine13** · 17/11/2014, 09h22

Bonjour,

Je ne sais pas ce que tu veux dire par ça n'a pas marché !! mais je trouve que c'est normal que ça ne marche pas dans ton cas car tu es entrain de passer en paramètre une variable "o" de ta datatable dans ta boite de dialogue que cette dernière ne la reconnais pas !!
Je te conseil donc de passer la ligne sélectionné dans ton Bean.
Si ça marche pas encore tu peux nous décrire plus le problème et qu'elle version de primefaces et de jsf tu utilise.

**VirgApps** · 17/11/2014, 09h46

L'attribut "model" du <p:chart/> doit correspondre au getter du PieChartModel de ton controller Eleve.
S'il n'est pas présent dans ton code il te faudrait un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
public PieChartModel getPieModel() {
  return pieModel;
}

Et dans ton xhtml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p:chart type="pie" model="#{eleve.pieModel}" />

Générer pie statistique à partir de DataTable

JSF Java

Vue hybride

Discussions similaires

Partager

Partager