使用来自日期选择器的新数据在 PHP 中刷新 getJSON

Question

我有两个文件，index.php 和 showday.php。

index.php 应该在 canvasjs

的帮助下显示图表

canvasjs 的数据来自 showday.php，它运行 MySQL 查询以提取数据

当年、月和日变量在 showday.php 中具有硬编码值时，此处显示的文件确实显示了正确的图表，因此我知道这个概念有效。

我的问题是： - 如何加载 index.php 并将当前日期发送至 showday.php，以及 - 如何使用日期选择器

选择的新日期刷新$.getJSON

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

?>

Answer 1

创建函数：

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

通过传递对象作为第二个参数在 datepicker select, and $(document).ready(). Pass data through $.getJSON 上调用 updateChart()。

使用 $_GET['date'] 以 php（在您的 showday.php 中）访问 date。请参阅 this post 了解如何从提供的字符串中提取 year/date/month。

使用来自日期选择器的新数据在 PHP 中刷新 getJSON

Refresh getJSON in PHP with new data from datepicker

php

forms

jquery

datepicker

getjson