|
|
|
realtime กราฟ + mysql คับ พอใส่ค่าใน msql แล้วค่าในกราฟไม่อัพเดตตามคับ แก้ยังไงดีคับ |
|
|
|
|
|
|
|
สวัสดีคับ คือผม อยากทำ real time กราฟ แบบเมื่อเราใส่ค่าลงไปในdatabase กราฟก็จะดึงค่าตัวล่าสุดออกมาเรื่อยๆคับ
โดยแกนy เป็นค่าที่ดึงมาจากกราฟ ส่วนแกนxเป็นค่าที่มาจากเวลาขณะดึงคับ
ปัญหาของผมคือ รันสคิปphpแล้ว แกนxแกนเวลาขยับได้คับ แต่ แกนy ที่เป็นแกนค่านั้นมันไม่ได้อัพเดตตามdatabase คับ ควรแก้ไขอย่างไรดีคับ
Code (PHP)
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="jsfile/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="jsfile/jquery.js"></script>
<script type="text/javascript" src="jsfile/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="jsfile/jquery.flot.categories.js"></script>
<script src="jsfile/jquery.min.js"></script>
<script src="jsfile/excanvas.min.js"></script>
<script src="jsfile/jquery.flot.min.js"></script>
<script type="text/javascript" src="jsfile/jquery.flot.axislabels.js"></script>
<script language="javascript" type="text/javascript" src="jsfile/jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="jsfile/jquery.flot.selection.js"></script>
<script type="text/javascript">
setInterval("my_function();",5000);
function my_function(){ $('#refresh').load(location.href + ' #time');}
</script>
<script type="text/javascript">
var data = [];
var dataset;
var totalPoints = 100;
var updateInterval = 1000;
var now = new Date().getTime();
function GetData() {
data.shift();
while (data.length < totalPoints) {
<?php
$tablename = "192.168.43.207";
$server = "localhost";
$user="root";
$password="1234";
$database = "thenest";
$connection = mysql_connect($server,$user,$password) or die ("Could not connect to server.".mysql_error());
$db = mysql_select_db($database,$connection) or die ("Could not select database.".mysql_error());
$query = "SELECT * FROM `$tablename` ORDER BY Datetime DESC LIMIT 0,1 ";
$result = mysql_query($query)or die(mysql_error());
$row = mysql_fetch_row($result);
$a1 = $row[0];
?>
var y = <?php echo $a1; ?>;
var temp = [now += updateInterval, y];
data.push(temp);
}
}
var options = {
series: {
shadowSize: 0
},
xaxis: {
mode: "time",
tickSize: [5, "second"],
tickFormatter: function (v, axis) {
var date = new Date(v);
if (date.getSeconds() % 10 == 0) {
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return hours + ":" + minutes + ":" + seconds;
} else {
return "";
}
},
axisLabel: "Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
min: 0,
max: 500,
tickFormatter: function (v, axis) {
if (v % 100 == 0) {
return v + "V";
} else {
return "";
}
},
axisLabel: "Voltage",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
}
};
$(document).ready(function () {
GetData();
dataset = [
{ data: data }
];
$.plot($("#flot-placeholder1"), dataset, options);
function update() {
GetData();
$.plot($("#flot-placeholder1"), dataset, options)
setTimeout(update, updateInterval);
}
update();
});
</script>
<!-- HTML -->
<div id="flot-placeholder1" style="width:888px;height:263px;margin:0 auto"></div>
ขอบคุณคับ
Tag : MySQL, HTML/CSS, JavaScript, jQuery
|
ประวัติการแก้ไข 2015-04-13 11:42:34
|
|
|
|
|
Date :
2015-04-13 11:41:29 |
By :
upgrade9909 |
View :
2598 |
Reply :
1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ต้องรู้จัก viewsource จาก browser มาดู HTML บ้างครับว่า มันมีหน้าตาอย่างไร
php generate html ได้ครั้งเดียว ต่อ การ request 1 ครั้ง ไม่อาจ generate ในลักษณะ loop ได้
viewsource ออกมาดูในส่วนของ function GetData() ว่าใน function มันมีหน้าตาอย่างไร
แล้วเปรียบเทียบกับ ไฟล์ .php ที่เขียน
จะได้เปลี่ยนวิธีคิดวิธีเขียนใหม่ สำหรับ Server และ Client
|
|
|
|
|
Date :
2015-04-14 12:06:35 |
By :
Chaidhanan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 02
|