У меня есть API, который работает локально (localhost), используя django rest framework. Это JSON API выглядит следующим образом:
[
{
"id": 2,
"timestamp": "2020-03-15T11:46:10+07:00",
"vibration": 3,
"moisture": 70,
"gps_latitude": "-7.7713794",
"gps_longitude": "110.3753111",
"gyro_x": 6.58,
"gyro_y": 85.0,
"gyro_z": -3.9,
"accelero_x": 6.58,
"accelero_y": 85.0,
"accelero_z": -3.9,
"displacement": 10,
"node_id": 1
},
{
"id": 6,
"timestamp": "2020-03-15T12:00:10+07:00",
"vibration": 3,
"moisture": 75,
"gps_latitude": "-7.7713794",
"gps_longitude": "110.3753111",
"gyro_x": 6.58,
"gyro_y": 85.0,
"gyro_z": -3.9,
"accelero_x": 6.58,
"accelero_y": 85.0,
"accelero_z": -3.9,
"displacement": 10,
"node_id": 1
},
{
"id": 7,
"timestamp": "2020-03-15T13:00:10+07:00",
"vibration": 3,
"moisture": 75,
"gps_latitude": "-7.7713794",
"gps_longitude": "110.3753111",
"gyro_x": 6.58,
"gyro_y": 85.0,
"gyro_z": -3.9,
"accelero_x": 6.58,
"accelero_y": 85.0,
"accelero_z": -3.9,
"displacement": 10,
"node_id": 1
},
{
"id": 8,
"timestamp": "2020-03-16T07:00:00+07:00",
"vibration": 3,
"moisture": 80,
"gps_latitude": "-7.7713794",
"gps_longitude": "110.3753111",
"gyro_x": 6.58,
"gyro_y": 85.0,
"gyro_z": -3.9,
"accelero_x": 6.58,
"accelero_y": 85.0,
"accelero_z": -3.9,
"displacement": 10,
"node_id": 1
}
]
Я хочу отобразить данные (влажность) в линейном графике, поэтому я делаю код следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Try Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
function dspChrt(hum, time) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'Humidity',
data: hum, // json value received used in method
backgroundColor: ["rgba(153,255,51,0.4)"],
borderColor: ["#808080"],
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
suggestedMin : 0,
suggestedMax : 100,
stepSize: 10,
},
scaleLabel: {
display: true,
labelString: 'Humidity (%)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Date Time'
}
}]
}
}
});
}
</script>
<script>
var myVar = setInterval(loadChart, 60000); // updates chart every one minute
function loadChart()
{
var data, hum = [], time = [];
var requestURL = 'http://127.0.0.1:8000/api/data'; //URL of the JSON data
var request = new XMLHttpRequest({mozSystem: true}); // create http request
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
data = JSON.parse(request.responseText);
for (var i=0; i<data.length;i++) {
hum.push(data[i].moisture);
time.push(data[i].timestamp);
}
console.log(hum);
console.log(time);
console.log(data);
dspChrt(hum, time);
}
}
request.open('GET', requestURL);
request.send(); // send the request
}
loadChart();
</script>
</head>
<body onload="loadChart()">
<div class="container">
<h2>Try Chart</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</body>
</html>
Диаграмма выглядит следующим образом: 
Я хочу добавить средство выбора даты, чтобы можно было выбирать данные от одной даты до другой выбранной даты. Как добавить указатель даты в код? Кто-нибудь может помочь мне с кодом? Извините, я новичок ie программист. Тогда до