Chargement d'un élément en Javascript

Version imprimable

Bonjour,

J'ai (essayé) de réaliser en partie une fonction javascript générique mettant en place un paramètre donc plusieurs options mais le problème c'est que lorsque je lance mon fichier html, les éléments qui devraient être lancés via le script n'apparaissent pas sur la page.
Comment dois-je procéder ?

Merci d'avance

Voici le code du script :

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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
function create_chart(chart_type){
 
    if (chart_type == 'column') {
 
        dojo.byId('chartColumn').innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: "columnTable"
        });
        var columnData = [];
        var gotItems = function(items, request){
            for (i = 0; i < items.length; i++) {
                columnData.push({
                    y: parseInt(items[i].cells[1].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[1].innerHTML,
                });
            }
        };
        store.fetch({
            onComplete: gotItems
        });
        var dc = dojox.charting;
        try {
            var column_chart = new dojox.charting.Chart2D('chartColumn');
            column_chart.setTheme(dojox.charting.themes.ThreeD).addAxis('x', {
                fixUpper: 'major',
                includeZero: false,
                min: 0,
                max: 3,
            }).addAxis('y', {
                vertical: true,
                fixLower: 'major',
                fixUpper: 'major',
                max: 30
            }).addPlot('default', {
                type: 'Columns',
                minBarSize: 70,
                maxBarSize: 70,
                gap: 5,
            }).addSeries('SeriesColumn', columnData, {});
            var anim4b = new dc.action2d.Tooltip(column_chart, 'default');
            var anim4c = new dc.action2d.Shake(column_chart, 'default');
            column_chart.render();
            var column_legend = new dc.widget.Legend({
                chart: column_chart
            }, 'legende');
 
            return column_chart;
        } 
        catch (e) {
            log.error("Error : chart not generated", e);
        }
    }
    if (chart_type == 'pie') {
        dojo.byId('chartPie').innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: "pieTable"
        });
        var pieData = [];
        var gotItems = function(items, request){
            for (i = 0; i < items.length; i++) {
 
                pieData.push({
                    y: parseInt(items[i].cells[1].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[1].innerHTML,
                });
            }
        };
        store.fetch({
            onComplete: gotItems
        });
        var dc = dojox.charting;
        try {
            var pie_chart = new dojox.charting.Chart2D('chartPie');
            pie_chart.setTheme(dojox.charting.themes.ThreeD)
            pie_chart.addPlot('default', {
                type: 'Pie',
                font: 'normal normal 7pt Tahoma',
                radius: 90,
                fontColor: 'black',
                labelOffset: -40,
            })
            pie_chart.addSeries('SeriesPie', chartData)
            pie_chart.connectToPlot("default", function(o){
                if (o.type == "onclick") {
                    document.location.href = "http://www.google.fr"
                }
            });
            pie_chart.render();
            var anim4b = new dc.action2d.Tooltip(pie_chart, 'default');
            var anim4c = new dc.action2d.Shake(pie_chart, 'default');
            pie_chart.render();
            var pie_legend = new dc.widget.Legend({
                chart: pie_chart
            }, 'legende');
 
            return pie_chart;
        } 
        catch (e) {
            log.error("Error : chart not generated", e);
        }
 
    }
    if (chart_type == 'line') {
        dojo.byId('chartLine').innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: "lineTable"
        });
        var lineData1 = [];
        var lineData2 = [];
        var lineData3 = [];
        var lineData4 = [];
 
        var gotItems = function(items, request){
            for (i = 0; i < items.length; i++) {
                lineData1.push({
                    x: i,
                    y: parseInt(items[i].cells[1].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[1].innerHTML
                });
                lineData2.push({
                    x: i,
                    y: parseInt(items[i].cells[2].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[2].innerHTML
                });
                lineData3.push({
                    x: i,
                    y: parseInt(items[i].cells[3].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[3].innerHTML
                });
                lineData4.push({
                    x: i,
                    y: parseInt(items[i].cells[4].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[4].innerHTML
                });
            }
        };
        store.fetch({
            onComplete: gotItems
        });
        var dc = dojox.charting;
        try {
            var line_chart = new dojox.charting.Chart2D('chartLine')
            line_chart.setTheme(dojox.charting.themes.Shrooms);
            line_chart.addPlot("default", {
                type: "Lines",
                markers: true,
                tension: 3,
                shadows: {
                    dx: 2,
                    dy: 2,
                    dw: 2
                }
            });
            line_chart.addAxis("x", {
                min: 0,
                max: 6,
                labels: [{
                    value: 0,
                    text: "Janvier"
                }, {
                    value: 1,
                    text: "Février"
                }, {
                    value: 2,
                    text: "Mars"
                }, {
                    value: 3,
                    text: "Avril"
                }, {
                    value: 4,
                    text: "Mai"
                }, {
                    value: 5,
                    text: "Juin"
                }, {
                    value: 6,
                    text: "Juillet"
                }]
            });
            line_chart.addAxis("y", {
                vertical: true,
                max: 150
            });
            line_chart.addSeries('Non traité', lineData1);
            line_chart.addSeries('En cours de traitement', lineData2);
            line_chart.addSeries('Traité', lineData3);
            line_chart.addSeries('Total', lineData4);
            line_chart.render();
            var anim4b = new dc.action2d.Tooltip(line_chart, 'default');
            var anim4c = new dc.action2d.Shake(line_chart, 'default');
            line_chart.render();
            var line_legend = new dc.widget.Legend({
                chart: line_chart
            }, 'legende');
 
            return line_chart;
        } 
        catch (e) {
            log.error("Error : chart not generated", e);
        }
    }
}

Puis le code de la page html :

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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!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 type="text/javascript" src="./js/chart.js">
        </script>
        <style type="text/css">
            @import url(css/table.css);
        </style>
        <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.data.HtmlStore");
                dojo.require("dojox.charting.widget.Legend");
                dojo.require("dojox.charting.Chart2D");
                dojo.require("dojox.charting.themes.ThreeD")
                dojo.require("dojox.charting.action2d.Tooltip");
                dojo.require('dojox.charting.action2d.Shake');
                dojo.require("dojox.charting.action2d.Highlight");
                dojo.require("dojox.charting.action2d.MoveSlice");
                dojo.require("dojox.charting.action2d.Magnify");
                dojo.require("dojox.charting.themes.Shrooms");
                dojo.require("dijit.form.NumberSpinner");
            });
        </script>
    </head>
    <body onLoad:"create_chart('pie');">
        <table id="columnTable" border=1 class="chart_type_column">
            <thead>
                <tr>
                    <th>
                        Statut
                    </th>
                    <th>
                        Taux
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Validé
                    </td>
                    <td>
                        25
                    </td>
                </tr>
                <tr>
                    <td>
                        Refusé
                    </td>
                    <td>
                        5
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartColumn" style="width: 500px; height: 300px; padding:40px;">
        </div>
        <br>
        <br>
        <br>
        <div id="column_legende" style='padding:40px'>
        </div>
        <table id="pieTable" border=1 class="chart_type_pie">
            <thead>
                <tr>
                    <th>
                        Activité
                    </th>
                    <th>
                        Taux activité
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Demande d'inscription en crèche
                    </td>
                    <td>
                        16%
                    </td>
                </tr>
                <tr>
                    <td>
                        Demande d'inscription tardive en crèche
                    </td>
                    <td>
                        15%
                    </td>
                </tr>
                <tr>
                    <td>
                        Demande d'informations
                    </td>
                    <td>
                        38%
                    </td>
                </tr>
                <tr>
                    <td>
                        Réclamations
                    </td>
                    <td>
                        9%
                    </td>
                </tr>
                <tr>
                    <td>
                        Plaintes
                    </td>
                    <td>
                        6%
                    </td>
                </tr>
                <tr>
                    <td>
                        Demande de stage
                    </td>
                    <td>
                        13%
                    </td>
                </tr>
                <tr>
                    <td>
                        Demande de dérogation périscolaire
                    </td>
                    <td>
                        3%
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartPie" style="width: 500px; height: 300px; padding:40px;">
        </div>
        <br>
        <br>
        <br>
        <div id="pie_legende" style='padding:40px'>
        </div>
        <table id="lineTable" border=1 class="chart_type_line">
            <thead>
                <tr>
                    <th>
                        mois
                    </th>
                    <th>
                        Nombre de courriers non traités
                    </th>
                    <th>
                        Nombre de courriers en cours de traitement
                    </th>
                    <th>
                        Nombre de courriers traités
                    </th>
                    <th>
                        Nombre de courriers total
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Janvier
                    </td>
                    <td>
                        5
                    </td>
                    <td>
                        40
                    </td>
                    <td>
                        80
                    </td>
                    <td>
                        125
                    </td>
                </tr>
                <tr>
                    <td>
                        Février
                    </td>
                    <td>
                        0
                    </td>
                    <td>
                        5
                    </td>
                    <td>
                        4
                    </td>
                    <td>
                        143
                    </td>
                </tr>
                <tr>
                    <td>
                        Mars
                    </td>
                    <td>
                        25
                    </td>
                    <td>
                        25
                    </td>
                    <td>
                        60
                    </td>
                    <td>
                        110
                    </td>
                </tr>
                <tr>
                    <td>
                        Avril
                    </td>
                    <td>
                        24
                    </td>
                    <td>
                        35
                    </td>
                    <td>
                        74
                    </td>
                    <td>
                        133
                    </td>
                </tr>
                <tr>
                    <td>
                        Mai
                    </td>
                    <td>
                        12
                    </td>
                    <td>
                        45
                    </td>
                    <td>
                        39
                    </td>
                    <td>
                        96
                    </td>
                </tr>
                <tr>
                    <td>
                        Juin
                    </td>
                    <td>
                        17
                    </td>
                    <td>
                        23
                    </td>
                    <td>
                        90
                    </td>
                    <td>
                        130
                    </td>
                </tr>
                <tr>
                    <td>
                        Juillet
                    </td>
                    <td>
                        9
                    </td>
                    <td>
                        12
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        121
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartLine" style="width: 500px; height: 300px; padding:40px;">
        </div>
        <br>
        <br>
        <br>
        <div id="line_legende" style='padding:40px'>
        </div>
    </body>
</html>

24/02/2011, 13h36
RomainVALERI
Code:

1 2 3 ... <body onLoad:"create_chart('pie');"> ...
:koi: tiens j'avais encore jamais vu quelqu'un utiliser ":" au lieu de "=" pour assigner les valeurs des propriétés HTML... c'est valide ça ? 8O
24/02/2011, 13h48
SpaceFrog

non

Exactement légère confusion de ma part avec Dojo, merci pour vos réponses, en fin de compte c'était bien un problème Dojo et il est règlé en partie après une séance de chat en anglais :aie: !

Voici la dernière version du 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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
function create_chart(chart_type){
 
    if (chart_type == 'column') {
 
        dojo.byId('chartColumn').innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: "columnTable"
        });
        var columnData = [];
        var gotItems = function(items, request){
            for (i = 0; i < items.length; i++) {
                columnData.push({
                    y: parseInt(items[i].cells[1].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[1].innerHTML,
                });
            }
        };
        store.fetch({
            onComplete: gotItems
        });
        var dc = dojox.charting;
        try {
            var column_chart = new dojox.charting.Chart2D('chartColumn');
            column_chart.setTheme(dojox.charting.themes.ThreeD).addAxis('x', {
                fixUpper: 'major',
                includeZero: false,
                min: 0,
                max: 3,
            }).addAxis('y', {
                vertical: true,
                fixLower: 'major',
                fixUpper: 'major',
                max: 30
            }).addPlot('default', {
                type: 'Columns',
                minBarSize: 70,
                maxBarSize: 70,
                gap: 5,
            }).addSeries('SeriesColumn', columnData, {});
            var anim4b = new dc.action2d.Tooltip(column_chart, 'default');
            var anim4c = new dc.action2d.Shake(column_chart, 'default');
            column_chart.render();
            var column_legend = new dc.widget.Legend({
                chart: column_chart
            }, 'legende');
 
            return column_chart;
        } 
        catch (e) {
            log.error("Error : chart not generated", e);
        }
    }
    if (chart_type == 'pie') {
        dojo.byId('chartPie').innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: "pieTable"
        });
        var pieData = [];
        var gotItems = function(items, request){
            for (i = 0; i < items.length; i++) {
 
                pieData.push({
                    y: parseInt(items[i].cells[1].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[1].innerHTML,
                });
            }
        };
        store.fetch({
            onComplete: gotItems
        });
        var dc = dojox.charting;
        try {
            var pie_chart = new dojox.charting.Chart2D('chartPie');
            pie_chart.setTheme(dojox.charting.themes.ThreeD)
            pie_chart.addPlot('default', {
                type: 'Pie',
                font: 'normal normal 7pt Tahoma',
                radius: 90,
                fontColor: 'black',
                labelOffset: -40,
            })
            pie_chart.addSeries('SeriesPie', pieData)
            pie_chart.connectToPlot("default", function(o){
                if (o.type == "onclick") {
                    document.location.href = "http://www.google.fr"
                }
            });
            pie_chart.render();
            var anim4b = new dc.action2d.Tooltip(pie_chart, 'default');
            var anim4c = new dc.action2d.Shake(pie_chart, 'default');
            pie_chart.render();
            var pie_legend = new dc.widget.Legend({
                chart: pie_chart
            }, 'legende');
 
            return pie_chart;
        } 
        catch (e) {
            log.error("Error : chart not generated", e);
        }
 
    }
    if (chart_type == 'line') {
        dojo.byId('chartLine').innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: "lineTable"
        });
        var lineData1 = [];
        var lineData2 = [];
        var lineData3 = [];
        var lineData4 = [];
 
        var gotItems = function(items, request){
            for (i = 0; i < items.length; i++) {
                lineData1.push({
                    x: i,
                    y: parseInt(items[i].cells[1].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[1].innerHTML
                });
                lineData2.push({
                    x: i,
                    y: parseInt(items[i].cells[2].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[2].innerHTML
                });
                lineData3.push({
                    x: i,
                    y: parseInt(items[i].cells[3].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[3].innerHTML
                });
                lineData4.push({
                    x: i,
                    y: parseInt(items[i].cells[4].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[4].innerHTML
                });
            }
        };
        store.fetch({
            onComplete: gotItems
        });
        var dc = dojox.charting;
        try {
            var line_chart = new dojox.charting.Chart2D('chartLine')
            line_chart.setTheme(dojox.charting.themes.Shrooms);
            line_chart.addPlot("default", {
                type: "Lines",
                markers: true,
                tension: 3,
                shadows: {
                    dx: 2,
                    dy: 2,
                    dw: 2
                }
            });
            line_chart.addAxis("x", {
                min: 0,
                max: 6,
                labels: [{
                    value: 0,
                    text: "Janvier"
                }, {
                    value: 1,
                    text: "Février"
                }, {
                    value: 2,
                    text: "Mars"
                }, {
                    value: 3,
                    text: "Avril"
                }, {
                    value: 4,
                    text: "Mai"
                }, {
                    value: 5,
                    text: "Juin"
                }, {
                    value: 6,
                    text: "Juillet"
                }]
            });
            line_chart.addAxis("y", {
                vertical: true,
                max: 150
            });
            line_chart.addSeries('Non traité', lineData1);
            line_chart.addSeries('En cours de traitement', lineData2);
            line_chart.addSeries('Traité', lineData3);
            line_chart.addSeries('Total', lineData4);
            line_chart.render();
            var anim4b = new dc.action2d.Tooltip(line_chart, 'default');
            var anim4c = new dc.action2d.Shake(line_chart, 'default');
            line_chart.render();
            var line_legend = new dc.widget.Legend({
                chart: line_chart
            }, 'legende');
 
            return line_chart;
        } 
        catch (e) {
            log.error("Error : chart not generated", e);
        }
    }
}

Puis html :

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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!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>Tableau de bord</title>
        <script type="text/javascript" src="./js/chart.js">
        </script>
        <style type="text/css">
            @import url(css/table.css);
        </style>
        <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.data.HtmlStore");
                dojo.require("dojox.charting.widget.Legend");
                dojo.require("dojox.charting.Chart2D");
                dojo.require("dojox.charting.themes.ThreeD")
                dojo.require("dojox.charting.action2d.Tooltip");
                dojo.require('dojox.charting.action2d.Shake');
                dojo.require("dojox.charting.action2d.Highlight");
                dojo.require("dojox.charting.action2d.MoveSlice");
                dojo.require("dojox.charting.action2d.Magnify");
                dojo.require("dojox.charting.themes.Shrooms");
                dojo.require("dijit.form.NumberSpinner");
				create_chart('pie');
				create_chart('column');
				create_chart('line');
            });
        </script>
    </head>
    <body class="claro">
        <table id="columnTable" border=1 class="chart_type_column">
            <thead>
                <tr>
                    <th>
                        Statut
                    </th>
                    <th>
                        Taux
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Validé
                    </td>
                    <td>
                        25
                    </td>
                </tr>
                <tr>
                    <td>
                        Refusé
                    </td>
                    <td>
                        5
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartColumn" style="width: 500px; height: 300px; padding:40px;">
        </div>
        <br>
        <br>
        <br>
        <div id="column_legende" style='padding:40px'>
        </div>
        <table id="pieTable" border=1 class="chart_type_pie">
            <thead>
                <tr>
                    <th>
                        Activité
                    </th>
                    <th>
                        Taux activité
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Demande d'inscription en crèche
                    </td>
                    <td>
                        16%
                    </td>
                </tr>
                <tr>
                    <td>
                        Demande d'inscription tardive en crèche
                    </td>
                    <td>
                        15%
                    </td>
                </tr>
                <tr>
                    <td>
                        Demande d'informations
                    </td>
                    <td>
                        38%
                    </td>
                </tr>
                <tr>
                    <td>
                        Réclamations
                    </td>
                    <td>
                        9%
                    </td>
                </tr>
                <tr>
                    <td>
                        Plaintes
                    </td>
                    <td>
                        6%
                    </td>
                </tr>
                <tr>
                    <td>
                        Demande de stage
                    </td>
                    <td>
                        13%
                    </td>
                </tr>
                <tr>
                    <td>
                        Demande de dérogation périscolaire
                    </td>
                    <td>
                        3%
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartPie" style="width: 500px; height: 300px; padding:40px;">
        </div>
        <br>
        <br>
        <br>
        <div id="pie_legende" style='padding:40px'>
        </div>
        <table id="lineTable" border=1 class="chart_type_line">
            <thead>
                <tr>
                    <th>
                        mois
                    </th>
                    <th>
                        Nombre de courriers non traités
                    </th>
                    <th>
                        Nombre de courriers en cours de traitement
                    </th>
                    <th>
                        Nombre de courriers traités
                    </th>
                    <th>
                        Nombre de courriers total
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Janvier
                    </td>
                    <td>
                        5
                    </td>
                    <td>
                        40
                    </td>
                    <td>
                        80
                    </td>
                    <td>
                        125
                    </td>
                </tr>
                <tr>
                    <td>
                        Février
                    </td>
                    <td>
                        0
                    </td>
                    <td>
                        5
                    </td>
                    <td>
                        4
                    </td>
                    <td>
                        143
                    </td>
                </tr>
                <tr>
                    <td>
                        Mars
                    </td>
                    <td>
                        25
                    </td>
                    <td>
                        25
                    </td>
                    <td>
                        60
                    </td>
                    <td>
                        110
                    </td>
                </tr>
                <tr>
                    <td>
                        Avril
                    </td>
                    <td>
                        24
                    </td>
                    <td>
                        35
                    </td>
                    <td>
                        74
                    </td>
                    <td>
                        133
                    </td>
                </tr>
                <tr>
                    <td>
                        Mai
                    </td>
                    <td>
                        12
                    </td>
                    <td>
                        45
                    </td>
                    <td>
                        39
                    </td>
                    <td>
                        96
                    </td>
                </tr>
                <tr>
                    <td>
                        Juin
                    </td>
                    <td>
                        17
                    </td>
                    <td>
                        23
                    </td>
                    <td>
                        90
                    </td>
                    <td>
                        130
                    </td>
                </tr>
                <tr>
                    <td>
                        Juillet
                    </td>
                    <td>
                        9
                    </td>
                    <td>
                        12
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        121
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartLine" style="width: 500px; height: 300px; padding:40px;">
        </div>
        <br>
        <br>
        <br>
        <div id="line_legende" style='padding:40px'>
        </div>
    </body>
</html>

Maintenant, il faudrait que je rende la fonction davantage paramètrable notamment pour les légendes (j'en ai qu'une seule pour 3 graphiques) et pour les graphiques en courbes (car pour créer une courbe il faut une table de données donc il faudrait savoir le nombre de colonne d'un tableau et en fonction de ce nombre créer pour chaque colonne contenant des entiers un tabeau de données), je ne sais pas si je suis très clair.

Merci d'avance pour votre aide

24/02/2011, 16h10
Daniel_Gibot
Bonjour,

Pour connaitre le nombre de colonnes :
Code:

1 2 3 4 var gotItems = function(items, request){ items[0].cells.length ...
"0" correspond à la première ligne du tableau. De là, il est possible d'identifier le nombre de cellules de la 1ère ligne.
24/02/2011, 16h18
drake56

Bonjour,

Ok merci donc du coup il faut que je fasse une autre boucle for de 0 à items[0].cells.length et dans celle-ci, je ferai var columnData[i] = [] ?
Puis, à première vue, ma fonction ne vous parait pas "trop" codé car je fais pas mal de répétitions de code ?

Bonjour,

Je ne pense pas que ce soit trop "codé". Si vous avez un tableau correspondant à un graphique, il n'y a pas trop le choix. Ce serait différent si la personne pouvait choisir le type du graphique qu'elle souhaite afficher. Dans ce cas, certains paramétrages sont similaires et du coup peuvent être réduits en une fois pour tous les graphs.

Toutefois si vous souhaitez dynamiser completement vos graphiques, voici un code que j'ai modifié à partir du votre. Libre à vous de l'adapter aux columnChart ;)

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
 
//Objet qui contiendra les données pour chaque ligne lue
	var linesData = {};
	//tableau qui contiendra tous les entetes de colonne
	var libellesX = [];
	var dc = dojox.charting;
	//fonction gotItems
	var gotItems = function(items, request){
		//nombre de colonnes du tableau
		var nbCols = items[0].cells.length;
		for(j = 1; j < nbCols; j++){
			//on crée un tableau correspondant à chaque colonne 
			//(une serie = une ligne de graph
			linesData["lineData" + (j)] = [];			
		}
		for (i = 0; i < items.length; i++) {
			//pour chaque ligne, on recupere la valeur de chaque colonne
			//et on l'insere dans le tableau lui correspondant
			for(j = 1; j < nbCols; j++){	
				linesData["lineData" + (j)].push({
					x: i,
					y: parseInt(items[i].cells[j].innerHTML),
					text: items[i].cells[0].innerHTML,
					tooltip: items[i].cells[j].innerHTML
				});
			}
			//et pour chaque ligne on prend la valeur de la 1ere colonne (0)
			//qui correspond aux libelles des abscisses
			libellesX.push({
				value: i,
				text: items[i].cells[0].innerHTML
			});
		}
		var line_chart = new dojox.charting.Chart2D('chartOne')
		line_chart.setTheme(dojox.charting.themes.Tom);
		line_chart.addPlot("default", {
			type: "Lines",
			markers: true,
			tension: 3,
			shadows: {
				dx: 2,
				dy: 2,
				dw: 2
			}
		});
		line_chart.addAxis("x", {
			min: 0,
			//le max des X correspond au nombre de lignes - l'entete
			max: (items.length - 1),
			//et on insere les libelles issus du tableau
			labels: libellesX
		});
		line_chart.addAxis("y", {
			vertical: true,
			//possibilité d'identifier le max lorsque l'on scanne les cellules
			max: 150
		});
		for(j = 1; j < nbCols; j++){
			//on cree une serie pour chaque colonne
			//note : store._headings[j] correspond à l'entete d'une colonne (pour la legende)
			line_chart.addSeries(store._headings[j], linesData["lineData" + (j)]);
		}
		line_chart.render();
		var anim4b = new dc.action2d.Tooltip(line_chart, 'default');
		var anim4c = new dc.action2d.Shake(line_chart, 'default');
		line_chart.render();
		var line_legend = new dc.widget.Legend({
			chart: line_chart
		}, 'legende');
	};

25/02/2011, 10h36
drake56

Bonjour,

Un grand merci pour ce code c'est exactement ce dont j'avais besoin :) en + avec les commentaires c'est parfait !
Concernant le type de graphique, la personne devrait pourvoir effectuer un choix par la suite tout en ayant un choix par défault, vous me confirmez ainsi que mon code peut être réduit.

Encore merci

Bonne journée

Edit : Le code ne fonctionne pas alors que la console d'erreur n'affiche aucune erreur, du coup c'est difficile à corriger et bizarre

Le code est à mettre après :
Code:

1 2 3 4 5 if (chart_type == 'line') { dojo.byId('chartLine').innerHTML = ''; var store = new dojox.data.HtmlStore({ dataId: "lineTable" });
Et je n'ai pas mis de "try catch" il vous faut l'adapter un peu à votre méthode :)

Merci, j'avais bien ajouté ça au début et après 1h de recherche de bug je me suis rendu compte qu'il manquait ça (je savais que c'était un petit truc et c'est à chaque fois ce qui fait perdre du temps :roll:) :

Code:

1
2
3
        store.fetch({
            onComplete: gotItems
        });

Par contre, j'ai perdu mes animations sur le graphique et le tooltip ne s'affiche pas, voilà ce que j'ai actuellement :

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
    if (chart_type == 'line') {
        dojo.byId('chartLine').innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: "lineTable"
        });
        var linesData = {};
        //tableau qui contiendra tous les entetes de colonne
        var libellesX = [];
        var dc = dojox.charting;
        //fonction gotItems
        var gotItems = function(items, request){
            //nombre de colonnes du tableau
            var nbCols = items[0].cells.length;
            for (j = 1; j < nbCols; j++) {
                //on crée un tableau correspondant à chaque colonne 
                //(une serie = une ligne de graph
                linesData["lineData" + (j)] = [];
            }
            for (i = 0; i < items.length; i++) {
                //pour chaque ligne, on recupere la valeur de chaque colonne
                //et on l'insere dans le tableau lui correspondant
                for (j = 1; j < nbCols; j++) {
                    linesData["lineData" + (j)].push({
                        x: i,
                        y: parseInt(items[i].cells[j].innerHTML),
                        text: items[i].cells[0].innerHTML,
                        tooltip: items[i].cells[j].innerHTML
                    });
                }
                //et pour chaque ligne on prend la valeur de la 1ere colonne (0)
                //qui correspond aux libelles des abscisses
                libellesX.push({
                    value: i,
                    text: items[i].cells[0].innerHTML
                });
            }
            var line_chart = new dojox.charting.Chart2D('chartLine')
            line_chart.setTheme(dojox.charting.themes.Shrooms);
            line_chart.addPlot("default", {
                type: "Lines",
                markers: true,
                tension: 3,
                shadows: {
                    dx: 2,
                    dy: 2,
                    dw: 2
                }
            });
            line_chart.addAxis("x", {
                min: 0,
                //le max des X correspond au nombre de lignes - l'entete
                max: (items.length - 1),
                //et on insere les libelles issus du tableau
                labels: libellesX
            });
            line_chart.addAxis("y", {
                vertical: true,
                //possibilité d'identifier le max lorsque l'on scanne les cellules
                max: 150
            });
            for (j = 1; j < nbCols; j++) {
                //on cree une serie pour chaque colonne
                //note : store._headings[j] correspond à l'entete d'une colonne (pour la legende)
                line_chart.addSeries(store._headings[j], linesData["lineData" + (j)]);
            }
            line_chart.render();
 
            var anim4b = new dc.action2d.Tooltip(line_chart, 'default');
            var anim4c = new dc.action2d.Shake(line_chart, 'default');
            var line_legend = new dc.widget.Legend({
                chart: line_chart
            }, 'lineLegend');
 
            return line_chart;
        };
 
        store.fetch({
            onComplete: gotItems
        });
    }

