Utilisation d'un tableau html pour générer un graphique

**drake56** · 20/01/2011, 16h39

Bonsoir à tous,

Je débute en Dojo et je souhaiterai générer un graphique circulaire en utilisant des données qui seraient intégrés à un tableau HTML.
Pour l'instant, j'ai trouvé un exemple qui utilise directement des données précisées dans le script dans une variable json, voici ce 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="./lib/dojo/dojo.js" type="text/javascript" djConfig="isDebug: true, parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require('dojox.charting.Chart2D');
            dojo.require('dojox.charting.widget.Chart2D');
            dojo.require('dojox.charting.themes.Tom');
 
            /* JSON information */
            var json = {
                January: [12999, 14487, 19803, 15965, 17290],
                February: [14487, 12999, 15965, 17290, 19803],
                March: [15965, 17290, 19803, 12999, 14487]
            };
 
            /* build pie chart data */
            var chartData = [];
            dojo.forEach(json['January'], function(item, i){
                chartData.push({
                    x: i,
                    y: json['January'][i]
                });
            });
 
            /* resources are ready... */
            dojo.ready(function(){
 
                var chart2 = new dojox.charting.Chart2D('chart2').setTheme(dojox.charting.themes.Tom).addPlot('default', {
                    type: 'Pie',
                    radius: 70,
                    fontColor: 'black'
                }).addSeries('Visits', chartData).render();
                var anim = new dojox.charting.action2d.MoveSlice(chart2, 'default');
                chart2.render();
 
            });
        </script>
    </head>
    <body>
        <div id="chart2" style="width:200px;height:200px;">
        </div>
    </body>
</html>

Comment dois-je procéder pour pouvoir utiliser des données saisies dans un tableau html ?

Merci d'avance pour votre aide

**Daniel_Gibot** · 21/01/2011, 10h32

Bonjour,

Je n'ai jamais essayé cette méthode mais pourquoi pas

Il existe le store dojox.data.HtmlTableStore.
Il n'y a pas d'exemple avec les charts mais je pense que cela ne change pas grand chose au niveau de la configuration pour l'accès aux données d'un tableau html.

**drake56** · 21/01/2011, 14h00

Merci pour votre réponse, je vais regarder ça

.
En fait je souhaiterai faire ceci : http://www.john-north.com/nathfy/AttC/ en Dojo et sans flash (car incompatible avec l'iPad), si vous avez d'autres idées à suggérer, je suis preneur !

**Daniel_Gibot** · 24/01/2011, 11h56

Bonjour,

J'ai testé l'idée que j'ai précisée précédemment et ce ne fut pas si aisé finalement.
Toutefois, j'ai réussi à obtenir quelque chose (voir en pièce jointe le script).
A vous de l'arranger comme bon vous semble. Si vous avez des questions n'hésitez pas.

Script réalisé avec la version 1..5 de dojo.
script_graphtable.php

**drake56** · 24/01/2011, 14h58

Merci beaucoup pour votre script, je regarde ça de près et je reviens à vous si nécessaire

**drake56** · 26/01/2011, 15h52

Bonjour,

Votre exemple était parfait à partir de celui-ci j'ai également réussi à générer un graphique à barres par contre j'ai un soucis pour générer une courbe, avec le code que je vais vous joindre le plan du graphique apparait bien mais pas la courbe. Voyez-vous une erreur ?
Merci

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Line chart</title>
        <script type="text/javascript" src="./lib/log4javascript.js">
        </script>
        <script type="text/javascript" src="./lib/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.addOnLoad(function(){
                dojo.require('dojox.charting.widget.Chart2D');
                dojo.require("dojox.data.HtmlStore");
                dojo.require("dojox.charting.action2d.Highlight");
                dojo.require("dojox.charting.action2d.MoveSlice");
                dojo.require("dojox.charting.action2d.Tooltip");
				dojo.require("dojox.charting.themes.PlotKit.blue");
                dojo.require("dojox.charting.Chart2D");
                dojo.require("dijit.form.NumberSpinner");
				dojo.require("dojox.charting.widget.Legend");
            });
 
            function create_line(){
                dojo.byId('chartOne').innerHTML = '';
                //création du store a partir de la table HTML
                var store = new dojox.data.HtmlStore({
                    dataId: "maTable"
                });
                //création du tableau chartData qui contiendra les données nécessaires
                var chartData = [];
                //fonction gotItems
                var gotItems = function(items, request){
                    //on lit tous les items retournés par la request
                    for (i = 0; i < items.length; i++) {
                        //et pour chacun d'entre eux on les insere dans le tableau chartData
                        chartData.push({
                            //cells[1] correspond à la 2eme cellule du tableau HTML (sans compter les entetes)
                            y: parseInt(items[i].cells[1].innerHTML),
                            //cells[0] correspond à la 1ere cellule du tableau HTML
                            text: items[i].cells[0].innerHTML,
                            tooltip: items[i].cells[1].innerHTML
                        });
                    }
                };
                // on lit le store (table HTML) et on appelle la fonction gotItems a la fin
                store.fetch({
                    onComplete: gotItems
                });
                var dc = dojox.charting;
                try {
                    //on cree le graphique
                    var chart = new dojox.charting.Chart2D('chartOne')
					chart.setTheme(dojox.charting.themes.PlotKit.blue);
                    chart.addPlot("default", {
                        type: "Lines",
                        markers: true,
                        tension: 3,
                        shadows: {
                            dx: 2,
                            dy: 2,
                            dw: 2
                        }
                    });
                    chart.addAxis("x");
                    chart.addAxis("y", {
                        vertical: true
                    });
                    chart.addSeries('Serie 3', chartData, {});
					chart.render();
					var anim_a = new dc.action2d.MoveSlice(chart, "default");
					var anim_b = new dc.action2d.Highlight(chart, "default");
					var anim_c = new dc.action2d.Tooltip(chart, "default");
					var legend = new dojox.charting.widget.Legend({
						chart: chart
					}, "legende");
					chart.render();
                } 
                catch (e) {
                    log.error("Error : chart not generated", e);
                }
            }
        </script>
        <script type="text/javascript">
            // Create the logger
            var log = log4javascript.getLogger();
 
            // Create a PopUpAppender with default options
            var popUpAppender = new log4javascript.PopUpAppender();
 
            // Change the desired configuration options
            popUpAppender.setFocusPopUp(true);
            popUpAppender.setNewestMessageAtTop(true);
 
            // Add the appender to the logger
            log.addAppender(popUpAppender);
        </script>
    </head>
    <script type="text/javascript">
        log.debug("Chart creation");
    </script>
    <body class="claro" onLoad="create_line();">
        <table id="maTable" border=1>
            <thead>
                <tr>
                    <th>
                        mois
                    </th>
                    <th>
                        valeur
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        12999
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        14487
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        15965
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartOne" style="width: 500px; height: 300px; padding:40px;">
        </div>
    </body>
</html>

**Daniel_Gibot** · 28/01/2011, 09h45

Bonjour,

Content que ce petit script puisse vous servir

Je n'ai pas trop le temps de tester, je suis un peu pris par le travail en ce moment. Mais, à première vue, il manquerait la variable "x" dans le "chartData" :

Code :

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

1
2
3
4
5
6
7
8
chartData.push({
                            //cells[1] correspond à la 2eme cellule du tableau HTML (sans compter les entetes)
                            x: valeur pour x
                            y: parseInt(items[i].cells[1].innerHTML),
                            //cells[0] correspond à la 1ere cellule du tableau HTML
                            text: items[i].cells[0].innerHTML,
                            tooltip: items[i].cells[1].innerHTML
                        });

**drake56** · 28/01/2011, 12h06

Bonjour,

Merci pour votre réponse j'ai donc rajouté cette ligne :

Code :

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

x: i,

et j'obtiens bien une courbe

.
Maintenant, je suis rentré dans quelque chose de plus concret, je me retrouve avec un tableau à 5 colonnes, première colonne (les mois, valeur de x) et les quatre autres devraient me permettre de générer 4 courbes.
Ainsi, dois-je faire 4 chartData différents pour obtenir mes 4 courbes ?

Puis, je viens de me rendre compte que j'ai un problème de compatiblité avec Internet Explorer, j'ai ce code erreur :

Détails de l’erreur de la page Web
Message : 'dojox.data.HtmlStore' a la valeur Null ou n'est pas un objet.
Ligne : 25
Caractère : 17
Code : 0
URI : http://127.0.0.1:8000/testDojo/line_chart.html

En tout cas, merci d'avoir prit sur votre temps pour m'aider surtout si en moment vous avez beaucoup de travail

**Daniel_Gibot** · 28/01/2011, 16h11

Pour créer plusieurs lignes il faut créer plusieurs series '"addSeries".

En ce qui concerne l'erreur d'IE, je ne teste que sur IE et j'aurais plutôt pensé qu'il y aurait eu une erreur avec Firefox

