Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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 id="chartContainer" style="height: 360px; width: 100%;"></div>
<div class="row">
            <div class="col-md-3">
                <select name="chart Type" id="chartType">
                    <option value="" selected="selected">Select</option>
                    <option value="stackedColumn">Column Chart</option>
                    <option value="stackedBar">Bar Chart</option>
                    <option value="line">Line Chart</option>
                </select>
            </div>
        </div>

JavaScript

var grade = []; 
var dataSeries = []; 
var uniqueLabels = {}; 
var distinct = [];
var chart = new CanvasJS.Chart("chartContainer", {
    exportFileName: "Annual Population Per College ", 
    exportEnabled: true,
    theme: "light2",
    animationEnabled: true,
    animationDuration: 1000,
    zoomEnabled: true,
    zoomType: "x",
    panEnabled: true,
    toolTip: {
        shared: true,
        animationEnabled: true
    },
    title: {
        text: "Alijis Elementary School",
        fontSize: 17
    },
    subtitles:[
        {
            text: "Population Per Grade Level"
        }
    ],
    legend: {
        cursor: "pointer",
        itemclick: function (e) {
            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            e.chart.render();
        },
        itemmouseover: function(e) {
            e.dataSeries.lineThickness = e.chart.data[e.dataSeriesIndex].lineThickness * 2;
            e.dataSeries.markerSize = e.chart.data[e.dataSeriesIndex].markerSize + 2;
            e.chart.render();
        },
        itemmouseout: function(e) {
            e.dataSeries.lineThickness = e.chart.data[e.dataSeriesIndex].lineThickness / 2;
            e.dataSeries.markerSize = e.chart.data[e.dataSeriesIndex].markerSize - 2;
            e.chart.render();
        }
    },
    axisX: {
        title: "Year",
        interval: 1,
        gridDashType: "dot",
        gridThickness: 1,
        labelFontColor: "black"
    },
    axisY: { 
        includeZero: false,
        title: "Number of Enrollees",
        labelFontColor: "black",
        interlacedColor: "#faf9f9"
    }, 
    data: dataSeries
});

$.ajax({
    type: 'GET',    
    url: 'https://api.myjson.com/bins/1042xw',
    contentType: "application/json",
    dataType: 'json', 
    success: function(field) {

        for( var i in field ) {
           ...