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"
codes:
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 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="css/style.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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> <script src="test.js"></script> </head> </head> <body> <div id="selection"> <select> </select> </div> <div id="graphiques"> </div> </body> </html> </html>
JQUERY:
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
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 } } }); }); }); }); }); });
Merci par avance
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 } }
Partager