转换流量表，使其每隔60秒动态更新一次 [英] Convert Flot Chart so that it dynamically updates at 60 second intervals
问题描述
我有一个.php页面，该页面通过查询数据库来绘制折线图.我希望在创建一些Ajax(或其他方式)代码以每60秒动态更新一次过程中提供一些帮助.以下是我所拥有的.在此先感谢:)
I have a .php page that renders out a line plot Flot chart by querying my database. I would love some assistance in creating some ajax (or otherwise) code to dynamically update it every 60 seconds. Below is what I have. Thanks in advance:)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 450px; height: 200px; }
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
<script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>
<?php
$server = "myserver:1234";
$user="dbuser";
$password="userpass";
$database = "dbname";
$connection = mysql_connect($server,$user,$password);
$db = mysql_select_db($database,$connection);
$query = "SELECT X, Y FROM listener_incr";
$result = mysql_query($query);
$i = -60;
while($row = mysql_fetch_assoc($result))
{
$dataset1[] = array($i,$row['Y']);
$i++;
}
$final = json_encode($dataset1,JSON_NUMERIC_CHECK);
?>
<script type="text/javascript">
var d1 = <?php echo $final; ?>;
$(document).ready(function () {
$.plot($("#placeholder"), [
{
label: "Number of items", data: d1, color: "#FB0026"}
], {
xaxis: { show: true, axisLabel: "1hr", ticks: 6 },
yaxis: { show: true, axisLabel: "", ticks: 12, min: 0, tickDecimals: 0, position: 1 }
}
);
});
</script>
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
此处是一个示例，但它使用随机数生成而不是数据库下降.
Here is an example but it uses random number generation instead of a database dip.
推荐答案
有两种方法可以做到这一点
There are two ways you can do that
解决方案1
* 1. **如果您只想动态刷新页面的图表部分，请执行以下操作，
*1.*If you want to dynamically refresh only the chart part of your page then do the following,
1.1.创建一个php页面(例如chart-data.php)，该页面将从db中获取数据并按您的编码返回json.
1.1.create a php page (e.g. chart-data.php) which fetches data from db and returns json as you have coded.
只是为了使代码清晰可见
<?php
/*the code here has not been modified, it is used
as found from your example*/
$server = "myserver:1234";
$user="dbuser";
$password="userpass";
$database = "dbname";
$connection = mysql_connect($server,$user,$password);
$db = mysql_select_db($database,$connection);
$query = "SELECT X, Y FROM listener_incr";
$result = mysql_query($query);
$i = -60;
while($row = mysql_fetch_assoc($result))
{
$dataset1[] = array($i,$row['Y']);
$i++;
}
$final = json_encode($dataset1,JSON_NUMERIC_CHECK);
echo $final;
?>
1.2.在您的js代码中添加一个ajax请求，
1.2.add in your js code an ajax request,
/*it is not necessary to create a new document ready function, you can use the document ready function you already have in your example. Just place the setInterval code at the bottom of your document ready function*/
$(document).ready(function () {
setInterval(function(){
$.ajax({
dataType:'json', /*to avoid calling JSON.parse(data) in your callback function*/
url: '/chart-data.php',
success: function (data) {
console.log(data);//as mentioned in comments
//1.either call plot again
/*calling plot as seen in your code - start*/
var d1 = data;/* JSON.parse(data) */
$.plot($("#placeholder"), [{
label: "Number of items",
data: d1,
color: "#FB0026"
}], {
xaxis: {
show: true,
axisLabel: "1hr",
ticks: 6
},
yaxis: {
show: true,
axisLabel: "",
ticks: 12,
min: 0,
tickDecimals: 0,
position: 1
}
});
/*calling plot as seen in your code - end*/
/*
//2. or just redraw, as found in http://stackoverflow.com/questions/6024474/refresh-reload-flot-in-javascript
var newData = [[0,2],[1,3],[2,5]];
plot.setData(newData);
plot.setupGrid(); //only necessary if your new data will change the axes or grid
plot.draw();
*/
}//ajax props
});//ajax
},60000);//interval
});//document ready
解决方案2
* 2. **如果您是在渲染页面时从php填充js数据(如已经编码)，则需要每60秒钟从js或php刷新页面，例如
*2.*If you are populating the js data from php while rendering the page, as you have already coded, you need to refresh your page every 60s from js or php with something like,
JS
setInterval(function(){
window.location.reload(true);
},60000);
或
PHP
<meta http-equiv="refresh" content="60" >
这篇关于转换流量表，使其每隔60秒动态更新一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
