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

$(document).ready(function() {
    var course = []
    $.ajax({
        type: 'GET',    
        url: 'https://api.myjson.com/bins/128woa',
        contentType: "application/json",
        dataType: 'json', 
        success: function(field) {
            for (var i = 0; i < field.length; i++) {
                course.push({
                    label: field[i].year,
                    y: field[i].count,
                    legendText: field[i].year,
                });
            }
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2",
                animationEnabled: true,
                animationDuration: 1000,
                zoomEnabled: true,
                zoomType: "x",
                panEnabled: true,
                toolTip: {
                    shared: true,
                    animationEnabled: true
                },
                title: {
                    text: "University of Negros Occidental - Recoletos",
                    fontSize: 17
                },
                subtitles:[
                    {
                        text: "Enrollment Population 2014-2018"
                    }
                ],
                axisX: {
                    title: "Year",
                    interval: 1,
                    gridDashType: "dot",
                    gridThickness: 1,
                    labelFontColor: "black"
                },
                axisY: { 
                    includeZero: false,
                    title: "Number of Enrollees",
                    labelFontColor: "black",
                    interlacedColor: "#faf9f9"
                }, 
                data: [{
                    type: "stackedColumn",
                    showInLegend: true,
                    legend: "Total Population",
                    name: "Total Population",
                    dataPoints: course
                }
                      ]
            });
            //change all grahps everything...