Javascript 在同一页上显示两个图形
我想在不同日期的同一页面上绘制两个图。但第三天到来时，它应该显示最后两天的图（意味着第一天的图不会显示，只显示第二天和第三天），就像队列过程一样。我想不出如何逐日移动图。我与oracle 10g有数据库连接。Javascript 在同一页上显示两个图形,javascript,php,oracle10g,flot,Javascript,Php,Oracle10g,Flot,我想在不同日期的同一页面上绘制两个图。但第三天到来时，它应该显示最后两天的图（意味着第一天的图不会显示，只显示第二天和第三天），就像队列过程一样。我想不出如何逐日移动图。我与oracle 10g有数据库连接。 更新数据库后，它应该如下所示- 这是我的代码=> test.html 实时图形 每过一天，您都可以隐藏或删除顶部的container div，并在底部插入一个新container div。那么你只需要画一张新的图表 这里有一个工作演示（）： $（函数（）{ 函数getNewData（
更新数据库后，它应该如下所示- 这是我的代码=> test.html
实时图形
每过一天，您都可以隐藏或删除顶部的container div，并在底部插入一个新container div。那么你只需要画一张新的图表
这里有一个工作演示（）：
$（函数（）{
函数getNewData（）{
var-temp=[]；
对于（var i=0；对于改进此问题和未来的问题，我表示感谢。当我尝试两个以上的图形时，它只显示一个图形。$（function（）{function getNewData（）{var temp=[]；对于（var i=0；i没有用于：second
的伪选择器，因此您的代码在第一个图表之后崩溃。请参阅此以获取更多图表的示例。图表的数量由HTML中容器div的数量设置，JavaScript是灵活的。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Real Time Graph</title>
<?php
include("mydb.php");
// run query
$sql1 = "select to_char(WORKDATE,'dd-Mon-yyyy HH24:MI:SS') as WD,DATA from dat where to_char(WORKDATE,'dd/mm')='25/02'";
$stid1=oci_parse($conn, $sql1);
// set array
$arr1 = array();
if(!$stid1){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r1=oci_execute($stid1);
if(!$r1){
$e=oci_error($stid1);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid1,OCI_ASSOC)){
// add each row returned into an array
$arr1[] = array((strtotime($row['WD'])*1000) , (float)$row['DATA']);
}
//oci_free_statement($stid);
//oci_close($conn);
?>
<?php
include("mydb.php");
// run query
$sql2 = "select to_char(WORKDATE,'dd-Mon-yyyy HH24:MI:SS') as WD,DATA from dat where to_char(WORKDATE,'dd/mm')='26/02'";
$stid2=oci_parse($conn, $sql2);
// set array
$arr2 = array();
if(!$stid1){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r2=oci_execute($stid2);
if(!$r2){
$e=oci_error($stid2);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid2,OCI_ASSOC)){
// add each row returned into an array
$arr2[] = array((strtotime($row['WD'])*1000) , (float)$row['DATA']);
}
//oci_free_statement($stid);
//oci_close($conn);
?>
<?php
include("mydb.php");
// run query
$sql3 = "select to_char(WORKDATE,'dd-Mon-yyyy HH24:MI:SS') as WD,DATA from dat where to_char(WORKDATE,'dd/mm')='27/02'";
$stid3=oci_parse($conn, $sql3);
// set array
$arr3 = array();
if(!$stid3){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r3=oci_execute($stid3);
if(!$r3){
$e=oci_error($stid3);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid3,OCI_ASSOC)){
// add each row returned into an array
// $arr=array_slice($arr,1,50);
$arr3[] = array((strtotime($row['WD'])*1000) , (float)$row['DATA']);
}
//oci_free_statement($stid);
//oci_close($conn);
?>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
//$(document).ready(function(){
var updateinterval=5000;
var data1=[];
var data2=[];
var data3=[];
var data4=[];
function getdata(){
//data.shift();
data1=<?php echo json_encode($arr1); ?>;
data2=<?php echo json_encode($arr2); ?>;
data3=<?php echo json_encode($arr3); ?>;
data4=<?php echo json_encode($arr4); ?>;
}
var options={
series: {
lines: {
show: true,
lineWidth: 3,
fill: true,
radius: 5
},
points:{
show: "triangle"
}
},
xaxis: {
mode: "time",
TickSize: [20, "seconds"],
tickFormatter:function (v, axis) {
var date = new Date(v);
if (date.getSeconds() % 20 == 0) {
var dates=date.getDate() <4 ? "0" +date.getDate() : date.getDate();
var months=date.getMonth()< 10 ? "0" +(date.getMonth()+1) :date.getMonth();
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 dates+ "/"+ months +" "+hours + ":" + minutes + ":" + seconds;
}
else {
return "";
}
},
axisLabel: "Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
axisLabel: "Data loading",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
labelBoxBorderColor: "#B0D5FF"
},
grid: {
hoverable: true,
clickable: true,
backgroundColor: {
colors: ["#B0D5FF", "#5CA8FF"]
}
}
};
$(document).ready(function () {
getdata();
var dataset1=[
{
label: "Day1",
data: data1,
points: {
symbol: "triangle"
}
}
];
var dataset2=[
{
label: "Day2",
data: data2,
points: {
symbol: "cross"
}
}
];
var dataset3=[
{
label: "Day3",
data: data3,
points: {
symbol: "square"
}
}
];
var dataset4=[
{
label: "Day4",
data: data4,
points: {
symbol: "diamond"
}
}
];
$.plot($("#flot-container"), [dataset1], options);
$.plot($("#flot-container1"), [dataset2], options);
$.plot($("#flot-container2"), [dataset3], options);
$.plot($("#flot-container3"), [dataset4], options);
$.plot($("#flot-container4"), [dataset5], options);
function update() {
$.plot($("#flot-container"), dataset1, options);
$.plot($("#flot-container1"), dataset2, options);
$.plot($("#flot-container2"), dataset3, options);
$.plot($("#flot-container3"), dataset4, options);
$.plot($("#flot-container4"), dataset5, options);
// setTimeout(update, updateinterval);
setInterval(update, updateinterval);
}
update();
});
</script>
</head>
<body>
<center>
<h3><b><u>Real-Time Chart</u></b></h3>
<h2>DAY 1</h2>
<div id="flot-container" aligh="right-side" style="width:840px;height:280px;"></div>
<h2>DAY 2 </h2>
<div id="flot-container1" style="width:840px;height:280px;"></div>
<h2>DAY 3 </h2>
<div id="flot-container2" style="width:990px;height:280px;"></div>
</center>
<div id="footer">
Copyright © 2007 - 2014
</div>
</body>
</html>
$(function() {
function getNewData() {
var temp = [];
for (var i = 0; i <= 10; i++) {
temp.push([i, Math.random()]);
}
return temp;
}
$.plot("div.placeholder:first", [getNewData()]);
$.plot("div.placeholder:last", [getNewData()]);
function newChart() {
$('div.placeholder:visible:first').hide();
$('div.placeholder:last').after($('<div>').addClass('placeholder'));
$.plot("div.placeholder:last", [getNewData()]);
}
$('#btn').on('click', newChart);
});