Отобразить данные на графике. js на основе даты с источником данных API - PullRequest
Новая
       4

Отобразить данные на графике. js на основе даты с источником данных API

0 голосов
/ 18 марта 2020

Еще один вопрос для javascript. Я новичок ie в javascript. У меня есть диаграмма, которая работает следующим образом: try chart image Я делаю это с использованием Django, а источник данных Django Rest Framework API, который работает на локальном хосте (URL: 127.0.0.1:8000/ API / данные). Это json данные из DRF 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);
    }                
    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>

Вопрос в том, что я хочу добавить фильтр диапазона выбора даты в выберите данные, которые я хочу видеть на моем графике, и укажите значения xAxes (Дата и время) в виде часов: минут. И, кстати, я использую XMLHttpRequest, а не ajax, чтобы получить данные из моего DRF API. Кто-нибудь знает, как добавить DatePicker на диаграмму с конечной точкой на основе API DRF, который у меня есть? Спасибо прежде!

...