javascript — отображение последних нескольких графиков с использованием переполнения стека
Я хочу получить последние 3 графика, используя обновление, где страница автоматически обновляется каждые 10 секунд. Здесь, в этом коде, когда страница обновляется автоматически, она начинает показываться с самого начала, но я не хочу этого делать. Когда страница обновляется каждый раз, когда она должна отображать последние 3 графика. Поскольку здесь доступно только 4 данных, он должен отображать только график от D2 до D4 даже после обновления. Когда будут доступны новые данные, будет отображаться график с D3 по D5 (который сейчас недоступен). Как я могу получить последние три графика после автоматического обновления страницы?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Refresh" Content="10">
<title>Graph</title>
<style>
div.placeholder{
width: 500px;
height:250px
}</style>
<?php
include("mydb.php");
// run query
$sql1 = "select * from tab where to_char(D,'dd/mm')='25-7'";
$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['D'])*1000) , (float)$row['D1']);
}
?>
<?php
include("mydb.php");
// run query
$sql2 = "select * from tab where to_char(D,'dd/mm')='26-7'";
$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['D'])*1000) , (float)$row['D1']);
}
?><?php
include("mydb.php");
// run query
$sql3 = "select * from tab where to_char(D,'dd/mm')='27-8'";
$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
$arr3[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?><?php
include("mydb.php");
// run query
$sql4 = "select * from dat where to_char(D,'dd/mm')='28-9'";
$stid4=oci_parse($conn, $sql4);
// set array
$arr4 = array();
if(!$stid4){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r4=oci_execute($stid4);
if(!$r4){
$e=oci_error($stid4);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid4,OCI_ASSOC)){
// add each row returned into an array
$arr4[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<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" src="excanvas.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="jquery.flot.time.min.js"></script>
<script type="text/javascript">
var interval=2000;
function getdata(){
var data1=<?php echo json_encode($arr1); ?>;
var data2=<?php echo json_encode($arr2); ?>;
var data3=<?php echo json_encode($arr3); ?>;
var data4=<?php echo json_encode($arr4); ?>;
return [data1,data2,data3,data4];
}
var options={
series: {
lines: {
show: true,
lineWidth: 2,
fill: true
},
points:{
show: "triangle"}
},
xaxis: {
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 () {
var dataset=[
{
label: "D1",
data: getdata()[0],
points: {
symbol: "triangle"}
},
{
label: "D2",
data: getdata()[1],
points: {
symbol: "circle"}
},
{
label: "D3",
data: getdata()[2],
points: {
symbol: "triangle"}
},
{
label: "D4",
data: getdata()[3],
points: {
symbol: "triangle"}
}
];
var counter=0;
for(var i=1,j=0;i<dataset.length,j<$('div.placeholder').length;i++,j++){
$.plot("div.placeholder:eq(" + j + ")", [dataset[j]], options);
counter=i;
}
function update() {
$('div.placeholder:visible:first').hide();
$('div.placeholder:last').after($('<div>').addClass('placeholder'));
$.plot("div.placeholder:last", [dataset[counter++]], options);
if(dataset.length > counter) {
setTimeout(update, interval);
}
}
setTimeout(update, interval);});
</script>
</head>
<body>
<center>
<h3><b><u>Chart</u></b></h3><div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</center>
</body>
</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …