Draw a real-time flot chart by fetching data from database and store it into an array using JavaScri

Discussion in 'Javascript' started by Aroy, Sep 3, 2015.

  1. Aroy

    Aroy

    Joined:
    Sep 3, 2015
    Messages:
    1
    Likes Received:
    0
    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..
     

    Attached Files:

    Aroy, Sep 3, 2015
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.