dropdown charts

HTML

<select class="dropdown" id="dd">
      <option value="" selected="selected">Select: Study</option>
      <option value="Medicine">Medicine</option>
      <option value="Law">Law</option>
      <option value="Educational Sciences">Educational Sciences</option>
  </select>
  <div id="chartContainer1" style="height: 300px; width: 100%;"></div>
          <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

var jsonData = {
  "Medicine":[
   {y: 40, label: "General Practitioner"},
		{y: 10, label: "Cardiologist"},
		{y: 20, label: "Surgeon"},
		{y: 15, label: "Dermatologist"},
		{y: 5, label: "Researcher"},
	],

    "Law":[
      {y: 20, label: "Accountant"},
      {y: 6, label: "Judge's associate"},
    {y: 74, label: "Lawyer"},
    ],

    "Educational Sciences":
    [
      {y: 54, label: "Teacher"},
      {y: 26, label: "Researcher"},
    {y: 23, label: "Consultant"},
    {y: 36, label: "Designer learning materials"},
    ],
  }

var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer1",
{
 animationEnabled: true,
	axisX: {
    interval: 1
  },
  axisY2:{
		interlacedColor: "rgba(1,77,101,.2)",
		gridColor: "rgba(1,77,101,.1)",
		title: "Percentage Students"
  },

	data: [{
    type: 'bar',
		color: "#014D65",
    //xValueFormatString:"D MM h:mm",
    name: "series1",
    dataPoints: dataPoints // this should contain only specific serial number data

	}]
});

$( ".dropdown" ).change(function() {
	chart.options.data[0].dataPoints = [];
  var e = document.getElementById("dd");
	var selected = e.options[e.selectedIndex].value;
  dps = jsonData[selected];
  for(var i in dps) {
    chart.options.data[0].dataPoints.push({label: dps[i].label, y: dps[i].y});
  }
  chart.render();
})