candleStick and column Chart with Date Slector & Range Selector (Stock Chart) - CanvasJS JavaScript Charts

candleStick and column Chart with Date Slector & Range Selector (Stock Chart) - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<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">
<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" class="">
      From:<input type="text" id="fromDate" class="ui-widget">
      To:<input type="text" id="toDate" class="ui-widget">
  </div>
</div>
<br/>
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
<div id="chartContainer2" style="height: 100px; width: 100%;"></div>
<div id="chartContainer3" style="height: 100px; 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;         
}
.canvasjs-chart-toolbar{
  display: none;
}

JavaScript

var dps = randomData(new Date(2017, 0, 1), 365);
var dps2 = []

for(var i = 0; i < dps.length; i++) {
  var x = dps[i].x;
  var y = dps[i].y[0];
  dps2.push({x: x, y: y})
}

var chart1 = new CanvasJS.Chart("chartContainer1", {
	exportEnabled: true,
  axisX: [{
  	gridThickness: 0,
    lineThickness: 0,
    tickThickness: 0,
    labelFormatter: function(){
    	return " "
    }
  }],
  axisY: [{
  	//gridThickness: 0,
    lineThickness: 0,
    tickThickness: 0,
    labelFormatter: function(){
    	return " "
    },
  }],
  title: {
  	text: "Chart with Date Selector"
  },  
  data: [
		{
    	type: "candlestick",
    	dataPoints: dps
    }
  ]
});

var chart2 = new CanvasJS.Chart("chartContainer2",
{  
	axisX: [{
  	gridThickness: 0,
    lineThickness: 0,
    tickThickness: 0,
    labelFormatter: function(){
    	return " "
    }
  }],
  axisY: [{
  	//gridThickness: 0,
    lineThickness: 0,
    tickThickness: 0,
    labelFormatter: function(){
    	return " "
    },
  }],
	data: [
	{
		type: "column",
		dataPoints: dps2
	}					
	]
});



var chart3 = new CanvasJS.Chart("chartContainer3", {
  zoomEnabled: true,
  toolTip: {
  	enabled: false    
  },  
  rangeChanged: rangeChanged, 
	axisX: {
  	gridThickness: 0,
    lineThickness: 0,
    tickThickness: 0
  },
  axisY: {
  	gridThickness: 0,
    lineThickness: 0,
    tickThickness: 0,
    labelFormatter: function(){
    	return " "
    },
  },
	data: [{
		type: "candlestick",    
  	highlightEnabled: false,
    dataPoints: dps
	}]
});
chart1.render();
chart2.render();
chart3.render();

var axisXMin = chart1.axisX[0].get("minimum");
var axisXMax = chart1.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"});
  $("#1m").trigger("click");
});

$("#date-selector").change(function() {
	var minValue =...