javascript - How to pass the url from the datepicker to Chartjs URL

Question

I need to pass the url from the datepicker to loadChart() var requestURL = 'http://127.0.0.1:8000/api/v1/rainfall/';

the date-picker have 2 urls. defaultUrl and url and everytime those urls been modified on the frontend. it automatically passes the url to the loadChart() url.

How can I do it? Thanks!

  <script>

  (function rfChart(rainfall, amount, timestamp) {
  amount = loadChart().amount;
  timestamp = loadChart().timestamp;

  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: timestamp,
      datasets: [{
        label: 'Rainfall Graph',
        data: amount,
        lineTension: 0,
        backgroundColor: 'transparent',
        borderColor: '#c9c5c5',
        borderWidth: 2,
        pointRadius: 1,

      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        display: false
      }
    }
  })
}());
</script>

<script>

var myVar = setInterval(loadChart, 60000); // updates chart every one minute

function loadChart() {
var rainfall, amount = [], timestamp = [];
var requestURL = 'http://127.0.0.1:8000/api/v1/rainfall/'; //URL of the JSON data
var request = new XMLHttpRequest(); // create http request

request.onreadystatechange = function() {
 if(request.readyState == 4 && request.status == 200) {
    rainfall = JSON.parse(request.responseText);
    for (var i=0; i<rainfall.length;i++) {
      amount.push(rainfall[i].amount);
      timestamp.push(rainfall[i].timestamp);
}
    console.log('amount', amount);
    console.log('timestamp', timestamp);
    console.log('rainfall', rainfall);
    return rainfall,amount,timestamp;
    rfChart(amount,timestamp);
}
}
request.open('GET', requestURL);
request.send(); // send the request
}
loadChart()
    </script>





    <script>
 var start = moment().subtract(29, 'days');
 var end = moment();
 let dateDates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD');
 let defaultUrl = `http://127.0.0.1/api/v1/rainfall/?date_range=${dateDates}`;
 updateValueForUrl(defaultUrl);
 $('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  }, function(start, end) {

    let st = start.format('YYYY-MM-DD');
    let ed = end.format('YYYY-MM-DD');
    let url = `http://127.0.0.1:8000/api/v1/rainfall/?start_date=${st}&end_date=${ed}`;
    updateValueForUrl(url);
  });

    </script>

question from:https://stackoverflow.com/questions/65924778/how-to-pass-the-url-from-the-datepicker-to-chartjs-url

Answer 1

Waitting for answers