I'm trying to draw a real-time update flot chart by retrieving data from oracle database and store it into an array and display the chart. Here is my code==>
<html><head><metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"><title>Untitled Document</title><scripttype="text/javascript"src="jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js plugins/excanvas.js"></script><scripttype="text/javascript"src="js plugins/jquery.flot.js"></script><scripttype="text/javascript"src="js plugins/jquery.flot.time.min.js"></script><scripttype="text/javascript"src="js plugins/jquery.flot.axislabels.js"></script>
<scripttype="text/javascript">var data=[];var dataset;var updateInterval =1000;function getdata(){var con=newActiveXObject('ADODB.Connection');var connectionString="Provider= OraOLEDB.Oracle;User id=SYSTEM;Password=xxxx;datasource=ORA";
con.Open(connectionString);
var rs=newActiveXObject('ADODB.Recordset');
rs.Open("select W_DATE,DATA from cet", con);var i=0;while(!rs.eof){
data.push([rs(0)*1000,rs(1)]);
data[i++];
rs.movenext;}
rs.close;
con.close;}
var options={
series:{
lines:{
show:true,
lineWidth:1.2,
fill:true
}
},
xaxis:{
mode:"time",
tickSize:[2,"second"],
timeformat:"%0m/%0d %0H:%0M",,
axisLabel:"Time",
axisLabelUseCanvas:true,
axisLabelFontSizePixels:12,
axisLabelFontFamily:'Verdana, Arial',
axisLabelPadding:10
},
yaxis:{
min:0,
max:100,
tickSize:5,
tickFormatter:function(v, axis){
if(v %10==0){
return v;
}else{
return"";
}
},
axisLabel:"Data loading",
axisLabelUseCanvas:true,
axisLabelFontSizePixels:12,
axisLabelFontFamily:'Verdana, Arial',
axisLabelPadding:6
},
legend:{
labelBoxBorderColor:"#fff"
},
grid:{
backgroundColor:{
colors:["#B0D5FF","#5CA8FF"]}}};
$(document).ready(function(){
getdata();
dataset =[
{ label:"Data", data: data }
];
$.plot($("#container"), dataset, options);
function update(){
data.shift();
getdata();
$.plot($("#container"), dataset, options)
setTimeout(update, updateInterval);
}
update();});</script></head>
<body><divid="container"style="width:1360px;height:1200px"></div></body></html>
But i'm getting an error that is Object is no longer valid
here is my data in the database=
w_date data
1/4/2015 9:27 20.1
1/4/2015 18:52 18.2
2/4/2015 19:00 18.3
2/4/2015 21:25 15.1
how can i fix this error? Please help..
<html><head><metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"><title>Untitled Document</title><scripttype="text/javascript"src="jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js plugins/excanvas.js"></script><scripttype="text/javascript"src="js plugins/jquery.flot.js"></script><scripttype="text/javascript"src="js plugins/jquery.flot.time.min.js"></script><scripttype="text/javascript"src="js plugins/jquery.flot.axislabels.js"></script>
<scripttype="text/javascript">var data=[];var dataset;var updateInterval =1000;function getdata(){var con=newActiveXObject('ADODB.Connection');var connectionString="Provider= OraOLEDB.Oracle;User id=SYSTEM;Password=xxxx;datasource=ORA";
con.Open(connectionString);
var rs=newActiveXObject('ADODB.Recordset');
rs.Open("select W_DATE,DATA from cet", con);var i=0;while(!rs.eof){
data.push([rs(0)*1000,rs(1)]);
data[i++];
rs.movenext;}
rs.close;
con.close;}
var options={
series:{
lines:{
show:true,
lineWidth:1.2,
fill:true
}
},
xaxis:{
mode:"time",
tickSize:[2,"second"],
timeformat:"%0m/%0d %0H:%0M",,
axisLabel:"Time",
axisLabelUseCanvas:true,
axisLabelFontSizePixels:12,
axisLabelFontFamily:'Verdana, Arial',
axisLabelPadding:10
},
yaxis:{
min:0,
max:100,
tickSize:5,
tickFormatter:function(v, axis){
if(v %10==0){
return v;
}else{
return"";
}
},
axisLabel:"Data loading",
axisLabelUseCanvas:true,
axisLabelFontSizePixels:12,
axisLabelFontFamily:'Verdana, Arial',
axisLabelPadding:6
},
legend:{
labelBoxBorderColor:"#fff"
},
grid:{
backgroundColor:{
colors:["#B0D5FF","#5CA8FF"]}}};
$(document).ready(function(){
getdata();
dataset =[
{ label:"Data", data: data }
];
$.plot($("#container"), dataset, options);
function update(){
data.shift();
getdata();
$.plot($("#container"), dataset, options)
setTimeout(update, updateInterval);
}
update();});</script></head>
<body><divid="container"style="width:1360px;height:1200px"></div></body></html>
But i'm getting an error that is Object is no longer valid
here is my data in the database=
w_date data
1/4/2015 9:27 20.1
1/4/2015 18:52 18.2
2/4/2015 19:00 18.3
2/4/2015 21:25 15.1
how can i fix this error? Please help..