En tout cas, je n'en ai pas eu lorsque j'ai testé. Peut etre que sur IE le chargement de la table n'est pas fini lorsque cela passe à la création du graphique.

**drake56** · 28/01/2011, 16h18

En utilisant 4 chartData ça a fonctionné

!
Merci oui c'est peut être ça car j'ai un tableau plus grand mais du coup pour éviter ça, il faut procéder comment ?

Encore merci

**Daniel_Gibot** · 31/01/2011, 10h55

Ce serait un chargement dynamique de tableau je dirai qu'il faut créer le graphique à la fin du chargement mais comme c'est saisi à la main je ne vois pas ce qu'on peut faire de plus...

**drake56** · 05/02/2011, 19h29

Ok merci, je regarderai ça quand je reprendrais mon projet

!
Je ne mets pas le post en tant que résolu comme ça si j'ai de nouvelles interrogations, je reviendrai par ici.
Encore merci pour votre aide

**drake56** · 21/02/2011, 11h07

Bonjour,

J'ai repris mon projet Dojo aujourd'hui et j'ai de nouvelles interrogations :

- Est-ce qu'il est possible de diminuer la taille des libellés d'un graphique circulaire (je ne pense pas que ce soit possible) ?
- Peuvent-ils être placés à l'extérieur (peut-être en utilisant des labels ?) ?
- Peut-on ajouter le pourcentage avec le libellé ?
Et une dernière question, pour les histogrammes, est-ce qu'on peut paramétrer la taille ?

Merci d'avance

**Daniel_Gibot** · 21/02/2011, 11h56

Bonjour,

- Est-ce qu'il est possible de diminuer la taille des libellés d'un graphique circulaire (je ne pense pas que ce soit possible) ?

- Je dirais oui mais je n'ai pas encore recherché.

- Peuvent-ils être placés à l'extérieur (peut-être en utilisant des labels ?) ?

- Oui ils peuvent l'être. Pour cela, ajouter :

Code :

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

1
2
3
4
5
chart.addPlot('default', {
	type: 'Pie',
        labelOffset: -40
}

- Peut-on ajouter le pourcentage avec le libellé ?

- Oui aussi. Il suffit de concaténer le label avec le pourcentage a la création du chartData.

Code :

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

1
2
3
4
5
6
7
8
chartData.push({
	//cells[1] correspond à la 2eme cellule du tableau HTML (sans compter les entetes)
        y: parseInt(items[i].cells[1].innerHTML),
	//cells[0] correspond à la 1ere cellule du tableau HTML
	text: items[i].cells[0].innerHTML+parseInt(items[i].cells[1].innerHTML),
	tooltip: items[i].cells[1].innerHTML
});

Et une dernière question, pour les histogrammes, est-ce qu'on peut paramétrer la taille ?

- Je ne saurai répondre. Je pense que l'on peut modifier la taille mais je ne suis pas sur.

**drake56** · 21/02/2011, 12h02

Merci beaucoup, vous m'avez éclairé sur les points les + importants.
Je vais continuer mes recherches en ce qui concernent les réglages des paramètres de taille.

**drake56** · 22/02/2011, 10h31

Bonjour,

Savez-vous s'il est possible d'activer un lien pour chaque valeur du graphique lorsque l'utilisateur clique sur une part d'un camembert par exemple pour qu'il soit redirigé vers une autre page ?

Merci d'avance

Edit 23/02 : Problèmatique gérée en partie via la fonction connectToPlot bon par contre j'ai qu'une seule redirection lorsque l'on effectue un clic n'importe où sur le graphique

**Daniel_Gibot** · 23/02/2011, 15h23

Bonjour,

En effet c'est avec connectToPlot

Code :

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

1
2
3
4
5
6
7
 
chart.connectToPlot("default", function(o){
	if(o.type == 'onclick'){
                //y correspond à la valeur contenue dans le dataChart
		alert(o.run.data[o.index].y);
	}
});

**drake56** · 23/02/2011, 15h58

Bonjour,

Merci c'est parfait

!

Bon maintenant le plus dur arrive, je dois rendre le code générique et créer une seule fonction javascript qui prendra notamment en paramètre le type de graphique souhaité comme ça la création du graphique sera lié à la création et l'affichage du tableau html mais vu que je suis très loin de maîtriser javascript (même si j'ai appris quelques astuces pratiques) ça risque d'être difficile ...

En tout encore merci pour votre aide

**Daniel_Gibot** · 23/02/2011, 16h15

Je vous en prie, c'est avec plaisir.

Bon courage pour la suite

Utilisation d'un tableau html pour générer un graphique [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager