Как сделать один DateFilter для нескольких графиков на одной веб-странице? - PullRequest
Новая
       44

Как сделать один DateFilter для нескольких графиков на одной веб-странице?

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

Может кто-нибудь помочь мне с кодом? Я новичок ie программист. Я делаю сеть для мониторинга чего-либо. Прямо сейчас мониторинг данных все еще является фиктивными данными. Данные по API http://66.42.52.94: 8000 / api / data / . Таким образом, существует так много данных датчиков (а именно: accelero_x, accelero_y, accelero_z, вибрация, влажность, gyro_x, gyro_y, gyro_z, смещение), которые я должен отобразить на графике. А этот - код для отображения диаграммы оси X датчика акселерометра.

код для js файла: 

$(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 accelero_x = [], time = [];
      for (var i=0; i<data.length; i++){
        accelero_x.push(data[i].accelero_x);
        time.push(data[i].timestamp);
     }
      console.log(accelero_x);
      console.log(time);
    //plot the chart

      var ctx = document.getElementById("acceleroxChart").getContext('2d');
      var acceleroxChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: time,
              datasets: [{
                  label: 'Accelero-x (mV/g)',
                  data: accelero_x,
                  fill: false,
                  borderColor: "#80b6f4",
                pointBorderColor: "#80b6f4",
                pointBackgroundColor: "#80b6f4",
                pointHoverBackgroundColor: "#80b6f4",
                pointHoverBorderColor: "#80b6f4",
                pointBorderWidth: 10,
                pointHoverRadius: 10,
                pointHoverBorderWidth: 1,
                pointRadius: 1,
                borderWidth: 4,
              }]
          },
          options: {
              reponsive: true,
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:false,
                          stepSize:0.5
                      },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Accelero sb.x (mV/g)'
                    }
                  }],
                  xAxes: [{

                          display: true,
                          type: "time",
                          time: {
                                minUnit: "hour",
                                unit: "hour",
                                unitStepSize: 6,
                                min: moment(from_date).toDate(),//Date object type
                                max: moment(to_date).toDate()//Date object type
                          },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Time'
                    }
                  }]
              }
          }
      });
    },
    error: function(error_data){
      console.log(error_data)
    }
  });
} else {
  alert("Please Select Date");
}
  });    
});

код для html: 

    {% extends 'base.html' %}
    {% load static %}


    {% block content %}

    <!-- Begin Page Content -->
    <div class="container-fluid">

      <!--card header-->
      <div class="card-header">
        <h6 class="m-0 font-weight-bold text-primary">Accelero X-axes</h6>

      <!--Breadcrumbs-->
      <ol class="breadcrumb">
          <li style="margin-left: 10px">
        data from <input type="text" id="firstdatepicker" name="firstdatepicker" value="2020-03-15">
        to <input type="text" id="lastdatepicker" name="lastdatepicker" value="2020-03-16">
        <input type="button" name="filter" id="filter" value="Filter" class="btn btn-info">
          </li>
      </ol>
  <!--End of breadcrumbs date picker-->

  <!--Kelembaban tanah Area Chart-->

  <div class="card-body">
      <div class="chart-area">
          <canvas id="acceleroxChart"></canvas>
      </div>
  </div> <!--end of area chart-->

      </div> <!--end of card header-->




    </div>
    <!--end of page content (container-fluid) -->

  </div>
  <!-- End of Main Content -->

</div>
<!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>


<!-- Page level chart.js yang digunakan halaman ini-->
<script src="{% static 'js/demo/accelero-x.js' %}"></script>
<!-- <script src="{% static 'js/demo/chart-pie-demo.js' %}"></script> -->

<!-- date picker js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.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>



{% endblock content %}

То есть оси X графика для времени и оси Y графика для данных датчиков. И данные могут быть отфильтрованы по датчику, который я выбрал следующим образом: Sensors Webpage

Эти коды отображают только диаграмму для осей акселерометров по осям X на одной веб-странице. Проблема в том, что я хочу отобразить все графики каждого датчика (так что к концу будет 9 графиков) на одной странице с одним датчиком для всех графиков. Может кто-нибудь помочь мне с кодом? Спасибо прежде.

1 Ответ

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

Я решил это! Для этого не нужно никакого специального кода. Просто позвоните в другие графики на html часть. Не нужно перебирать часть панировочных сухарей на html. 

<div class="card-body">
  <div class="chart-area">
      <canvas id="acceleroxChart"></canvas>
  </div>
</div> <!--end of area chart-->
<br>
<h2>Chart2</h2>
<br>
<div class="card-body">
  <div class="chart-area">
      <canvas id="theotherchartname"></canvas>
  </div>
</div>
.........and so on....

Вы можете использовать тот же структурный код, что и файл js выше для другого датчика диаграмм, просто измените необходимые данные.

...