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

Voila la fonction onchange de la combobox:
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
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 php : Sélectionner tout - Visualiser dans une fenêtre à part
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 : 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
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
<div id='secondaire_job_24h' style='min-width: 310px; height: 400px; margin: 0 auto'></div>

Merci a vous tous