D'accord :)

Pour les animations, c'est ma faute, j'avais 2 "render" dans mon script et vous avez supprimé le mauvais :
Code:

1 2 3 4 5 6 7 8 line_chart.render(); // a supprimer var anim4b = new dc.action2d.Tooltip(line_chart, 'default'); var anim4c = new dc.action2d.Shake(line_chart, 'default'); var line_legend = new dc.widget.Legend({ chart: line_chart }, 'lineLegend'); line_chart.render(); // a ajouter

25/02/2011, 14h07
drake56

Merci, c'est parfait (enfin il a fallu que je laisse les 2 render sinon c'est la légende qui ne fonctionnait plus (faut pas chercher à comprendre parfois :roll:))
Je vais faire la même chose pour les diagrammes en colonnes puis je pense que ça fera l'affaire pour l'instant (à voir plus tard si je peux diminuer le code)

Bonne après-midi et bon weekend :)

Edit : Juste un dernier petit renseignement, faut-il que je mettes autant de create_chart('pie') par exemple que j'ai de graphiques à obtenir ou un seul create_chart(...) de chaque type est suffisant ?

Edit 2 : Je ne peux pas avoir 2 graphiques de même type sur une même page html seul le premier apparait :(
25/02/2011, 15h24
Daniel_Gibot
Si vous voulez plusieurs graphiques de même type il faut autant de balises
Code:

1 2 3 <div id="chartLinex" style="width: 500px; height: 300px; padding:40px;"> </div>
qu'il y a de graphiques à créer. Sinon ca utilise la même balise pour en ouvrir 2 du coup il n'y a que le dernier qui est affiché.

Merci mais ce n'est pas très clair, en fait j'avais bien rajouter une autre balise même un nouveau tableau que voici :

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
  <table id="pieTable" border=1>
            <thead>
                <tr>
                    <th>
                        Service
                    </th>
                    <th>
                        Taux service
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Famille Solidarité
                    </td>
                    <td>
                        16%
                    </td>
                </tr>
                <tr>
                    <td>
                        Famille Enfance
                    </td>
                    <td>
                        13%
                    </td>
                </tr>
                <tr>
                    <td>
                        Aménagement
                    </td>
                    <td>
                        30%
                    </td>
                </tr>
                <tr>
                    <td>
                        Urbanisme
                    </td>
                    <td>
                        41%
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartPie" style="width: 500px; height: 300px; padding:40px;">
        </div>
        <br>
        <br>
        <br>
        <div id="pieLegend" style='padding:40px'>
        </div>

Ce que vous voulez dire c'est que si j'utilise 2 div avec le même id, je n'aurai qu'un seul graphique ?

25/02/2011, 16h18
Daniel_Gibot

Ce que je veux dire c'est qu'à la création du graphique dans la fonction javascript, si vous créez l'objet

Code:

var line_chart = new dojox.charting.Chart2D('chartLine')

2 fois c'est la deuxième création qui est affichée.
25/02/2011, 16h21
drake56

Ah d'accord, du coup pour gérer les div html de création de graphique et légende, je vais essayer de faire passer leurs id en paramètres de la fonction javascript pour qu'il soit unique, ça fait un peu "bidouillage" mais ça peut marcher j'espère :)
25/02/2011, 16h22
Daniel_Gibot

Oui en créant dynamiquement les div vous pourrez créer autant de graphiques que vous souhaitez.

Bonjour,

je suis en train de finaliser mon travail sur Dojo et je me suis rendu compte que j'ai un problème avec l'affichage du tooltip (il apparait en bas de la page mais quand on survole un élément du graphique qui est en haut de la page (car il y en a 4) on ne voit pas le tooltip). D'où cela peut il venir ?
Je vous joins mon 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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
function create_chart(chart_type, chart_title, chart_id, chart_legend, table_id){
 
    if (chart_type == 'column') {
 
        dojo.byId(chart_id).innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: table_id
        });
        var columnData = [];
		var libX= [];
        var gotItems = function(items, request){
            for (i = 0; i < items.length; i++) {
                columnData.push({
                    y: parseInt(items[i].cells[1].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[1].innerHTML,
                });
 
				libX.push({
					value: i+1,
					text: items[i].cells[0].innerHTML
				})
            }
        };
        store.fetch({
            onComplete: gotItems
        });
        var dc = dojox.charting;
        try {
            var column_chart = new dojox.charting.Chart2D(chart_id);
            column_chart.setTheme(dojox.charting.themes.ThreeD).addAxis('x', {
                fixUpper: 'major',
                includeZero: false,
                min: 0,
                max: 3,
				labels: libX
            }).addAxis('y', {
                vertical: true,
                fixLower: 'major',
                fixUpper: 'major',
                max: 30
            }).addPlot('default', {
                type: 'Columns',
                minBarSize: 70,
                maxBarSize: 70,
                gap: 5,
            }).addSeries(chart_title, columnData, {});
            var anim4b = new dc.action2d.Tooltip(column_chart, 'default');
            var anim4c = new dc.action2d.Shake(column_chart, 'default');
            column_chart.render();
            var column_legend = new dc.widget.Legend({
                chart: column_chart
            }, chart_legend);
 
            return column_chart;
        } 
        catch (e) {
            log.error("Error : chart not generated", e);
        }
    }
    if (chart_type == 'pie') {
        dojo.byId(chart_id).innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: table_id
        });
        var pieData = [];
        var gotItems = function(items, request){
 
            for (i = 0; i < items.length; i++) {
 
                pieData.push({
                    y: parseInt(items[i].cells[1].innerHTML),
                    text: items[i].cells[0].innerHTML,
                    tooltip: items[i].cells[1].innerHTML,
                });
            }
        };
        store.fetch({
            onComplete: gotItems
        });
        var dc = dojox.charting;
        try {
            var pie_chart = new dojox.charting.Chart2D(chart_id);
            pie_chart.setTheme(dojox.charting.themes.ThreeD)
            pie_chart.addPlot('default', {
                type: 'Pie',
                font: 'normal normal 7pt Tahoma',
                radius: 90,
                fontColor: 'black',
                labelOffset: -40,
            })
            pie_chart.addSeries('SeriesPie', pieData)
            pie_chart.connectToPlot("default", function(o){
                if (o.type == "onclick") {
                    document.location.href = "http://www.google.fr"
                }
            });
            pie_chart.render();
            var anim4b = new dc.action2d.Tooltip(pie_chart, 'default');
            var anim4c = new dc.action2d.Shake(pie_chart, 'default');
            pie_chart.render();
            var pie_legend = new dc.widget.Legend({
                chart: pie_chart
            }, chart_legend);
 
            return pie_chart;
        } 
        catch (e) {
            log.error("Error : chart not generated", e);
        }
 
    }
    if (chart_type == 'line') {
        dojo.byId(chart_id).innerHTML = '';
        var store = new dojox.data.HtmlStore({
            dataId: table_id
        });
        var linesData = {};
        //tableau qui contiendra tous les entetes de colonne
        var libellesX = [];
        var dc = dojox.charting;
        //fonction gotItems
		try {
			var gotItems = function(items, request){
				//nombre de colonnes du tableau
				var nbCols = items[0].cells.length;
				for (j = 1; j < nbCols; j++) {
					//on crée un tableau correspondant à chaque colonne 
					//(une serie = une ligne de graph
					linesData["lineData" + (j)] = [];
				}
				for (i = 0; i < items.length; i++) {
					//pour chaque ligne, on recupere la valeur de chaque colonne
					//et on l'insere dans le tableau lui correspondant
					for (j = 1; j < nbCols; j++) {
						linesData["lineData" + (j)].push({
							x: i,
							y: parseInt(items[i].cells[j].innerHTML),
							text: items[i].cells[0].innerHTML,
							tooltip: items[i].cells[j].innerHTML
						});
					}
					//et pour chaque ligne on prend la valeur de la 1ere colonne (0)
					//qui correspond aux libelles des abscisses
					libellesX.push({
						value: i,
						text: items[i].cells[0].innerHTML
					});
				}
				var line_chart = new dojox.charting.Chart2D(chart_id)
				line_chart.setTheme(dojox.charting.themes.Shrooms);
				line_chart.addPlot("default", {
					type: "Lines",
					markers: true,
					tension: 3,
					shadows: {
						dx: 2,
						dy: 2,
						dw: 2
					}
				});
				line_chart.addAxis("x", {
					min: 0,
					//le max des X correspond au nombre de lignes - l'entete
					max: (items.length - 1),
					//et on insere les libelles issus du tableau
					labels: libellesX
				});
				line_chart.addAxis("y", {
					vertical: true,
					//possibilité d'identifier le max lorsque l'on scanne les cellules
					max: 150
				});
				for (j = 1; j < nbCols; j++) {
					//on cree une serie pour chaque colonne
					//note : store._headings[j] correspond à l'entete d'une colonne (pour la legende)
					line_chart.addSeries(store._headings[j], linesData["lineData" + (j)]);
				}
 
				line_chart.render();
				var anim4b = new dc.action2d.Tooltip(line_chart, 'default');
				var anim4c = new dc.action2d.Magnify(line_chart, 'default');
				var line_legend = new dc.widget.Legend({
					chart: line_chart
				}, chart_legend);
				line_chart.render();
				return line_chart;
			};
 
			store.fetch({
				onComplete: gotItems
			});
		}
		catch(e){
			log.error("Error : chart not generated", e);
		}
    }
}

Merci d'avance