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

**gadje** · 20/12/2016, 11h31

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

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

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

**gadje** · 20/12/2016, 15h08

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

Code html :

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

**NoSmoking** · 21/12/2016, 10h29

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 !

**gadje** · 17/03/2017, 12h27

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

Code html :

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager