我已经做了一个代码来绘制一个图表，使用从数据库中的查询获得的数据。
html格式：

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

PHP

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

AJAX ：

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

结果：

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

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

AJAX ：

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

PHP：

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

;
但我在控制台有一个错误：
得到http://35.177.140.48/view/ajax/php/data_filter.php?datefrom=2018-04-01&dateto=2018-04-26 500（内部服务器错误）
我希望有人能指导我怎么做。
提前谢谢。