0

I'm trying to draw a real-time update flot chart by retrieving data from oracle database and store it into an array

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>

the error i'm getting is that Object is no longer valid enter image description here

My dates are 25th feb 2015 00:14, 25th feb 2015 00:33, 25th feb 2015 00:53 but showing as follows

enter image description here

I want the x-axis as follows- enter image description here

how can i fix this and get x-axis as i wanted? please help

ARoy
  • 181
  • 3
  • 22
  • 1) Your plot call `$.plot($("#container"), dataset, options)` is missing brackets around `dataset`and a semikolon at the end. 2) Try `console.log(dataset)` before calling plot and see how the array looks. 3) Look in the `jquery.flot.js` file on the line given in the error message. Update your question with your findings if you need more help. – Raidri Sep 02 '15 at 09:28
  • And instead of `tickSize: [2, "second"]` use `minTickSize: [1, "hour"]` for the x axis. – Raidri Sep 02 '15 at 10:19
  • @Raidri thanks for your response. x-axis issue is solved. – ARoy Sep 02 '15 at 13:32
  • @Raidri i checked in jquery.flot.js file, if (f) {if (f.number && val != null) { val = +val; if (isNaN(val)) val = null; else if (val == Infinity) val = fakeInfinity; else if (val == -Infinity) val = -fakeInfinity; } , the error is showing at val=+val; //convert to number. – ARoy Sep 02 '15 at 13:41
  • @Raidri if i try to print **document.write(data[i++]);** i'm getting array as Wed Apr 01 09:27:00 UTC+0530 2015,20.1 Wed Apr 01 18:52:00 UTC+0530 2015,18.2 – ARoy Sep 02 '15 at 14:11
  • Seeing the structure of the data from a `console.log()` would be better, but the first thing to note is you need to use [timestamps](https://github.com/flot/flot/blob/master/API.md#time-series-data) when using flot in time mode. – Raidri Sep 02 '15 at 14:20
  • @Raidri how can i use timestamps in the time mode using flot? – ARoy Sep 02 '15 at 14:25
  • Look at the link in my comment. – Raidri Sep 02 '15 at 15:11
  • @Raidri while(!rs.eof){data.push([rs(0)*1000,rs(1)]); document.write(data[i++]); rs.movenext; } after multiplying by 1000, i'm getting output as 1424803440000000,15.7 1424804580000000,13.6,.......etc – ARoy Sep 02 '15 at 16:16
  • That should be ok if it has the right structure (one array per datapoint, dataseries and overall). – Raidri Sep 02 '15 at 16:19
  • @Raidri but i'm still getting same error.can't figure it out what is the problem – ARoy Sep 02 '15 at 16:36
  • @Raidri Object is no longer problem solved and got the chart but there is a problem with x-axis. I attached the images it's showing time 00:00:00 and date and month are also showing wrong. how can i fix it? – ARoy Sep 05 '15 at 17:37

0 Answers0