Le graphe ne s'affiche pas lors du chargement de la page php en jQuery

**laghmicy** · 21/01/2014, 12h27

Bonjour ,

j'ai besoin de votre aide pour avancer dans mon projet,
j'ai utilisé la méthode $.poste pour charger le fichier mayphp.php qui permet de récupérer les données de la base de données afin de générer un graphe en utilisant la bibliothèque Highcharts-3.0.7.
myphp.php

Code php :

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?php
require_once('data.php');
$i=0;
$cell_name = $_POST['cell_name'];
$from_date = $_POST['from_date'];
$to_date = $_POST['to_date'];
$action = $_POST['action'];
echo'<br><br><br>name....'.$cell_name;
echo'<br>from....'.$from_date;
echo'<br>to....'.$to_date;
echo'<br>AA....'.$action;
if ($from_date == NULL or $to_date==NULL or $cell_name == NULL) echo '<br> Les champs doivent etre non vides';
else{
	if ($action == 'RRC_Accessibility'){
		echo'<br><br> RRC_Accessibility <br>';
		$resultats = $pdo->query(' SELECT 
			rsran000_cell. Period_start_time ,
			SUM( RRC_Stp_att ) AS SumOfRRC_Stp_att,
			SUM( RRC_stp_and_acc_CR_UE ) AS SumOfRRC_stp_and_acc_CR_UE,
			FROM rsran000_cell
			where Period_start_time >="'.$from_date.'" and Period_start_time <="'.$to_date.'"
			GROUP BY Period_start_time
		');
		foreach($resultats as $res){
			$Period_start_time[] = $res[0];
			$SumOfRRC_Stp_att[] = $res[1]; //RRC_Stp_att
			$SumOfRRC_stp_and_acc_CR_UE[] = $res[2]; //RRC_stp_and_acc_CR_UE
			$i= $i+1;
		}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transpitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transpitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
	<title>Cell</title>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" src="js/highcharts.js" ></script>
	<script type="text/javascript" src="js/themes/gray.js"></script>
	<script src="js/modules/exporting.js"></script>
	<script> <!-- script pour générer le graphe -->
$(function () {
	$('#container').highcharts({
		chart: {
			zoomType: 'xy'
		},
		title: {
			text: 'RRC Setup&access SR'
		},
		subtitle: {
			text: ''
		},
		xAxis: [{
			categories: <?php echo json_encode($Period_start_time, JSON_NUMERIC_CHECK);?>
		}],
		yAxis: [{ // Primary yAxis
			min:0,
			labels: {
				format: '{value}',
				style: {
					color: '#89A54E'
				}
			},
			title: {
				text: 'SumOfRRC stp and acc CR UE',
				style: {
					color: '#89A54E'
				}
			}
		}, { // Secondary yAxis
			title: {
				text: 'SumOfRRC Stp att',
				style: {
					color: '#FF00FF'
				}
			},
			labels: {
				format: '{value} ',
				style: {
					color: '#FF00FF'
				}
			},
			opposite: true
		}],
		tooltip: {
			shared: true
		},
		legend: {
			layout: 'vertical',
			align: 'left',
			x: 120,
			verticalAlign: 'top',
			y: 100,
			floating: true,
			backgroundColor: '#FFFFFF'
		},
		series: [{
			name: 'SumOfRRC stp and acc CR UE',
			color: '#89A54E',
			type: 'spline',
			yAxis: 0,
			data: [<?php echo json_encode($SumOfRRC_stp_and_acc_CR_UE, JSON_NUMERIC_CHECK);?>],
			tooltip: {
				valueSuffix: ''
			}
		}, {
			name: 'SumOfRRC Stp att',
			color: '#FF00FF',
			type: 'column',
			yAxis: 1,
			data: [<?php echo json_encode($SumOfRRC_Stp_att, JSON_NUMERIC_CHECK); ?>],
			tooltip: {
				valueSuffix: ''
			}
		}]
	});
});
	</script>
</head>
<body>
<div id="container" style="width: 80%; height: 400px; margin: 10px auto"></div>
</body>
</html>
<?php } } ?>

Les données sont sont transmises mais le graphe ne s'affiche pas sur la page aja1.php. sachant qu'il s'affiche lorsque j'appel la page myphp.php directement et non sur aja1.php
Code aja1.php

Code html :

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
<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript"   src = "js/jquery.min.js"></script>
	<script src="js/bootstrap-datepicker.js"></script>
	<link rel="stylesheet" typePreview post="text/css" href="css/datepicker.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script>
$(function() {
        $( "#datepicker" ).datepicker();
});
$(function() {
        $( "#datepicker1" ).datepicker();
});
        </script>
	<script  type="text/javascript" >
function swapContent(cv){
        var url = "myphp.php";
        $.post('myphp.php',{action: cv, cell_name: form.cell_name.value, from_date: form.from_date.value, to_date: form.to_date.value }, function(data){
                $("#div").html(data).show();
        });
}
        </script>
</head>
<body>
	<form name="form">
	<div class= "corp">
		Cell Name:<input type="text" id="cell_name" name = "cell_name"/>
		<h5>Period </h5>
		<span>from</span>
		<td><div class="input-append date">
			 <input type="text" id="datepicker" name = "from_date" data-date-format="mm.dd.yyyy"/>
			</div>
			<span>to</span>
			<div class="input-append date" >
				 <input type="text" id="datepicker1"  name="to_date" data-date-format="mm.dd.yyyy"/></td></tr>
		</div>
		<!--<input type="button" value="Ok" OnClick="get();"/>-->
	</div>
	<div id="navigation">
		<li><a href="#">Cell Availability</a></li> 
		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">RRC Accessibiliy</a></li> 
		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">RRC_conn_SR</a></li> 
		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">Voice_SASR</a></li> 
		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">Voice_SR</a></li> 
		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">HSDPA Accessibility</a></li> 
		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">RRC Accessibiliy</a></li> 
		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">HSDPA Retainbility</a></li> 
	</div>
</form>
<div id ="info"></div>
<div id ="div"></div>
</p>
</body>
</html>

Merci d'avance.

**van-bom** · 22/01/2014, 10h44

est ce que tu reçois des erreurs java script ou pas ?

**SpaceFrog** · 22/01/2014, 11h18

pourquoi plusierus ready ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$(function() {
	$( "#datepicker" ).datepicker();
});
$(function() {
	$( "#datepicker1" ).datepicker();
});

=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(function() {
	$( "#datepicker, #datepicker1" ).datepicker();
});

Celà mis à part ... je ne vois pas ou tu lances la fonction avec le post ???

tu as des echo avant ton doctype ???
un doctype en transitionlal ?

c'est quoi la seconde page ? avec un doctype et un head ?
un peu fouillis tout ça ...

A mon avis tu as un souci de format de data retourné par ton json encode ...
regarde les formats attendus ...
http://www.highcharts.com/docs/chart-concepts/series

vérifie dans ton code source généré le format que génère ton php

Le graphe ne s'affiche pas lors du chargement de la page php en jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager