Bonjour
j'essaie de faire une petite appli web pour un affichage de graphique de statistiques, et lorsque je clique sur le bouton "ok" de mon form, le graphique (généré avec highcharts) apparait puis disparait aussitot.
Etant complètement novice avec jquery (et js aussi), je sèche !!
html
le js :
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 <!DOCTYPE html> <html> <head> <title>liste analyse / stat</title> <script type='text/javascript' src='Highcharts-3.0.8/js/jquery.min.js'></script> <script type="text/javascript" src="Highcharts-3.0.8/js/highcharts.js" ></script> <script type="text/javascript" src="Highcharts-3.0.8/js/modules/exporting.js" ></script> <script type='text/javascript' src="listes.js"></script> </head> <body> <h2>graphiques</h2> <form name="graphique" > <p>choisir une analyse, puis une statistique associée</p> <select id="analyses" name="analyses"> <option value="">-- Analyses --</option> </select> <select id="stats" name="stats"> <option value="">-- Statistiques--</option> </select></br></br> Date début<input type="date" id="date_deb" name="date_deb" size="10" value="<?php echo date('Y-m-d',strtotime('-3 month')) ?>" /></br></br> Date fin<input type="date" id="date_fin" name="date_fin" size="10" value="<?php echo date('Y-m-d') ?>"/></br></br> Espece<input type="esp" name="esp" size="5"value = "1"/></br></br> <input type="submit" id="valider" name="valider" value="OK"/></br></br> </form> <div id="graphique" style="width: 100%; height: 400px;"></div> </body> </html>
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
61
62
63
64
65
66
67
68
69
70
71 $(document).ready(function() { var $analyses = $('#analyses'); var $stats = $('#stats'); // chargement des analyses $.ajax({ url: 'listes.php', data: 'go', // on envoie $_GET['go'] dataType: 'json', // on veut un retour JSON success: function(json) { $.each(json, function(index, value) { // pour chaque noeud JSON // on ajoute l'option dans la liste $analyses.append('<option value="'+ index +'">'+ value +'</option>'); }); } }); // à la sélection d'une analyse dans la liste $analyses.on('change', function() { var val = $(this).val(); // on récupère la valeur de l'analyse' if(val != '') { $stats.empty(); // on vide la liste des stats $.ajax({ url: 'listes.php', data: 'analyses='+ val, // on envoie $_GET['id_analyse'] dataType: 'json', success: function(json) { $.each(json, function(index, value) { $stats.append('<option value="'+ index +'">'+ value +'</option>'); }); } }); } }); var $valider = $('#valider'); $valider.on('click', function(){ //alert('Ce code fonctionne !'); $('#graphique').highcharts({ chart: { type: 'bar' // pie pour des graphiques en camembert }, title: { text: 'Consommation de fruit' }, xAxis: { categories: ['Pommes', 'Bananes', 'Oranges'] }, yAxis: { title: { text: 'Nombre de fruits mangés' } }, // Les données de notre graphique series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); }); });
Partager