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 ?

Daniel_Gibot · 25/02/2011, 10h21

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 :

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
 
//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');
	};

drake56 · 25/02/2011, 10h36

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

Daniel_Gibot · 25/02/2011, 11h56

Le code est à mettre après :

Code :

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

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

drake56 · 25/02/2011, 12h04

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

) :

Code :

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

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 :

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
    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
        });
    }

Daniel_Gibot · 25/02/2011, 13h50

D'accord

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

Code :

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

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

drake56 · 25/02/2011, 14h07

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

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

Daniel_Gibot · 25/02/2011, 15h24

Si vous voulez plusieurs graphiques de même type il faut autant de balises

Code :

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

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

drake56 · 25/02/2011, 15h32

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 :

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

Daniel_Gibot · 25/02/2011, 16h18

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

Code :

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

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

2 fois c'est la deuxième création qui est affichée.

drake56 · 25/02/2011, 16h21

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

Daniel_Gibot · 25/02/2011, 16h22

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

drake56 · 28/03/2011, 11h17

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 :

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

24/02/2011, 13h48	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	non __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/02/2011, 16h18	#6
drake56 Membre du Club Développeur informatique Inscription : avril 2009 Messages : 235 Détails du profil Informations personnelles : Sexe : Âge : 21 Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : avril 2009 Messages : 235 Points : 42 Points : 42	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 ?
	00

25/02/2011, 10h36	#8
drake56 Membre du Club Développeur informatique Inscription : avril 2009 Messages : 235 Détails du profil Informations personnelles : Sexe : Âge : 21 Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : avril 2009 Messages : 235 Points : 42 Points : 42	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
	00

25/02/2011, 14h07	#12
drake56 Membre du Club Développeur informatique Inscription : avril 2009 Messages : 235 Détails du profil Informations personnelles : Sexe : Âge : 21 Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : avril 2009 Messages : 235 Points : 42 Points : 42	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 )) 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
	00

25/02/2011, 16h18	#15
Daniel_Gibot Membre éprouvé Gibot Daniel Inscription : janvier 2010 Messages : 313 Détails du profil Informations personnelles : Nom : Gibot Daniel Localisation : France, Loire Atlantique (Pays de la Loire) Informations forums : Inscription : janvier 2010 Messages : 313 Points : 439 Points : 439	Ce que je veux dire c'est qu'à la création du graphique dans la fonction javascript, si vous créez l'objet Code : Sélectionner tout - Visualiser dans une fenêtre à part var line_chart = new dojox.charting.Chart2D('chartLine') 2 fois c'est la deuxième création qui est affichée.
	00

25/02/2011, 16h21	#16
drake56 Membre du Club Développeur informatique Inscription : avril 2009 Messages : 235 Détails du profil Informations personnelles : Sexe : Âge : 21 Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : avril 2009 Messages : 235 Points : 42 Points : 42	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
	00

25/02/2011, 16h22	#17
Daniel_Gibot Membre éprouvé Gibot Daniel Inscription : janvier 2010 Messages : 313 Détails du profil Informations personnelles : Nom : Gibot Daniel Localisation : France, Loire Atlantique (Pays de la Loire) Informations forums : Inscription : janvier 2010 Messages : 313 Points : 439 Points : 439	Oui en créant dynamiquement les div vous pourrez créer autant de graphiques que vous souhaitez.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email