Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - 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 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 course = [];
var dataSeries = [];
var uniqueLabels = {};
var distinct = [];

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: dataSeries
});

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

				for( var i in field ) {
						//Find all distinct labels in JSON
						if( typeof(uniqueLabels[field[i].course]) == "undefined"){
								distinct.push(field[i].course);          
								dataSeries.push({name: field[i].course, type: "stackedColumn", dataPoints: [], showInLegend: true, legend: "Total Population"})
						}
						uniqueLabels[field[i].course] = 0;
				}

				for( var i in field) {
						for(var j in dataSeries){
								//push dataPoints to corresponding dataSeries based on label from JSON
								if(dataSeries[j].name === field[i].course) {
										dataSeries[j].dataPoints.push({label: field[i].year, y: parseInt(field[i].count) })
								}
						}
				}

				//change all grahps everything for 2 dimension graph only
				chart.render();				
		}
});

var chartType = document.getElementById('chartType');
chartType.addEventListener( "change",  function(){
		for(var i= 0; i < chart.options.data.length; i++){
				chart.options.data[i].type = chartType.options[chartType.selectedIndex].value;
		}
		chart.render();
});