Page 1 of 1

PHP Date picker to create a chart - not working properly

Posted: Sat Sep 09, 2017 10:46 am
by Gigi
Hello everyone,

I created a chart by extracting values from database.
However, I need to add a date picker interval, so I can select the time range of extracted data.
I can select the start and end date from Calendar, but after pushing the button, the data is not filtered.
It extracts all the existing values in the table.
My code consists of 2 files:
data.php is used to get the data from database.
graph.php passes the data above to CanvasJS script, which renders the graph.

I really appreciate your help on solving this.
Thank you!

data.php

Code: Select all

<?php

header('Content-Type: application/json');
$conn = mysqli_connect("localhost", "root", "", "graphs");

if (mysqli_connect_errno($conn))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $timestamp_at = "";
    $timestamp_at_to_date = "";

    $queryCondition = "";
    if(!empty($_POST["search"]["timestamp_at"])) {
            $timestamp_at = $_POST["search"]["timestamp_at"];
            list($fiy,$fim,$fid) = explode("-",$timestamp_at);

            $timestamp_at_todate = date('Y-m-d');
            if(!empty($_POST["search"]["timestamp_at_to_date"])) {
                    $timestamp_at_to_date = $_POST["search"]["timestamp_at_to_date"];
                    list($tiy,$tim,$tid) = explode("-",$_POST["search"]["timestamp_at_to_date"]);
                    $timestamp_at_todate = "$tiy-$tim-$tid";
            }

            $queryCondition .= "WHERE time BETWEEN '$fiy-$fim-$fid' AND '" . $timestamp_at_todate . "'";
    }

    $sql = "SELECT time, value1 from chart_data " . $queryCondition . " ORDER BY 1 asc";
    $sql = "select timestamp, value1  from data_table";
    $data_points = array();
    
    $result = mysqli_query($conn, "$sql");
    
    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['timestamp'] , "y" => $row['value1']);
        
        array_push($data_points, $point);        
    }
    
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($conn);

?>
graph.php:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script type="text/javascript">
        $(document).ready(function () {

            $.getJSON("data.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
            });
        });
    </script>
</head>
<body>

<div class="graph-display">
<h2>Graph with trend evolution:</h2>
  <form name="DatePicker" method="post" action="">
         <p class="search_input">
            <input type="text" placeholder="From Date" id="timestamp_at" name="search[timestamp_at]"  value="<?php echo $timestamp_at; ?>" class="input-control" />
            <input type="text" placeholder="To Date" id="timestamp_at_to_date" name="search[timestamp_at_to_date]" style="margin-left:10px"  value="<?php echo $timestamp_at_to_date; ?>" class="input-control"  />                    
            <input type="submit" name="go" value="Search" >
        </p>
    <div id="chartContainer" style="width: 800px; height: 380px;"></div>
  </form>
</div>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$.datepicker.setDefaults({
showOn: "button",
buttonImage: "datepicker.png",
buttonText: "Date Picker",
buttonImageOnly: true,
dateFormat: 'yy-mm-dd'  
});
$(function() {
$("#timestamp_at").datepicker();
$("#timestamp_at_to_date").datepicker();
});
</script>

</body>
</html>
Image

Re: PHP Date picker to create a chart - not working properly

Posted: Sat Sep 09, 2017 12:12 pm
by Celauran
Gigi wrote:I can select the start and end date from Calendar, but after pushing the button, the data is not filtered.
It extracts all the existing values in the table.
Gigi wrote: data.php

Code: Select all

<?php

header('Content-Type: application/json');
$conn = mysqli_connect("localhost", "root", "", "graphs");

if (mysqli_connect_errno($conn))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $timestamp_at = "";
    $timestamp_at_to_date = "";

    $queryCondition = "";
    if(!empty($_POST["search"]["timestamp_at"])) {
            $timestamp_at = $_POST["search"]["timestamp_at"];
            list($fiy,$fim,$fid) = explode("-",$timestamp_at);

            $timestamp_at_todate = date('Y-m-d');
            if(!empty($_POST["search"]["timestamp_at_to_date"])) {
                    $timestamp_at_to_date = $_POST["search"]["timestamp_at_to_date"];
                    list($tiy,$tim,$tid) = explode("-",$_POST["search"]["timestamp_at_to_date"]);
                    $timestamp_at_todate = "$tiy-$tim-$tid";
            }

            $queryCondition .= "WHERE time BETWEEN '$fiy-$fim-$fid' AND '" . $timestamp_at_todate . "'";
    }

    $sql = "SELECT time, value1 from chart_data " . $queryCondition . " ORDER BY 1 asc";
    /** You're overwriting the above query with this one, always returning everything in the table **/
    $sql = "select timestamp, value1  from data_table";
    $data_points = array();
    
    $result = mysqli_query($conn, "$sql");
    
    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['timestamp'] , "y" => $row['value1']);
        
        array_push($data_points, $point);        
    }
    
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($conn);

?>

Re: PHP Date picker to create a chart - not working properly

Posted: Sat Sep 09, 2017 1:16 pm
by Gigi
That is not the issue, it was for testing purposes only.
If I remove the line, nothing changes.