[AJAX] Affichage d'un graph après requête en ajax

Bonjour,

Voilà j'ai une page qui se nomme stats.php qui affiche une liste déroulante où l'utilisateur doit choisir une marque de voiture. Une fois la marque choisit cela doit générer un graphe basé sur des infos stockées dans ma bdd mysql.

Pour la partie formulaire et envoi des données vers une autre page pour traitement de la requête il n'y à pas de problèmes : une petite vérif avec firebug me montre que mes variables partent bien en POST.

Firebug dans l'onglet réponse m'affiche bien ce qui doit être généré par la page de traitement mais rien ne s'affiche dans ma page stats.php...

Je commence à désespérer cela fait 3 jours que je bloque là dessus.

Le code de ma page stats.php:

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
<div class="panel" id="panel-voitures2">
          <header>
            <i class="icon-asterisk"></i>
            <span>Statistiques par marques</span>
          </header>
          <div class="content">
            <form method="post" action="ajax/ajax_stats_marques.php" id="statsmarques">
            <fieldset>
            <div class="controls">
                <div class="input-prepend">
                  	<div class="btn-group">      
                    	<span class="btn dropdown-toggle2 span3" data-toggle="dropdown">Marque</span>
                  	</div><!-- /btn-group -->
                  	<select name="marque" id="marque" >
						<option value='-1'>Aucune</option>
						<?                                      
                                                        $res = mysql_query("SELECT STATS_VEHICULES.NUM_MARQUE_VEHICULE, NOM_MARQUE_VEHICULE FROM STATS_VEHICULES, MARQUE_VEHICULE WHERE STATS_VEHICULES.NUM_MARQUE_VEHICULE=MARQUE_VEHICULE.NUM_MARQUE_VEHICULE AND NUM_GROUPE='$num_groupe' GROUP BY NUM_MARQUE_VEHICULE");
                                                        while($row = mysql_fetch_assoc($res)){
                                                                echo "<option value='".$row["NUM_MARQUE_VEHICULE"]."'>".$row["NOM_MARQUE_VEHICULE"]."</option>";
                                                        }
                                                        $dates_marques='';
                                                        $valeurs_marques='';
                                                ?>
                      </select>
                      <input type="hidden" name="igroupe" value="<? echo $num_groupe; ?>">
                      <input type="hidden" name="startdate" value="<? echo $datestart; ?>">
                      <input type="hidden" name="enddate" value="<? echo $dateend; ?>">
                      <button type="submit" class="btn btn-primary">Ok</button>
 
                </div>
              </div>
 
            </fieldset>
            </form>
 
    <div id="graphmarques"></div>
          </div>
        </div>

Le script qui fait du POST vers la page de traitement :

Code:

1
2
3
4
5
6
7
8
$(document).ready( function() {
	$("#statsmarques").submit(function () {
		$.post("ajax/ajax_stats_marques.php",$("#statsmarques").serialize(),function(texte){
		$("div#graphmarques").append(texte);
	});
	return false; // ne change pas de page
});
});

Ma page de traitement (ajax_stats_marques.php)

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
include ('../connect.php');
if(isset($_POST["marque"])){
	$num_marque=$_POST["marque"];
	$num_groupe=$_POST['igroupe'];
	$datestart=$_POST['startdate'];
	$dateend=$_POST['enddate'];
	$sql_dates_marques="SELECT DATE_STATS_VEHICULES FROM STATS_VEHICULES WHERE DATE_STATS_VEHICULES BETWEEN '$datestart' AND '$dateend'  AND NUM_GROUPE='$num_groupe' AND NUM_MARQUE_VEHICULE='$num_marque' GROUP BY DATE_STATS_VEHICULES";
	$req_dates_marques=mysql_query($sql_dates_marques) or die('Erreur SQL !<br>'.$sql_dates_marques.'<br>'.mysql_error());
	$dates_marques='';
	$valeurs_marques='';
	while ($data_dates=mysql_fetch_array($req_dates_marques))
	{
		$dates_marques=$dates_marques.",'".substr($data_dates['DATE_STATS_VEHICULES'],8,2).'-'.substr($data_dates['DATE_STATS_VEHICULES'],5,2).'-'.substr($data_dates['DATE_STATS_VEHICULES'],0,4)."'";
		$date_stats_marques=$data_dates['DATE_STATS_VEHICULES'];
		//somme des différentes marques de vehicules enregistrés pour le groupe
		$sql_sum_marques="SELECT SUM( COMPTEUR_STATS_VEHICULES ) AS somme FROM STATS_VEHICULES WHERE DATE_STATS_VEHICULES='$date_stats_marques' AND NUM_MARQUE_VEHICULE='$num_marque' AND NUM_GROUPE='$num_groupe'";
		$req_sum_marques=mysql_query($sql_sum_marques) or die('Erreur SQL !<br>'.$sql_sum_marques.'<br>'.mysql_error());
		$data_sum_marques=mysql_fetch_assoc($req_sum_marques);
		$valeurs_marques[]=$data_sum_marques['somme'];
	}
	echo '<script type="text/javascript">';
 
	echo "$(function () {
        $('#stmarques').highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: ''
            },
 
            xAxis: {
                categories: [".substr($dates_marques,1)."],
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            yAxis: {
                title: {
                    text: 'Stats par marque'
                },
                labels: {
                    formatter: function() {
                        return this.value ;
                    }
                }
            },
            tooltip: {
                shared: true,
                valueSuffix: ''
            },
            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            },
            series: [{
                name: 'Nombre total de véhicules',
                data: [".join($valeurs_marques,',')."]
 
            },
 
 
			]
        });
    });
 
 
		</script>";
	echo '<div id="stmarques" style="min-width: 400px; height: 400px; margin: 0 auto"></div>';
 
	}

Et pour finir ce que j'obtiens dans l'onglet réponse de firebug :

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
<script type="text/javascript">$(function () {
        $('#stmarques').highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: ''
            },
 
            xAxis: {
                categories: ['22-05-2013','23-05-2013','24-05-2013'],
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            yAxis: {
                title: {
                    text: 'Stats par marque'
                },
                labels: {
                    formatter: function() {
                        return this.value ;
                    }
                }
            },
            tooltip: {
                shared: true,
                valueSuffix: ''
            },
            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            },
            series: [{
                name: 'Nombre total de véhicules',
                data: [1,1,1]
 
            },
 
 
			]
        });
    });
		</script><div id="stmarques" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Apparemment le code se génère bien mais pourquoi il ne s'affiche pas je n'arrive pas à comprendre.
Je cherche désespérément une piste pour avancer...