IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club Avatar de gadje
    Homme Profil pro
    Développeur SI
    Inscrit en
    Mars 2010
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Développeur SI

    Informations forums :
    Inscription : Mars 2010
    Messages : 84
    Points : 36
    Points
    36
    Par défaut Sélection d'un type de réprésentation graphique.
    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.

  2. #2
    Nouveau membre du Club Avatar de gadje
    Homme Profil pro
    Développeur SI
    Inscrit en
    Mars 2010
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Développeur SI

    Informations forums :
    Inscription : Mars 2010
    Messages : 84
    Points : 36
    Points
    36
    Par défaut Evolution du code
    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.

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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 !

  4. #4
    Nouveau membre du Club Avatar de gadje
    Homme Profil pro
    Développeur SI
    Inscrit en
    Mars 2010
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Développeur SI

    Informations forums :
    Inscription : Mars 2010
    Messages : 84
    Points : 36
    Points
    36
    Par défaut
    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>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 12/03/2009, 11h21
  2. Valeur d'un invite de type TREE vers graphique
    Par NicolaTesla dans le forum Cognos
    Réponses: 0
    Dernier message: 10/02/2009, 16h02
  3. Changer le type d'un graphique
    Par MuadDib_II dans le forum VBA Access
    Réponses: 2
    Dernier message: 02/09/2008, 18h30
  4. Afficher un écart-type sur un graphique
    Par florian C dans le forum MATLAB
    Réponses: 1
    Dernier message: 14/08/2008, 14h05
  5. sélection d'un type de fichier précis
    Par youp_db dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 12/12/2006, 12h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo