我使用Highcharts显示包含房间日期/时间和温度的图表。
用于生成图表的javascript位于用户可以查看的temperature.php文件中,javascript将从包含SQL查询的dataSorter.php文件中获取数据,以便从图表中检索MySQL的结果显示。
Javascript在temperature.php中生成图表:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 50
},
title: {
text: 'Temperature vs. Time',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Degrees Celcius'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("dataSorter.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>
此时,我在temperature.php中生成了4个下拉列表,其中包含From Date,To Date,From Time和To Time。这将允许用户选择他们希望看到图表生成的范围。 (例如2014-01-20 00:00:00至2014-01-21 22:00:00)。点击按钮将激活该功能:
if(isset($_POST['sort'])){
$from=$_POST['SDate'];
$to=$_POST['EDate'];
$sTime=$_POST['STime'];
$eTime=$_POST['ETime'];
$start=$from." ".$sTime;
$end=$to." ".$eTime;
header('Location: dataSorter.php?start='.$start.'&end='.$end.'');
}
?>
dataSorter.php具有以下代码:
<?php
$con = mysql_connect("localhost","root","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("scsense", $con);
if(isset($_GET['start'])){
$start = $_GET['start'];
$end = $_GET['end'];
$sth = mysql_query("SELECT * FROM scsenseinfo WHERE roomID='501' AND (dateTime BETWEEN '$start' AND '$end') ORDER BY recordID");
$rows = array();
$rows['name'] = 'DateTime';
while($rr = mysql_fetch_assoc($sth)) {
$rows['data'][] = $rr['dateTime'];
}
$sth = mysql_query("SELECT * FROM scsenseinfo WHERE roomID='501' AND (dateTime BETWEEN '$start' AND '$end') ORDER BY recordID");
$rows1 = array();
$rows1['name'] = 'RoomTemperature';
while($r = mysql_fetch_array($sth)) {
$rows1['data'][] = $r['roomTemp'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
$help = print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
}
else{
$sth = mysql_query("SELECT * FROM (SELECT * FROM scsenseinfo WHERE roomID='501' ORDER BY recordID DESC LIMIT 5) AS tbl ORDER BY tbl.recordID ASC");
$rows = array();
$rows['name'] = 'DateTime';
while($rr = mysql_fetch_assoc($sth)) {
$rows['data'][] = $rr['dateTime'];
}
$sth = mysql_query("SELECT * FROM (SELECT * FROM scsenseinfo WHERE roomID='501' ORDER BY recordID DESC LIMIT 5) AS tbl ORDER BY tbl.recordID ASC");
$rows1 = array();
$rows1['name'] = 'RoomTemperature';
while($r = mysql_fetch_array($sth)) {
$rows1['data'][] = $r['roomTemp'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
$help = print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
}
//header('Location: L501TempSorter.php');
?>
如果我有标题('Location:L501TempSorter.php');未注释,图表不会显示任何内容,即使在页面上载时,也不会单击按钮对日期进行排序。如果进行了注释,则会显示onload图表,但单击按钮对日期进行排序会导致dataSorter.php并保留在页面上,该页面仅显示包含已排序日期的数组。我真的需要帮助,提前谢谢你!
答案 0 :(得分:0)
当您已经打印过某些内容时,您无法使用header
,例如您使用//header('Location: L501TempSorter.php');
。
如果您尝试将print
的输出保存到变量$help
而不是需要使用sprint
。打印将始终输出到输出缓冲区并始终返回1.对于在函数名称中打印之前未以s
或vs
开头的任何打印函数始终指示它将返回结果字符串而不是输出它。
要解决数据未显示的问题,请发布按钮的onlcick代码。它应该是像
这样的ajax调用<script>
$.getJSON('dataSorter.php', {
sort: 'sortValue',
STime: /* get start value */,
ETime: /* get end value */,
SDate: /* get start value */,
EDate: /* get end value */
}, function(data) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
/* or anything that updates your chart */
});
</script>
在执行onClick函数时运行的php脚本中。您可能应该对部分<{1}}进行网址编码
Location:
虽然我不明白你为什么在这里使用<?php
header('Location: dataSorter.php?start='.urlencode($start).'&end='.urlencode($end));
?您已经在服务器上,为什么要告诉客户端浏览器加载一个不同的位置include您的脚本应该立即运行。
答案 1 :(得分:0)
如果您仅将此脚本用于返回json,那么您使用位置的目的是什么?当您在javascirpt中加载json时,您运行整个PHP脚本,因此od返回json,您将重定向到其他位置,因此json未加载到javascript中。