PHP Date picker to create a chart - not working properly

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Gigi
Forum Newbie
Posts: 2
Joined: Sat Sep 09, 2017 10:30 am

PHP Date picker to create a chart - not working properly

Post 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
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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);

?>
Gigi
Forum Newbie
Posts: 2
Joined: Sat Sep 09, 2017 10:30 am

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

Post by Gigi »

That is not the issue, it was for testing purposes only.
If I remove the line, nothing changes.
Post Reply