Line Chart with Date Picker & Range Selector (Stock Chart) - CanvasJS JavaScript Charts

Line Chart with Date Picker & Range Selector (Stock Chart) - CanvasJS JavaScript Charts

by canvasjs

HTML

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

<div id="update-nav">
  <div id="range-selector">
    <input type="button" id="1m" class="period ui-button" value="1m" />
    <input type="button" id="3m" class="period ui-button" value="3m"/>
    <input type="button" id="6m" class="period ui-button" value="6m"/>
    <input type="button" id="1y" class="period ui-button" value="1y"/>
    <input type="button" id="all" class="period ui-button" value="All"/>
  </div>
  <div id="date-selector">
      From:<input type="text" id="fromDate" class="ui-widget">
      To:<input type="text" id="toDate" class="ui-widget">
  </div>
</div>
<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;  
}
input[type="text"] {
   width: 120px !important;         
}

JavaScript

var dps = [];

var chart = new CanvasJS.Chart("chartContainer", {
	exportEnabled: true,
  title: {
  	text: "Chart with Date Selector"
  },  
  data: [
		{
    	type: "line",
    	dataPoints: dps
    }
  ]
});

$.getJSON("https://api.npoint.io/8b14c70d7d3e0cd1c92d", function(chartData) {
	for(var i = 0; i < chartData.GetStockTimeSeriesResult.TimeSeriesItems.length; i++){  	
		var timeStamp = chartData.GetStockTimeSeriesResult.TimeSeriesItems[i].TimeStamp   
  	dps.push({ x: new Date(parseInt(timeStamp)), y: parseFloat(chartData.GetStockTimeSeriesResult.TimeSeriesItems[i].Price)});
  }
  chart.render();
    
  var axisXMin = chart.axisX[0].get("minimum");
  var axisXMax = chart.axisX[0].get("maximum");

  $( function() {
    $("#fromDate").val(CanvasJS.formatDate(axisXMin, "D MMM YYYY"));
    $("#toDate").val(CanvasJS.formatDate(axisXMax, "D 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));
    }  
  });

  $(".period").click(function() {
    var period = this.id;  
    var minValue;
    minValue = new Date(axisXMax);

    switch(period) {
      case "1m":
        minValue.setMonth(minValue.getMonth() - 1);
        break;
      case "3m":
        minValue.setMonth(minValue.getMonth() - 3);
        break;
      case "6m":
        minValue.setMonth(minValue.getMonth() - 6);
        break;
      case "1y":
        minValue.setYear(minValue.getFullYear() - 1);
        break;
      default:
        minValue = axisXMin;
    }

    chart.axisX[0].set("minimum", new Date(minValue));  
    chart.axisX[0].set("maximum", new Date(axisXMax));
  });
});