Chargement d'un élément en Javascript

**drake56** · 24/02/2011, 10h39

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 :

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
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 :

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
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>

**RomainVALERI** · 24/02/2011, 13h36

Code html :

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

1
2
3
...
<body onLoad:"create_chart('pie');">
...

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 ?

**SpaceFrog** · 24/02/2011, 13h48

non

**drake56** · 24/02/2011, 15h37

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

!

Voici la dernière version du 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
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 :

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
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

**Daniel_Gibot** · 24/02/2011, 16h10

Bonjour,

Pour connaitre le nombre de colonnes :

Code :

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

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.

**drake56** · 24/02/2011, 16h18

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 ?

Chargement d'un élément en Javascript

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager