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
    Homme Profil pro
    Intérimaire
    Inscrit en
    mai 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Intérimaire

    Informations forums :
    Inscription : mai 2017
    Messages : 70
    Points : 55
    Points
    55

    Par défaut 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

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 705
    Points : 33 370
    Points
    33 370

    Par défaut

    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
    Homme Profil pro
    Intérimaire
    Inscrit en
    mai 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Intérimaire

    Informations forums :
    Inscription : mai 2017
    Messages : 70
    Points : 55
    Points
    55

    Par défaut

    Ah oui Merci ^^

    Ca fonctionne parfaitement maintenant

  4. #4
    Membre du Club
    Homme Profil pro
    Intérimaire
    Inscrit en
    mai 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Intérimaire

    Informations forums :
    Inscription : mai 2017
    Messages : 70
    Points : 55
    Points
    55

    Par défaut 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

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

Discussions similaires

  1. Impression d'une page avec des graphiques sous Internet explorer 8
    Par donnang dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 01/10/2013, 20h37
  2. [WD-2010] Uniformiser une page avec des graphiques
    Par nzill dans le forum Word
    Réponses: 0
    Dernier message: 14/06/2012, 20h53
  3. Comment arreter le rafraichissement d'une page avec un popup
    Par Wanty dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 11/08/2005, 14h44
  4. Réponses: 13
    Dernier message: 16/04/2004, 12h00
  5. Récupérer le code HTML d'une page avec Delphi 7
    Par PsyKroPack dans le forum Web & réseau
    Réponses: 5
    Dernier message: 06/02/2003, 21h56

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