Untitled

<html>
        <head>
            <title>Test chart</title>
            <style>
                .chart-container {
                    width: 1440px;
                    height: 600px;
                }
            </style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
          $(function () {
            $('form').bind('submit', function () {
              $.ajax({
                type: 'post',
                url: 'data.php',
                data: $('form').serialize(),
                success: function () {

                }
              });
              return false;
            });
          });
        </script>
        </head>
        <body>

      <form  action="data.php"  method="POSt" >   From date
          <input type="text" class="buttom" name="from_date" /><br /> To date
             <input type="text" class="button" name="to_date" /><br />
          <input type="submit" class="button" name="submit" value="Submit"  />
        </form>


        <div class="chart-container">
                <canvas id="mycanvas"></canvas>
            </div
    <script>

    </script>
    }
    </script>
            <!-- javascript -->
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <script type="text/javascript" src="js/Chart.min.js"></script>
            <script type="text/javascript" src="js/app.js"></script>
        </body>
    </html>

<?php
//setting header to json
header('Content-Type: application/json');
if(isset($_POST['submit'])) {
$from_date= $_POST['from_date'];
$to_date =$_POST['to_date'];

//get connection
$conn = pg_connect("host= my host dbname= my dname user= my user password= my passwd");

if (!$conn) {
    echo "An error occurred.n";
    exit;
}

$result = pg_query($conn, "SELECT time_stamp::time, mydata FROM  mytable WHERE time_stamp::date between '$from_date' and  '$to_date'");
if (!$result) {
    echo "An error occurred.n";
    exit;
}

$arr = pg_fetch_all($result);
$data = array();
foreach ($arr as $row) {
    $data[] = $row;
}
$chartdata=json_encode($data);
echo  $chartdata;
}
?>

$(document).ready(function(){
    $.ajax({
        url: "/test/test.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var time  = [];
          var mydata = [];

            for(var i in data) {
                time.push(data[i].time_stamp);
            data.push(data[i].mydata);
            }

            var chartdata = {
                labels: time,
                datasets : [
                    {
                        label: 'mydata',
                        backgroundColor: 'rgba(163, 14, 44, 0.9)',
            pointRadius: 0,
            borderWidth: 1,
                        data: mydata
                    }
                ],

            };

            var ctx = $("#mycanvas");
            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
});