Chart.js — как мне получить данные из MySQL для отображения в моей области диаграммы?
Я пытаюсь получить данные из моей базы данных MySQL, чтобы они отображались в диаграмме области chart.js, но я не знаю, с чего начать и как их туда получить. Надеетесь на помощь, чтобы начать здесь?
Я хочу получить приблизительно 600 точек данных на графике шириной 600 пикселей (нет необходимости видеть значение каждой точки данных, это просто для общего обзора трендов).
Точки данных — это показания температуры за последние 7 дней, и ниже графика мне бы хотелось иметь 1 метку для «mon» в точках данных понедельника, 1 метку для «tue» и так далее.
На данный момент это мой код, который возвращает данные в массив в php, а затем распечатывает диаграмму так, как она должна выглядеть, но с фиктивными данными и неправильными метками ниже:
<?php
// Connecting to MySQL
$con=mysqli_connect("localhost","user","pass","weather");
// Checking the connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// Fetching the data needed to show the dashboard
$temperature_result = mysqli_query($con,"SELECT TEMPERATURE FROM weather_data WHERE DATETIME > NOW() - INTERVAL 1 WEEK");
$temperature_array = mysqli_fetch_array($temperature_result);
// Closing the MySQL connection
mysqli_close($con);
?>
<html>
<head>
<script src="Chart.js"></script>
<style>
body {
background-color: #2e2f31;
color: #ffffff;
align: center;
}
</style>
</head>
<body>
<table width="600px">
<tr><td align="center" height"200px"> </td></tr>
<tr>
<td>
<canvas id="Temperature" width="600px" height="100px"></canvas>
<script>
var ctx = document.getElementById("Temperature");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "", "", "", "", "Something"],
datasets: [{
data: [12, 19, 3, 5, 2, 12, 12, 34, 21, 5, 10],
backgroundColor: [
'rgba(127, 123, 105, 1)'
],
borderColor: [
'rgba(241,224,148,1)'
],
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
ticks: {
beginAtZero:true
},
gridLines: {
display:false
}
}]
},
legend: {
display: false
},
tooltips: {
enabled: false
},
elements: { point: { radius: 0 } }
}
});
</script>
</td>
</tr>
</table>
</body>
</html>
График выглядит так: 
Любая помощь будет принята с благодарностью!
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …