Как получить данные на графике на основе выбранной даты (График фильтрации данных JS с указателем даты) - PullRequest
Новая
       19

Как получить данные на графике на основе выбранной даты (График фильтрации данных JS с указателем даты)

0 голосов
/ 14 апреля 2020

Я пытался получить все данные с указанной даты c, используя код, подобный следующему: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>Try Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>


<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">


<script>
$(document).ready(function(){
$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  $("#firstdatepicker").datepicker();
  $("#lastdatepicker").datepicker();
  $("#filter").click(function() {
    var from_date = $("#firstdatepicker").val();
    var to_date = $("#lastdatepicker").val();
    if (from_date != '' && to_date != '') {
      console.log(from_date, to_date);
      var endpoint = '/api/data';

  $.ajax({
    method: "GET",
    url: endpoint,
    data: {
      from_date: from_date,
      to_date: to_date
    },
    success: function(data){
      console.log(data); //get all data
      //get data by fields
      var hum = [], time = [];
      for (var i=0; i<data.length; i++){
        hum.push(data[i].moisture);
        time.push(data[i].timestamp);
     }
      console.log(hum);
      console.log(time);
    //plot the chart

      var ctx = document.getElementById("moistureChart").getContext('2d');
      var moistureChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: time,
              datasets: [{
                  label: 'kelembaban',
                  data: hum,
                  backgroundColor: [
                      'rgb(68, 145, 252)'
                  ],
                  borderColor: [
                  '#331698'
                  ],
                  borderCapStyle: 'round',
                  borderWidth: 1
              }]
          },
          options: {
              reponsive: true,
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true,
                          stepSize:10
                      },
                        scaleLabel: {
                        display:     true,
                        labelString: 'kelembaban'
                    }
                  }],
                  xAxes: [{
                          display: true,
                          ticks: {
                            min: from_date,
                            max: to_date,
                          },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Tanggal'
                    }
                  }]
              }
          }
      });
    },
    error: function(error_data){
      console.log(error_data)
    }
  });
} else {
  alert("Please Select Date");
}
  });    
});
</script>


</head>


<body>
<div class="container-fluid">
  <!--Breadcrumbs-->
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
    </li>
    <li class="breadcrumb-item active">Charts</li>
    <li style="margin-left: 10px">
    data from <input type="text" id="firstdatepicker" name="firstdatepicker" value="2020-03-14">
    to <input type="text" id="lastdatepicker" name="lastdatepicker" value="2020-03-15">
    <input type="button" name="filter" id="filter" value="Filter" class="btn btn-info">
  </li>
  </ol>
    <div class="row"> 
      <div class="col-sm-1"></div>
        <canvas id="moistureChart" width="722" height="400">
        </canvas>
        <div class="col-sm-1"></div>
    </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery.ui.datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<!--buat kalender-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/sunny/jquery-ui.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"></link>

</body>
</html>

данные получены из API, который я создал с использованием django rest framework, и работали локально (локальный). Данные выглядят так: 

[
{
    "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
},
{
    "id": 9,
    "timestamp": "2020-03-17T07:00:00+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": 10,
    "timestamp": "2020-03-18T07:00:00+07:00",
    "vibration": 3,
    "moisture": 77,
    "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
}
]

, когда я выбираю дату с 15 марта по 16 марта, диаграмма не отображает данные с 15 до 16 марта, но отображает все данные, которые у меня есть в API. Есть ли ошибка в моем коде? Я думаю, что-то отсутствует в моем коде. Можете ли вы помочь мне с кодом? Я хочу, чтобы график просто отображал данные с даты, которую я выбрал на DatePicker. Прошу прощения, я новичок ie программист

1 Ответ

1 голос
/ 14 апреля 2020

Работая с данными, основанными на времени, вы должны использовать временные диаграммы JS, чтобы вы могли устанавливать ограничения в XAxe. 

xAxes: [
        {
          type: "time",
          time: {
            minUnit: "minute",
            unit: "minute",
            unitStepSize: 4,
            min: moment(from_date).toDate(),//Date object type
            max: moment(to_date).toDate()//Date object type
          },
          ...
        }
      ],

Обратите внимание, что при использовании этого режима вам необходимо использовать данные следующим образом: 

{
    x: date,//Date object type
    y: value // Number
}

Обратите внимание, что ваши пределы во времени для объекта должны быть объектами даты. Я рекомендую использовать библиотеку momen js для манипулирования данными даты, так как она имеет много совместимости. Например, отметка времени ваших данных, полученных с сервера, несовместима с конструктором Date в Safari. но вы можете сделать что-то вроде 

moment(data.timestamp).toDate()
...