Главная » PHP » JavaScript - Отображение двух графиков на одной странице

JavaScript — Отображение двух графиков на одной странице

Я хочу построить два графика на одной странице разных дней. Но когда наступит третий день, он должен отображать график последних двух дней (означает, что график первого дня не будет отображаться, только день 2 и день 3), как процесс очереди. Я могу не могу понять, как я могу сдвигать график день за днем. У меня есть соединение с базой данных с оракулом 10g.
введите описание изображения здесь

После обновления базы данных она должна выглядеть примерно так:

введите описание изображения здесь

вот мой код =>

test.html

<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 &copy; 2007 - 2014
</div>
</body>
</html>

Пожалуйста помоги.

-1

Решение

С каждым новым днем ​​вы можете прятать или удалять контейнер-div вверху и вставлять новый контейнер-div внизу. Тогда вам нужно построить только один новый график.

Вот рабочая демка (играть на скрипке):

$(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);
});
0

Другие решения

Других решений пока нет …

Источник
По вопросам рекламы [email protected]
Web-Answers © 2024 Наверх