Search code examples
javascriptphporacle10gflot

Display two graphs on a same page

I want to plot two graphs in a same page of different days.But when 3rd day comes it should display last two days graph(means day one graph won't be displayed, only day 2 and day 3) like queue process.I can't able to figure it out how can i shift a graph day-wise.I have a database connection with oracle 10g.
enter image description here

After updating database it should look like as below -

enter image description here

here is my code=>

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>

Please help.

Solution

  • With every new day you could hide or remove the container-div at the top and insert a new container-div at the bottom. Then you only have to plot one new chart.

    Here a working demo (fiddle):

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