我已经做了一个代码来绘制一个图表,使用从数据库中的查询获得的数据。
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(内部服务器错误)
我希望有人能指导我怎么做。
提前谢谢。
暂无答案!
目前还没有任何答案,快来回答吧!