Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js plugins/excanvas.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.axislabels.js"></script>
<script type="text/javascript">
var data=[];
var dataset;
var updateInterval = 1000;
function getdata(){
var con= new ActiveXObject('ADODB.Connection');
var connectionString="Provider= OraOLEDB.Oracle;User id=SYSTEM;Password=sandp;datasource=ORA";
con.Open(connectionString);
var rs=new ActiveXObject('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:"%m/%d %H:%M", ,
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>
<div id="container" style="width:1360px; height:1200px"></div>
</body>
</html>
I'm getting error= Object is no longer valid.
jquery.flot.js
code:0
line:1159
char :37
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
Hello ARoy,
The following link says that there are some compatibility issues with jquery:
http://codekea.com/3J1AZv5RaAMr/why-is-the-json-that-flot-expects-no-longer-valid-in-jsonlint-and-hence-jquery-14x.html
Furthermore a similar discussion can be found at the following url:
http://stackoverflow.com/questions/32345739/draw-a-real-time-flot-chart-by-fetching-data-from-database-and-store-it-into-an
Best Regards,
Darksu
Don't know if this can help you:
http://www.screencast.com/t/8nVT6FSda2
Have a demo module for i.e. realtime charts with Websocket
Asked: 2015-09-03 10:25:00 +0800
Seen: 44 times
Last updated: Jan 06 '16
