使用ajax和PHP从输入数据中过滤动态图形

我已经编写了使用从数据库中的查询中获得的数据绘制图形的代码

HTML:

<div>
  <canvas id="mycanvas" height="150"></canvas>
</div>

结果:

我需要做的是添加2个输入，让用户选择两个日期并显示特定范围。我试图通过ajax将输入值传递给PHP脚本以更改查询，但没有成功

我也试过： HTML:

)

但我在控制台上有一个错误y：

获取500（内部服务器错误）

我希望有人能指导我怎么做

---

提前感谢。

我们无法修复您代码中的损坏部分，因为您尚未发布它。如果您不提供您的php编码尝试，您的问题很可能会因为过于宽泛而结束。StackOverflow不是免费的编码服务。请提供一个更好的错误描述，500错误没有很好地隔离。错误日志中有什么内容？另外，我不知道

$ClientID

有多可靠，但在查询中使用它之前，可能至少将该值转换为

（int）

。（我建议在查询中使用用户提供的或不可信的数据时使用预先准备好的语句。

$result = $mysqli->query("SELECT COUNT(social_id) as total, DATE_FORMAT(login_at, '%d-%m') as datee
FROM social_users_connections
WHERE login_at < DATE_ADD(NOW(), INTERVAL +1 MONTH)
AND client_id = $clientID
GROUP BY datee
ORDER BY login_at");

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}


//free memory associated with result
$result->close();

//close connection
$mysqli->close();
// print_r($data);
//now print the data
print json_encode($data);

$(document).ready(function () {
    Chart.defaults.scale.ticks.beginAtZero = true;
    $.ajax({
        url: "view/ajax/php/data.php",
        method: "GET",
        success: function (data) {
            console.log(data);
            var player = [];
            var score = [];

            for (var i in data) {
                player.push(data[i].total);
                score.push(data[i].datee);
            }

            var chartdata = {
                labels: score,
                datasets: [{
                    label: 'Client Connections',
                    backgroundColor: 'rgba(0, 158, 251, 0)',
                    borderColor: 'rgba(0, 158, 251, 1)',
                    hoverBackgroundColor: 'rgba(0, 158, 251, 0)',
                    hoverBorderColor: 'rgba(0, 158, 251, 1)',
                    data: player
                }]

            };

            var chartOptions = {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        boxWidth: 80,
                        fontColor: 'black'
                    }
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false,
                            color: "black"
                        },
                        scaleLabel: {
                            display: true,
                            labelString: "Fecha"
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            color: "black",
                            borderDash: [2, 5]
                        },
                        scaleLabel: {
                            display: true,
                            labelString: "Número de conexiones"
                        },
                        ticks: {
                            stepSize: 5
                        }
                    }]
                }
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata,
                options: chartOptions
            });
        },
        error: function (data) {
            console.log(data);
        }
    });
});

<input class="text-center" name="filter_date_from" type="date" id="filter_date_from" placeholder="fecha">
                <input class="text-center" name="filter_date_to" type="date" id="filter_date_to" placeholder="fecha">
                <button class="btn btn-primary" onclick="filterGraph()">Filtrar</button>

<script>
    function filterGraph() {
        var datefrom = document.getElementById('filter_date_from').value;
        var dateto = document.getElementById('filter_date_to').value;
        Chart.defaults.scale.ticks.beginAtZero = true;
        $.ajax({
            url: "view/ajax/php/data_filter.php",
            method: "GET",
            data: {
                datefrom :  datefrom,
                dateto : dateto
            },
            success: function (data) {
                console.log(data);
                var player = [];
                var score = [];

                for (var i in data) {
                    player.push(data[i].total);
                    score.push(data[i].datee);
                }

                var chartdata = {
                    labels: score,
                    datasets: [{
                        label: 'Client Connections',
                        backgroundColor: 'rgba(0, 158, 251, 0)',
                        borderColor: 'rgba(0, 158, 251, 1)',
                        hoverBackgroundColor: 'rgba(0, 158, 251, 0)',
                        hoverBorderColor: 'rgba(0, 158, 251, 1)',
                        data: player
                    }]

                };

                var chartOptions = {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            boxWidth: 80,
                            fontColor: 'black'
                        }
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false,
                                color: "black"
                            },
                            scaleLabel: {
                                display: true,
                                labelString: "Fecha"
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                color: "black",
                                borderDash: [2, 5]
                            },
                            scaleLabel: {
                                display: true,
                                labelString: "Número de conexiones"
                            },
                            ticks: {
                                stepSize: 5
                            }
                        }]
                    }
                };

                var ctx = $("#mycanvas");

                var barGraph = new Chart(ctx, {
                    type: 'line',
                    data: chartdata,
                    options: chartOptions
                });
            },
            error: function (data) {
                console.log(data);
            }
        });

    }
</script>

$date_from = $_POST['datefrom'];
$date_to = $_POST['dateto'];
$from = date('d-m', $date_from);
$to = date('d-m', $date_to);


$result = $mysqli->query("SELECT COUNT(social_id) as total, DATE_FORMAT(login_at, '%d-%m') as datee
FROM social_users_connections
WHERE DATE_FORMAT(login_at, '%d-%m') BETWEEN '$from' AND '$to'
AND client_id = '$clientID'
GROUP BY datee
ORDER BY login_at");
echo $result;
//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}


//free memory associated with result
$result->close();

//close connection
$mysqli->close();
// print_r($data);
//now print the data
print json_encode($data)