Updates when class selection changes and displays many graphs

chartData.js

@@ -1,4 +1,4 @@
-function genGradeData(chartName) {
+function genGradeData(chartData) {
 	var gradeData = 
 	{
 		labels: ["Freshman", "Sophomore", "Junior", "Senior"], 
@@ -8,37 +8,69 @@ function genGradeData(chartName) {
 
 	var tempDataArr = [0, 0, 0, 0];
 
-	var jsonData = $.ajax({
-		dataType: "json",
-		url: chartName+".json",
-		async: false, 
-		data: undefined,
-		success: function(data) {
-			console.log(data);
-			for(var i = 0; i < data.length; i++) {
-				if(data[i].grade == "freshman") {
-					gradeData.datasets[0].data[0]++;
-				}
-				else if (data[i].grade == "sophomore") {
-					gradeData.datasets[0].data[1]++;
-				}
-				else if (data[i].grade == "junior") {
-					gradeData.datasets[0].data[2]++;
-				}
-				else if (data[i].grade == "senior") {
-					gradeData.datasets[0].data[3]++;
-				}
-			}
+	console.log(chartData);
+	for(var i = 0; i < chartData.length; i++) {
+		if(chartData[i].grade == "freshman") {
+			gradeData.datasets[0].data[0]++;
+		}
+		else if (chartData[i].grade == "sophomore") {
+			gradeData.datasets[0].data[1]++;
 		}
-		});
+		else if (chartData[i].grade == "junior") {
+			gradeData.datasets[0].data[2]++;
+		}
+		else if (chartData[i].grade == "senior") {
+			gradeData.datasets[0].chartData[3]++;
+		}
+	}
+
 
 	console.log(gradeData.datasets[0].data);
 
 	return gradeData
 }
 
+function genHoursData(chartData) {
+	var hoursHist = {};
+
+	for(var i = 0; i < chartData.length; i++) {
+		var avgHours = (chartData[i].hours[0] + chartData[i].hours[1]) / 2;
+		if (avgHours in hoursHist) {
+			hoursHist[avgHours] += 1;
+		}
+		else { hoursHist[avgHours] = 1; }
+	}
+
+	var hoursKeys = Object.keys(hoursHist);
+	var hoursData = [];
+	for(var i = 0; i < hoursKeys.length; i++) {
+		hoursData.push(hoursHist[hoursKeys[i]]);
+	}
+
+
+	return {
+		labels: hoursKeys.map(function (num) { return num.toString(); } ),
+		datasets: [ {data: hoursData }]
+	};
+}
+
+function getChartData(chartName) {
+	var jsonData = {}
+	$.ajax({
+		dataType: "json",
+		url: chartName+".json",
+		async: false, 
+		data: undefined,
+		success: function(data) {
+			jsonData = data;
+		}});
+	return jsonData;
+}
+
 function genChartData(chartName) {
+	var chartData = getChartData(chartName);
 	return [
-		genGradeData(chartName)
+		{title: "Grade/Class Distribution", data: genGradeData(chartData)},
+		{title: "Average Class Hours Taken", data: genHoursData(chartData)}
 	];
 }

displayChart.js

@@ -1,4 +1,4 @@
-var chartNames = ["test", "ab", "cd"];
+var chartNames = ["cs225", "ece110"];
 
 var testData = {
 	labels : ["January","February","March","April","May","June","July"],
@@ -36,7 +36,18 @@ $(document).ready(readyFunc) ;
 function readyFunc() {
 	console.log("uguu");
 	populateChartSelect();
-	spawnCanvases();
+
+	var chartName = $("#chartSelect").val();
+	var chartAllData = genChartData(chartName);
+	spawnCanvas(chartName, chartAllData);
+
+	$("#chartSelect").change(
+		function () {
+			var newChartName = $("#chartSelect").val();
+			spawnCanvas(newChartName, genChartData(newChartName));
+		}
+		);
+	//spawnCanvases();
 }
 
 function populateChartSelect() {
@@ -63,6 +74,27 @@ function spawnCanvases() {
 	}
 }
 
+function spawnCanvas(chartName, chartData) {
+	console.log(chartName);
+	console.log(chartData);
+	$("#canvasDiv").html('');
+	for(var i = 0; i < chartData.length; i++) {
+		var newCanvas = document.createElement('canvas');
+		newCanvas.width = cWidth;
+		newCanvas.height = cHeight;
+
+		var newDiv = document.createElement("div")
+		var newPar = $("<p></p>").append($("<h1></h1>").append(chartData[i].title));
+		newDiv.appendChild(newPar[0]);
+		newDiv.appendChild(newCanvas);
+		$("#canvasDiv").append(newDiv);
+
+		chartCanvases[chartName] = new CanvasChart(newCanvas);
+		console.log(chartData[i].data);
+		chartCanvases[chartName].displayData(chartData[i].data);
+	}
+}
+
 function paintCanvas(canvasElem, fillColorString) {
 	var ctxContext = canvasElem.getContext("2d");
 	ctxContext.fillStyle = fillColorString;