Basic Column Chart - CanvasJS

Basic Column Chart

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 -->
<select class="dropdown" id="dd">
    <option value="" selected="selected">Choose Timeframe</option>
    <option value="All">All</option>
    <option value="thisQ">This quarter</option>
</select>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart"
  },
  data: [{				
    dataPoints: [
      { label: "column1", y: 123 },
      { label: "column2", y: 456 },
      { label: "column3", y: 789 }
    ]
  }]
});

var chart_daterange = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart (this quarter)"
  },
  data: [{				
    dataPoints2: [
      { label: "column1", y: 11 },
      { label: "column2", y: 22 },
      { label: "column3", y: 33 }
    ]
  }]
});

chart.render(); //MUST RENDER THIS GRAPH DURING PAGE LOADING

$( ".dropdown" ).change(function() {
  var menu_dropdown = document.getElementById("dd");
	var selected = menu_dropdown.options[menu_dropdown.selectedIndex].value;
  if(selected === "thisQ"){
 		chart_daterange.render();
  }
});