Refresh getJSON in PHP with new data from datepicker

I have two files, index.php, and showday.php.

index.php is supposed to display a graph with help of canvasjs

The data for canvasjs comes from showday.php, which runs MySQL queries to extract data

The files shown here do show a proper graph when Year, Month, and Day variables have hard coded values in showday.php, therefore I know that the concept works.

My questions are: - How to load index.php with current date sent to showday.php, and - How to refresh $.getJSON with new date selected by the datepicker

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jqueryui/themes/sunny/jquery-ui.css">
    <link rel="stylesheet" href="jqueryui/style.css">
    <script src="jquery/jquery-3.1.0.js"></script>
    <script src="jqueryui/jquery-ui.js"></script>
    <script src="canvas/jquery.canvasjs.min.js"></script>
    <script>

    $( function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    } );


I guess that changedate function goes here with new date.
But how to put that date in the call to:
$.getJSON("showday.php", function (result) ???

Also, I would like that the page loads with current date,
and then a user can refresh the graph with a chosen date
with help of datepicker. How to do that?

    $(document).ready(function ()
        {

            $.getJSON("showday.php", function (result)
                {
                    var chart = new CanvasJS.Chart("chartContainer",
                        {
                            zoomEnabled: true,
                            axisY:{
                                title: "Power",
                                includeZero: false,
                                suffix : " kW",
                                },
                            axisX: {
                                title: "Time",
                                },
                            data: [
                                {
                                    type: "spline",
                                    lineColor: "#FFAA00",
                                    lineThickness: 2,
                                    markerColor: "#007700",
                                    dataPoints: result
                                }
                            ]
                        }
                    );
                    chart.render();
                }
            );
        }
    );

    </script>
</head>

<body>
<div id="chartContainer" style="width: 800px; height: 400px;"></div>
<form action="">
    Date: <input type="text" id="datepicker" onchange="changedate(this.value)">
</form>

</body>
</html>

showday.php

<?php

    $con = mysqli_connect('localhost', 'db', 'password', 'table');

// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $data_points = array();

**How the new date vlues coming from index.php can be plugged in here?**

    $query = "SELECT Hour, Minute, PAC as kW FROM `logdata` WHERE (Year=?) AND (Month=?) AND (Day=?)";
    $result = mysqli_query($con, $query);

    while($row = mysqli_fetch_array($result))
    {   
    $Time = $row['Hour'].":".$row['Minute'];
        $point = array("label" => $Time , "y" => $row['kW']);

        array_push($data_points, $point);        
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);

?>

Solution

Create a function:

function updateChart() {
    $.getJSON("showday.php", {date: $('#datepicker').datepicker('getDate')}, function (result)
            {
                var chart = new CanvasJS.Chart("chartContainer",
                    {
                        zoomEnabled: true,
                        axisY:{
                            title: "Power",
                            includeZero: false,
                            suffix : " kW",
                            },
                        axisX: {
                            title: "Time",
                            },
                        data: [
                            {
                                type: "spline",
                                lineColor: "#FFAA00",
                                lineThickness: 2,
                                markerColor: "#007700",
                                dataPoints: result
                            }
                        ]
                    }
                );
                chart.render();
            }
        );
}

Call updateChart() on datepicker select, and $(document).ready(). Pass data through $.getJSON by passing an object as the second parameter.

Access the date with php (In your showday.php) by using $_GET['date']. See this post on how to extract the year/date/month from the string provided.