In Chart js how to get date selector

问题

How to get date picker in chart.js chart to get historical data with in the selected range of date from the client side.

If I give a query in the backend it gives a chart but if I give from client side i.e. from front end it doesn't send the chart. It replies with the JSON data for selected dates

回答1:

Chart.js has no plugin for a datetimepicker. I recommend you the eonasdan datetimepicker. For an interval two pickers are needed. After a succesful implementation of these you need a form for the userinputs (client side) to $_POST or $_GET inputs to your server side. You need to refer the used librarys in the header of your HTML-Doc.

HTML

(optional you can add some bootstrap-glyphicons):

<form id="dates" method="post">
  <div class="form-group">
    <div class='input-group date' id='startinterval'>
      <input id="start" type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
  <div class="form-group">
    <div class='input-group date' id='endinterval'>
      <input id="end" type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</form>

JavaScript create a new JS-file and use jQuery and EONASDAN

$( document ).ready(function() {
    $('#startinerval').datetimepicker({
          //specify your datetimepicker
    });
    $('#endinterval').datetimepicker({
          //specify your datetimepicker
    });  
});

I guess you query a database to get the chartdata. So you need to query your database in dependence to the userinputs of the datepickers. Afterwards, store the resulting data in an array and convert them to a JSON:

$data = array('xaxis' => $xaxis, 'yaxis' => $yaxis);
json_encode($data);

Keep in mind that this code is only an example and needed to embed in your own code!!!

Do you use Ajax for server/client communication?

来源：https://stackoverflow.com/questions/45912782/in-chart-js-how-to-get-date-selector

标签

charts