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

  1. #1
    Membre du Club
    Génération d'une page avec graphiques en fonction d'un .json
    Bonjour,

    Je suis en train d'essayer de réaliser un script Jquery afin de générer une page web avec des graphiques à partir des données d'un JSON. Pour la génération des graphiques, j'utilise CHART.js !

    Cependant je bloque car j'ai cette erreur ci :
    Error: Syntax error, unrecognized expression: "canvas #Toto25"
    Voici mon
    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
    <!DOCTYPE html>
    <html>
     
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width">
    	<title>repl.it</title>
    	<link href="test-graph.css" rel="stylesheet" type="text/css" />
    	<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css" rel="stylesheet" type="text/css" /> -->
    	<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    	<script src="jquery-3.3.1.min.js"></script>
    	<script src="jquery-ui.js"></script>
    	<script src="chart.min.js"></script>
    	<script src="test-graph.js"></script>
    </head>
    <body>
    	<button>Test</button>
    	<div id="graphiques">
     
    	</div>
    </body>
    </html>


    JQUERY:
    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
     
    $(document).ready(function(){
    	var $graph=$('#graphiques');
    		// $button=$('button');
    	$.getJSON('rp.json',function(rp_stats){
    		$.each(rp_stats,function(webservices){
    			var labels_ws=[],
    				data_ws=[];
    			$graph.append("<canvas id='"+webservices+"'></canvas>");
    			$.each(rp_stats[webservices],function(code_apache){
    			var ctx = $('"canvas #'+webservices+'"');
    				labels_ws.push(code_apache);
    				data_ws.push(rp_stats[webservices][code_apache]);
     
    				new Chart (ctx,{
    					type:'pie',
    					data:{
    						labels:labels_ws,
    						datasets: [{data:data_ws
    						}],
    					},
    					options:{
    						responsive: true,
    						title:{
    							display: true,
    							text:'Test'
    						}
    					}
    				});
    			});
    		});
    	});
    });


    Un petit bout du json :
    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
    {"Toto25":{
    "200":4263},
    "Toto34":{
    "200":5958},
    "Toto2":{
    "200":7678,
    "500":2,
    "502":1,
    "503":1},
    "Toto1":{
    "200":7583},
    "Toto9":{
    "200":12289},
    "Toto8":{
    "200":205273,
    "500":3},
    "Toto7":{
    "200":8},
    "Toto5":{
    "200":583,
    "400":2},
    "Toto3":{
    "200":2567,
    "500":11}
    }


    et je n'arrive pas à comprendre pourquoi il ne veut pas ^^

    Merci pour votre aide

  2. #2
    Modérateur

    Bonjour,
    regarde bien cette ligne :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    var ctx = $('"canvas #'+webservices+'"');

    peut être il y a-t-il des quottes en trop !

    Au passage, une ID devant être unique, il n'est pas nécessaire de précéder le signe # par un quelconque identifiant.

  3. #3
    Membre du Club
    Ah oui Merci ^^

    Ca fonctionne parfaitement maintenant

  4. #4
    Membre du Club
    Création graphiques à la volée
    Re,

    Je me permet de revenir à la charge car je souhaite faire maintenant un affichage à la volée des graphique en fonction de la sélection dans la liste déroulante ^^

    J'ai réussi mais j'ai un element où je rencontre l'erreur : "failed to create chart can't acquire context from the given item"

    code Jquery:

    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
     
    $(document).ready(function(){
    // Définition des variables
    	var $graph = $('#graphiques'),
    		$container= $('.container'),
    		$select = $('#selection select'),
    		select_val='';
     
    // Paramétrage du cache en false 
    	$.ajaxSetup({cache: false});
    // Chargement du fichier de données JSON
     
     
    	$.getJSON('rp.json',function(rp_stats){
    		$.each(rp_stats, function(webservices){
    			var ctx='';
     
    				$select.append('<option>'+webservices+'</option>'); //Mise en place de la sélection les select_val
    				$select.on('change',function(){
    					var labels_ws=[],
    						data_ws =[];
     
    					select_val=$('select option:selected').text();
    					$graph.empty();
    					console.log(select_val);
    					$graph.append('<div class="chart-container"><canvas id="'+select_val+'" height="600"></canvas></div>');
    					$.each(rp_stats[select_val],function(code_apache){
    						labels_ws.push(code_apache);
    						data_ws.push(rp_stats[select_val][code_apache]);
    						ctx= $('#'+select_val);
    						new Chart(ctx,{
    									type:'doughnut',
    									data:{
    										labels:labels_ws,
    										datasets: [{
    											data:data_ws,
    											backgroundColor: [
    												'#01DF01',
    												'#DF0101',
    												'#BF00FF',
    												'#08088A',
    												'#000000',
    												'#F4FA58'
    											],
    										}],
    									},
    									options:{
    										responsive: true,
    										maintainAspectRatio: false,
    										title:{
    											display: true,
    											text: select_val
    										}
    									}
    								});
    					});
    				});
    		});
    	});
    });


    et l'élément du Json qui pose problème (c'est celui ou il y a plus de 2 code erreurs dénombré)

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    {
    	"BduWebservice-12.0.0_services_WSRncps": {
    		"200": 7678,
    		"500": 2,
    		"502": 1,
    		"503": 1
    	}
    }


    Merci par avance