Line Chart with jQuery Date Picker | CanvasJS JavaScript Charts

Line Chart with jQuery Date Picker | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="update-nav">  
  <div id="date-selector" class="">
      From:<input type="text" id="fromDate"  class="ui-widget">
      To:<input type="text" id="toDate"  class="ui-widget">
  </div>
</div>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

#update-nav {
  width: 100%;
  height: 30px;
}
#range-selector {
  width: 50%;    
  float: left;
}
#date-selector {
  width: 50%;
  float: right;  
}

JavaScript

var dps = [];

var chart = new CanvasJS.Chart("chartContainer",
                               {
  title: {
    text: "Chart with Date Selector"
  },
  data: [
    {
      type: "line",
      dataPoints: randomData(new Date(2017, 0, 1), 400)
    }
  ]
});
chart.render();

var axisXMin = chart.axisX[0].get("minimum");
var axisXMax = chart.axisX[0].get("maximum");

function randomData(startX, numberOfY){
  var xValue, yValue = 0;
  for (var i = 0; i < 400; i += 1) {
    xValue = new Date(startX.getTime() + (i * 24 * 60 * 60 * 1000));
    yValue += (Math.random() * 10 - 5) << 0;

    dps.push({
      x: xValue,
      y: yValue
    });
  }
  return dps;
}

$( function() {
  $("#fromDate").val(CanvasJS.formatDate(axisXMin, "DD MMM YYYY"));
  $("#toDate").val(CanvasJS.formatDate(axisXMax, "DD MMM YYYY"));
  $("#fromDate").datepicker({dateFormat: "d M yy"});
  $("#toDate").datepicker({dateFormat: "d M yy"});
});

$("#date-selector").change( function() {
  var minValue = $( "#fromDate" ).val();
  var maxValue = $ ( "#toDate" ).val();

  if(new Date(minValue).getTime() < new Date(maxValue).getTime()){  
    chart.axisX[0].set("minimum", new Date(minValue));
    chart.axisX[0].set("maximum", new Date(maxValue));
  }  
});