Я попытался настроить пример песочницы, не используя запрос и имея JSON в качестве JS объекта в коде JS.
const JSONdata = [
{
"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
}
]
function dspChrt(hum, vibrate) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'Humidity',
data: hum, // json value received used in method
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'Vibration',
data: vibrate,
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
}
// Not sure how this is expected to work? Is the Data a Stream?
//var myVar = setInterval(loadChart, 60000); // updates chart every one minute
function loadChart(){
var data, hum = [], vibrate = [];
/*doing it with the JSON already in the JS for this example:
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);
*/
data = JSONdata;
for (var i=0; i<data.length;i++) {
hum.push(data[i].moisture);
vibrate.push(data[i].vibration);
}
/*
console.log('hum', hum);
console.log('vibrate', vibrate);
console.log('data', data);
*/
dspChrt(hum, vibrate);
/*doing it with the JSON already in the JS for this example:
}
}
request.open('GET', requestURL);
request.send(); // send the request
*/
}
loadChart();
<!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>
</head>
<body onload="loadChart()">
<div class="container">
<h2>Try Chart</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</body>
</html>
Самое важное - настроить переменные гула и вибрации как пустые массивы:
function loadChart(){
var data, hum = [], vibrate = [];
...
}
А затем - pu sh на них свойство влаги и вибрации каждого элемента (каждый элемент - это каждый объект в вашем массиве JSON):
for (var i=0; i<data.length;i++) {
hum.push(data[i].moisture);
vibrate.push(data[i].vibration);
}
К этому в конце for-l oop переменные:
hum = [70, 75, 75, 80]
vibrate = [3, 3, 3, 3]
Кроме того, у вас были функции, вызывающие друг друга, но ни одна из вызываемых функций.
Итак, вы должны иметь эту функцию с аргументами:
function dspChrt(hum, vibrate) {
var ctx = document.getElementById('myChart').getContext('2d');
...
}
И после этого не нужно снова вызывать другую функцию loadChart, поскольку значения уже переданы - они у нас уже есть
function loadChart(){
var data, hum = [], vibrate = [];
...
/*
console.log('hum', hum);
console.log('vibrate', vibrate);
console.log('data', data);
*/
dspChrt(hum, vibrate);
...
}
И обратите внимание, что эта функция не должна ничего возвращать, нам просто нужно для вызова dspChart(hum, vibrate)
И, наконец, нам нужно вызвать / вызвать нашу функцию loadChart(), чтобы это произошло, и создать диаграмму.
loadChart();
Наконец, вывод это (нажмите Показать фрагмент кода и затем запустите его):
И, наконец, код с происходящим XMLHttpRequest выглядит следующим образом, но он явно не будет работать при переполнении стека:
function dspChrt(hum, vibrate) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'Humidity',
data: hum, // json value received used in method
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'Vibration',
data: vibrate,
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
}
function loadChart(){
var data, hum = [], vibrate = [];
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);
//data = JSONdata;
for (var i=0; i<data.length;i++) {
hum.push(data[i].moisture);
vibrate.push(data[i].vibration);
}
/*
console.log('hum', hum);
console.log('vibrate', vibrate);
console.log('data', data);
*/
dspChrt(hum, vibrate);
}
}
request.open('GET', requestURL);
request.send(); // send the request
}
loadChart();
//var myVar = setInterval(loadChart, 60000); // updates chart every one minute
<!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>
</head>
<body onload="loadChart()">
<div class="container">
<h2>Try Chart</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</body>
</html>