Sélection d'un type de réprésentation graphique.

Version imprimable

Bonjour à la communauté,
je souhaite mettre en place un outil statistique en lien avec des appartements thérapeutiques équipés en domotique, ces derniers sont situés dans un centre de rééducation pour personnes en situation de handicape.
Je veux générer des représentations graphiques à partir de jeux de données brutes au format CSV. Mon problème est que je ne parviens pas à faire fonctionner la sélection du type de graphique désiré (via menu déroulant). Je récupère bien la "value" du "select" mais impossible de la passer à la fonction. J'utilise D3JS et C3JS pour les librairies graphiques, pas de soucis de ce côté là.
Étant une buse en javascript :oops: j'aurai bien besoin d'un petit coup de pouce de la part de personnes compétentes.
Je mets ici mon code pour celles et ceux qui auraient la bonté de s'y intéresser :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head>
	<style type = "text/css">
 
		div{
		position : absolute;
		top : 5%;
		width : 100%;
		height : 80%;
		border : 1px black solid;
		text-align : center;
		}
	</style>
</head>
<body>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Choix</title>
<script type="text/javascript">
        function recup_valeur(graph) {
                var select = document.getElementById(graph);
                var options = select.getElementsByTagName('option');
                return options[select.selectedIndex].value;             
        }
        function affiche_valeur(graph) {
                var valeur = recup_valeur(graph);
                //Test de retour de la valeur
                alert(valeur);  
        
                var chart = c3.generate({
                        data: {
                                url: 'Ressources/C3_test1.csv',
                                type: bar
                        },                      
                        //Durée de la transition
                        transition: {
                                duration: 2000
                        },                      
                        //Taille du graph
                        size: {
                                height: 240,
                                width: 510
                        },                      
                        // Affichage de grille  
                        grid: {
                        x: {
                        show: true
                        },
                        y: {
                        show: true
                        }
                        }                       
                }
                );
                setTimeout(function () {
                        chart.load({
                                url: 'Ressources/C3_test2.csv'                                                          
                        }                       
                );
                }, 2000);
                setTimeout(function () {
                        chart.load({
                                url: 'Ressources/C3_test3.csv'                          
                        });
                }, 4000);               
                setTimeout(function () {
                        chart.load({
                                url: 'Ressources/C3_test2.csv'                          
                        });
                }, 6000);               
                setTimeout(function () {
                        chart.load({
                                url: 'Ressources/C3_test1.csv'                          
                        });
                }, 8000);               
                setTimeout(function () {
                        chart.load({
                                url: 'Ressources/C3_test3.csv'                          
                        });
                }, 10000);                      
                }               
</script>
<div>
<form method="post" action="">
		<select id = "graph">
		<option value = "donut" selected>Donuts</option>
		<option value = "scatter">Points</option>
		<option value = "bar">Barres</option>
		<option value = "line">Lignes</option>
		<option value = "pie">Camembert</option>
		<option value = "spline">Courbes</option>
		<option value = "area-spline">Courbes avec plages</option>
	</select>
</form>
	<button type="button" onclick="affiche_valeur('graph');">Valider</button>		
</div>
</body>
</html>

D'avance merci.

Evolution du code

Comme indiqué dans le titre, j'ai fais évoluer mon code vers une structure conditionnelle comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE">
<html lang="fr">
<head>
        <meta charset=utf-8" />
	<title>Test</title>
	<style type = "text/css">
		div{
		position : absolute;
		top : 10%;
		width : 100%;
		height : 80%;
		border : 1px black solid;
		text-align : center;
		}
	</style>
</head>
<body>	
<form method = "post" action = "" target = "blank">
	<p>
		<select id = "graph">
		<option value = "donut" selected>Donuts</option>
		<option value = "scatter">Points</option>
		<option value = "bar">Barres</option>
		<option value = "line">Lignes</option>
		<option value = "pie">Camembert</option>
		<option value = "spline">Courbes</option>
		<option value = "area-spline">Courbes avec plages</option>
	</select>
	</p>
</form>
	<button type = "button" onclick = "graphik('graph');">Valider</button>	
	<div>
	<p id = "placeGraph"></p>
	</div>	
	<script type="text/javascript">
        function graphik(graph){                
                var select = document.getElementById(graph);
                var options = select.getElementsByTagName('option');
                var val = options[select.selectedIndex].value;          
                if(val == 'donut'){             
                alert('Donut');         
                var chart = c3.generate({
                        data: {
                                url: 'Ressources/C3_test1.csv',
                                type: 'donut'
                        },                      
                        //Durée de la transition
                        transition: {
                                duration: 2000
                        },                              
                }
                );
                setTimeout(function () {
                        chart.load({
                                url: 'Ressources/C3_test2.csv'                                                          
                        }                       
                );
                }, 2000);               
                }               
                if(val == 'scatter'){           
                alert('Points');                
                var chart = c3.generate({
                        data: {
                                url: 'Ressources/C3_test1.csv',
                                type: 'donut'
                        },                      
                        //Durée de la transition
                        transition: {
                                duration: 2000
                        },                              
                }
                );
                setTimeout(function () {
                        chart.load({
                                url: 'Ressources/C3_test2.csv'                                                          
                        }                       
                );
                }, 2000);               
                }               
                return graph;           
                }               
                document.getElementById('placeGraph').innerHTML = graphik(graph);               
        </script>
</body>
</html>

Mais toujours pas de graphiques à l'horizon.
J'ai testé les condition directement dans une page HTML, avec une variable en dur dans le code et cela fonctionne. je pense que ce doit être un problème d'affichage dans une div ou quelque chose dans le style.

21/12/2016, 10h29
NoSmoking

Bonjour,
je vois que ta discussion est résolue, pourrais-tu nous en dire un peu plus sur la résolution de ton problème.

Nota : je ne vois pas dans ton code la prise en compte de bibliothèque !

Bonjour, je poste ici mon code fonctionnel si cela peut servir.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE> 
<html> 
	<head > 
		<meta charset="utf-8">
		<link href = " js\c3\c3.min.css " rel = " stylesheet " type = " text/css "/>
		<script src="js\d3\d3.min.js"></script>
		<script src="js\c3\c3.min.js"></script>
		<title>Présentation C3JS</title >
		<style = "text/css">		
		</style>		
	</head >
	<body > 
		<div id = "">
			<div id = "titre">
				<h1>Projet BLABLABLA</h1>
				<p>Librairies BLIBLIBLI</p>
			</div>			
			<div id = "fond">
				<div id = "noscript">
					<NOSCRIPT>!!! Activer Javascript dans le navigateur pour pouvoir visualiser les graphiques correctement !!!</NOSCRIPT>
				</div>
				<div id = "listeGraph">
					<form method = "post" action = ""><label>Types de graphiques : </label>
							<select id = "graph" onChange = "graphik('graph')">
								<option id = "defaut" value = "defaut" selected>Choisir un type de représentation graphique</option>
								<option value = "donut">Donuts</option>
								<option value = "scatter">Points</option>
								<option value = "bar">Barres</option>
								<option value = "line">Lignes</option>
								<option value = "area">Lignes avec plages</option>
								<option value = "step">Escaliers</option>
								<option value = "area-step">Escaliers avec plages</option>
								<option value = "pie">Camembert</option>
								<option value = "spline">Courbes</option>
								<option value = "area-spline">Courbes avec plages</option>
								<option value = "gauge">Jauges (Pas bien maîtrisé)</option>
							</select>
					</form>
				</div>				
				<div id = "listeGroupe"
					<form method = "post" action = ""><label>Types d'équipements : </label>
							<select id = "groupe" onChange = "graphik('groupe')">
								<option id = "defaut" value = "defaut" selected>Choisir un type d'équipement</option>
								<option value = "portes" selected>Portes</option>
								<option value = "fenetres">Fenêtres</option>
								<option value = "volets">Volets</option>
								<option value = "plan_w">Plan de travail</option>
								<option value = "eclairages">Eclairages</option>
								<option value = "compteurs">Compteurs</option>
								<option value = "capteurs">Capteurs</option>								
							</select>							
					</form> 
				</div>			
				<div id = "chart">
					<img id = "Kerpape" src = "Ressources\logo.png">
					<script type="text/javascript">
                                                /**Type de représentations graphiques : 
                                                        "pie" = camembert
                                                        "donut" = donut
                                                        "scatter" = points
                                                        "bar" = histogramme
                                                        "line" = lignes "area" possible
                                                        "spline" = courbes "area-spline" possible
                                                        "gauge" = jauge
                                                        "step" = escaliers "area-step" possible*/       
                                                function graphik(id_select){
                                                                var select = document.getElementById("graph");
                                                                var options = select.getElementsByTagName('option');
                                                                var graph = options[select.selectedIndex].value;                                                        
                                                                if(graph == 'defaut'){
                                                                        alert('Merci de choisir un type de représentation graphique valide');
                                                        var select = document.getElementById("groupe");
                                                        var options = select.getElementsByTagName('option');
                                                        var groupe = options[select.selectedIndex].value;                                                       
                                                        if(groupe == 'defaut'){alert('Merci de choisir un type d\'équipement valide');}                                                        
                                                        else if(groupe == 'portes'){famille = "Ressources/portes.csv";}                                                 
                                                        else if(groupe == 'eclairages'){famille = "Ressources/eclairages.csv";}                                                 
                                                        else if(groupe == 'fenetres'){famille = "Ressources/fenetres.csv";      }                                                       
                                                        else if(groupe == 'volets'){famille = "Ressources/volets.csv";}                                                 
                                                        else if(groupe == 'plan_w'){famille = "Ressources/plan_de_W.csv";}                                                      
                                                        else if(groupe == 'compteurs'){famille = "Ressources/compteurs.csv";}                                                   
                                                        else if(groupe == 'capteurs'){famille = "Ressources/capteurs.csv";}                                                     
                                                                var chart = c3.generate({
                                                                        data: {
                                                                                x : 'date',
                                                                                //dateFormat: '%Y',
                                                                                columns: [
                                                                                        ['date'],
                                                                                ],
                                                                                type: graph,
                                                                                selection: {
                                                                                        draggable: true,
                                                                                },
                                                                                colors: {
                                                                                        data1: '#ff0000',
                                                                                },
                                                                        },                                                                      
                                                                        axis: {
                                                                                x: {
                                                                                        type: 'timeseries', 
                                                                                        tick: {
                                                                                                //localtime : true,
                                                                                                format: '%d/%m/%Y'
                                                                                        }
                                                                                }
                                                                        },                                                                      
                                                                        //Durée de la transition
                                                                        transition: {
                                                                                duration: 2000
                                                                        },                                                                      
                                                                        //Taille du graph
                                                                        size: {
                                                                        height: 500,
                                                                        width: 1500
                                                                        },                                                                      
                                                                        //Position des légendes
                                                                        legend: {
                                                                                position: 'right'
                                                                        },                                                                      
                                                                        //Sous graphique
                                                                        subchart: {
                                                                                show: true,
                                                                                size: {
                                                                                        height: 30
                                                                                }
                                                                        },                                                                      
                                                                        //Fonction de zoom
                                                                        zoom: {
                                                                                enabled: true,
                                                                                extent: [1, 100] // enable more zooming
                                                                                //rescale: true
                                                                        },                                                                      
                                                                        // Affichage de grille  
                                                                        grid: {
                                                                                /*x: {
                                                                                        show: true
                                                                                },*/
                                                                                y: {
                                                                                        show: true
                                                                                }
                                                                        }
                                                                });
                                                                setTimeout(function () {
                                                                        chart.load({
                                                                                url: famille
                                                                        });
                                                                });                                                             
                                                        }
                                        </script> 
				</div>				
			</div>
		</div>
	</body>
</html>