[AJAX] AJAX et librairies

Bonjour :)

J'ai un souci bloquant.
Je parviens à utiliser la libraire Highchart qui me permet d'afficher des graphiques, pas de soucis.

Mon soucis c'est que je voudrai afficher des graphiques différents en fonction du choix fait par l'utilisateur dans une liste déroulante.
Pour l'instant, dans un soucis de simplifier le debug, quel que soit le choix fait par l'utilisateur, le graphique sera le même. J'ai mis les données en dure dans le fichier (test.php) qui envois les données pour highchart.

Lé résultat que j'ai actuellement:
- le bloc qui doit contenir le graphique s'affiche bien mais il reste vide
- Quand je regarde mon code source, les données sont bien affichées. c'est vraiment le look des graphiques qui me manque. Comme si la librairy highchart n’interprétait pas les données.

Tout aide sera la bienvenue, je suis bloqué depuis un certain temps :oops:

Voila la fonction onchange de la combobox:

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
function submitForm()
{ 
	var req = null; 
	document.getElementById("zone").innerHTML = "Started...";
	if (window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
		if (req.overrideMimeType) 
		{
			req.overrideMimeType('text/xml');
		}
	} 
	else if (window.ActiveXObject) 
	{
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e)
		{
			try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}
	if(req)
	{      
		req.open("GET", "test.php",true);
		req.onreadystatechange = function() 
		{   
			di = document.getElementById('zone');
			// requete fini
			if(req.readyState == 4)
			{
				if(req.status == 200 || req.status == 304) 
					di.innerHTML = req.responseText;
				else
					di.innerHTML = "Error " + req.status + " : " + req.statusText;
			}
			else  di.innerHTML = "Loading in progress... Please Wait... .. .";
		}  
		req.send(null);
	}
}

Voici la page accueil:

Code:

1
2
3
4
5
6
7
<?php
include(dirname(__FILE__).'/../vues/little_combo.php');
?>
 
<div id="zone">
	Attendre...
</div>

Et voici la page qui est intégré dans le bloc "zone" qui contient les données et le conteneur de highchart:
test.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
$(function () {
	alert("toto123");
	$('#secondaire_job_24h').highcharts({
		chart: {
			type: 'column'
		},
		title: {
			text: 'Stacked column chart'
		},
		xAxis: {
			categories: [
			'00H-01H',
			'01H-02H',
			'02H-03H',
			'03H-04H',
			'04H-05H',
			'05H-06H',
			'06H-07H',
			'07H-08H',
			'08H-09H',
			'09H-10H',
			'10H-11H',
			'11H-12H',
			'12H-13H',
			'13H-14H',
			'14H-15H',
			'15H-16H',
			'16H-17H',
			'17H-18H',
			'18H-19H',
			'19H-20H',
			'20H-21H',
			'21H-22H',
			'22H-23H',
			'23H-00H'
			],
			labels: {
				rotation: -45,
				align: 'right',
				style: {
					fontSize: '13px',
					fontFamily: 'Verdana, sans-serif'
				}
			}
		},
		yAxis: {
			min: 0,
			title: {
				text: 'Total fruit consumption'
			},
			stackLabels: {
				enabled: true,
				style: {
					fontWeight: 'bold',
					color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
				}
			}
		},
		legend: {
			align: 'right',
			x: -70,
			verticalAlign: 'top',
			y: 20,
			floating: true,
			backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
			borderColor: '#CCC',
			borderWidth: 1,
			shadow: false
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.x +'</b><br/>'+
					this.series.name +': '+ this.y +'<br/>'+
					'Total: '+ this.point.stackTotal;
			}
		},
		plotOptions: {
			column: {
				stacking: 'normal',
				dataLabels: {
					enabled: true,
					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
				}
			}
		},
		series: [{
			name: 'Appli1',
			data: [5, 3, 4, 7, 2, 5, 3, 4, 7, 5, 3, 4, 7, 5, 3, 4, 7, 5, 3, 4, 2, 5, 3, 4]
		}, {
			name: 'Appli2',
			data: [2, 2, 3, 2, 1, 5, 2, 3, 2, 1, 5, 2, 3, 2, 1, 5, 2, 3, 2, 1, 5, 2, 3, 2]
		}, {
			name: 'Appli3',
			data: [3, 4, 4, 2, 5, 3, 4, 4, 2, 3, 4, 4, 2, 3, 4, 4, 2, 3, 4, 4, 2, 3, 4, 4]
		}]
	});
});

Code:

<div id='secondaire_job_24h' style='min-width: 310px; height: 400px; margin: 0 auto'></div>

Merci a vous tous :ccool: