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

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

Bonsoir à tous,

Je débute en Dojo et je souhaiterai générer un graphique circulaire en utilisant des données qui seraient intégrés à un tableau HTML.
Pour l'instant, j'ai trouvé un exemple qui utilise directement des données précisées dans le script dans une variable json, voici ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="./lib/dojo/dojo.js" type="text/javascript" djConfig="isDebug: true, parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require('dojox.charting.Chart2D');
            dojo.require('dojox.charting.widget.Chart2D');
            dojo.require('dojox.charting.themes.Tom');
 
            /* JSON information */
            var json = {
                January: [12999, 14487, 19803, 15965, 17290],
                February: [14487, 12999, 15965, 17290, 19803],
                March: [15965, 17290, 19803, 12999, 14487]
            };
 
            /* build pie chart data */
            var chartData = [];
            dojo.forEach(json['January'], function(item, i){
                chartData.push({
                    x: i,
                    y: json['January'][i]
                });
            });
 
            /* resources are ready... */
            dojo.ready(function(){
 
                var chart2 = new dojox.charting.Chart2D('chart2').setTheme(dojox.charting.themes.Tom).addPlot('default', {
                    type: 'Pie',
                    radius: 70,
                    fontColor: 'black'
                }).addSeries('Visits', chartData).render();
                var anim = new dojox.charting.action2d.MoveSlice(chart2, 'default');
                chart2.render();
 
            });
        </script>
    </head>
    <body>
        <div id="chart2" style="width:200px;height:200px;">
        </div>
    </body>
</html>

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

Merci d'avance pour votre aide

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

Bonjour,

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

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

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

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

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

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

Bonjour,

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

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

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

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

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

Bonjour,

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Line chart</title>
        <script type="text/javascript" src="./lib/log4javascript.js">
        </script>
        <script type="text/javascript" src="./lib/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.addOnLoad(function(){
                dojo.require('dojox.charting.widget.Chart2D');
                dojo.require("dojox.data.HtmlStore");
                dojo.require("dojox.charting.action2d.Highlight");
                dojo.require("dojox.charting.action2d.MoveSlice");
                dojo.require("dojox.charting.action2d.Tooltip");
				dojo.require("dojox.charting.themes.PlotKit.blue");
                dojo.require("dojox.charting.Chart2D");
                dojo.require("dijit.form.NumberSpinner");
				dojo.require("dojox.charting.widget.Legend");
            });
 
            function create_line(){
                dojo.byId('chartOne').innerHTML = '';
                //création du store a partir de la table HTML
                var store = new dojox.data.HtmlStore({
                    dataId: "maTable"
                });
                //création du tableau chartData qui contiendra les données nécessaires
                var chartData = [];
                //fonction gotItems
                var gotItems = function(items, request){
                    //on lit tous les items retournés par la request
                    for (i = 0; i < items.length; i++) {
                        //et pour chacun d'entre eux on les insere dans le tableau chartData
                        chartData.push({
                            //cells[1] correspond à la 2eme cellule du tableau HTML (sans compter les entetes)
                            y: parseInt(items[i].cells[1].innerHTML),
                            //cells[0] correspond à la 1ere cellule du tableau HTML
                            text: items[i].cells[0].innerHTML,
                            tooltip: items[i].cells[1].innerHTML
                        });
                    }
                };
                // on lit le store (table HTML) et on appelle la fonction gotItems a la fin
                store.fetch({
                    onComplete: gotItems
                });
                var dc = dojox.charting;
                try {
                    //on cree le graphique
                    var chart = new dojox.charting.Chart2D('chartOne')
					chart.setTheme(dojox.charting.themes.PlotKit.blue);
                    chart.addPlot("default", {
                        type: "Lines",
                        markers: true,
                        tension: 3,
                        shadows: {
                            dx: 2,
                            dy: 2,
                            dw: 2
                        }
                    });
                    chart.addAxis("x");
                    chart.addAxis("y", {
                        vertical: true
                    });
                    chart.addSeries('Serie 3', chartData, {});
					chart.render();
					var anim_a = new dc.action2d.MoveSlice(chart, "default");
					var anim_b = new dc.action2d.Highlight(chart, "default");
					var anim_c = new dc.action2d.Tooltip(chart, "default");
					var legend = new dojox.charting.widget.Legend({
						chart: chart
					}, "legende");
					chart.render();
                } 
                catch (e) {
                    log.error("Error : chart not generated", e);
                }
            }
        </script>
        <script type="text/javascript">
            // Create the logger
            var log = log4javascript.getLogger();
 
            // Create a PopUpAppender with default options
            var popUpAppender = new log4javascript.PopUpAppender();
 
            // Change the desired configuration options
            popUpAppender.setFocusPopUp(true);
            popUpAppender.setNewestMessageAtTop(true);
 
            // Add the appender to the logger
            log.addAppender(popUpAppender);
        </script>
    </head>
    <script type="text/javascript">
        log.debug("Chart creation");
    </script>
    <body class="claro" onLoad="create_line();">
        <table id="maTable" border=1>
            <thead>
                <tr>
                    <th>
                        mois
                    </th>
                    <th>
                        valeur
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        12999
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        14487
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        15965
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="chartOne" style="width: 500px; height: 300px; padding:40px;">
        </div>
    </body>
</html>

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

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager