$(document).ready(function() { // Check if everything is loaded
	console.log('Ready!');

	// Load JSON data from getDonuts.php
	$.getJSON("getDonuts.php", function(data) {

		var names = [];
		var donuts = []

		// Loop through data and push to arrays.
		$.each(data, function(index, value) {
			names.push(value.name);
			donuts.push(value.donuts);
		});

		// Check if data is in correct format.
		console.log(names);
		console.log(donuts);

		// Add a visualization of the data in the div with id secondcolumn
		var ctx = $("#secondcolumn").get(0).getContext("2d");
		var data = {
			labels: names,
			datasets: [
				{
					label: "My First dataset",
					fillColor: "rgba(220,220,220,0.2)",
					strokeColor: "rgba(220,220,220,1)",
					pointColor: "rgba(220,220,220,1)",
					pointStrokeColor: "#fff",
					pointHighlightFill: "#fff",
					pointHighlightStroke: "rgba(220,220,220,1)",
					data: donuts
				}
			]
		};
		var myNewChart = new Chart(ctx).Line(data, {});
	});


});