Viewport based on dropdown options - CanvasJS JavaScript Charts

Viewport based on dropdown options - CanvasJS JavaScript Charts

by canvasjs

HTML

<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 align='center'>
    Min   <select id="minimum">
      <option>Select</option>
    </select>
    &emsp;&emsp;
    Max   <select id="maximum">
      <option>Select</option>
    </select>
</div>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
  		title:{
      text:"Viewport based on Dropdown"
      },
      data: [
      {
        type: "column",
        dataPoints: [
        { x: new Date(2000, 01, 01), y: 20 }, 
        { x: new Date(2001, 01, 01), y: 30 }, 
        { x: new Date(2002, 01, 01), y: 10 }, 
        { x: new Date(2003, 01, 01), y: 21 }, 
        { x: new Date(2004, 01, 01), y: 50 } ,
        { x: new Date(2005, 01, 01), y: 75 }, 
        { x: new Date(2006, 01, 01), y: 10 },
        { x: new Date(2007, 01, 01), y: 12 },
        { x: new Date(2008, 01, 01), y: 15 }, 
        { x: new Date(2009, 01, 01), y: 17 }, 
        { x: new Date(2010, 01, 01), y: 20 }
        ]
      }
      ]
    });


 chart.render();
 
 var vMin   = document.getElementById("minimum"),
     vMax   = document.getElementById("maximum");
//Pass dataPoints as option to drop-down     
for(var i=0; i<chart.options.data[0].dataPoints.length;i++){
    var minOption = document.createElement("option");
    var maxOption = document.createElement("option");
    
    minOption.text = chart.options.data[0].dataPoints[i].x.getFullYear();
    minOption.value = chart.options.data[0].dataPoints[i].x.getFullYear();
    vMin.appendChild(minOption);
   
		maxOption.text =  chart.options.data[0].dataPoints[i].x.getFullYear();
    maxOption.value = chart.options.data[0].dataPoints[i].x.getFullYear();
    vMax.appendChild(maxOption);
	}


 vMin.addEventListener( "change",  setViewportMin);
 vMax.addEventListener( "change",  setViewportMax);
 
  if(!chart.options.axisX)
    	chart.options.axisX = {};
      
//Function to set viewportMinimum
 function setViewportMin(){   
    if(vMin.value)
    	chart.options.axisX.viewportMinimum = new Date(vMin.value,-5);//Subtracting 5 so as to give some padding between axis and dataPoint
    else 
      chart.options.axisX.viewportMinimum = null;      
    chart.render();    
 }
 
 //Function to set viewportMaximum
function setViewportMax(){
   ...