[MySQL] Highcharts et Mysql

Bonjour à toutes et à tous,

Je viens vous soumettre mon problème car je tourne en rond !

Je souhaite créer dans une page web un graphique avec les notes abtenues par des élèves. Pour ce faire j'utilise Highcharts pour la qualité des ggraphes restitués.
J'exécute une requête sur ma table afin d'extraite les notes, je lis le résultat tout est OK, et quand j'affiche le graphique, seule la première données est restituée !!

Si quelqu'un a une idée pour me permettre d'afficher le graphe correctement ça serait génial.

Par avance merci à toutes et à tous.

voici le code :

Code:

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
<?php
include("fonctions.php");
  connectMaBase();
?>
<head>
<title>Highcharts Exemple 2</title>
<!-- Chargement des librairies: Jquery & highcharts -->
<script type='text/javascript' src='c:/wamp/www/MarsaInter/graphique/js/jquery.min.js'></script>
<script type="text/javascript" src="c:/wamp/www/MarsaInter/graphique/js/highcharts.js" ></script>
<script type="text/javascript" src="c:/wamp/www/MarsaInter/graphique/js/modules/exporting.js" ></script>
</head>
<?php
//selection des champs souhaités dans la base		
$rq='select *  from note ';
$res=mysql_query($rq) or die (mysql_error());
while($result=mysql_fetch_array($res)){
$data[] = $result['note'];
}
 
foreach($data as $valeur) 
  {     
echo $valeur ,'<br/>'; 
 }
?>
</p>
 
<!-- Chargement des variables, et paramètres de Highcharts -->
<script type="text/javascript">
	$(function () {
    var chart;
    $(document).ready(function() {
 
		Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
		    return {
		        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
		        stops: [
		            [0, color],
		            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
		        ]
		    };
		});
 
		// Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Note élèves'
            },
            tooltip: {
        	    pointFormat: '<b>{point.percentage}%</b>',
            	percentageDecimals: 1
            },
            plotOptions: {
                column: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'column',
                name: 'Notes',
                data: [
                    ['Notes',   <?php foreach($data as $valeur) {   echo $valeur, ','; } ?>]
					]
            }]
        });
    });
 
});</script>
<!-- Affichage du graphique -->
<div id="container" style="width:400px; height:400px;"> 
</div></p>
 
</body>
</html>