rebekahmonson/311-chart-js-example

## 311-chart-js-example
<!doctype html>
<html>
	<head>
		<title>Line Chart</title>
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
	</head>
	<body>
		<div style="width: 90%; height:100%;">
			<div>
				<h1>Animal bites to a person</h1>
				<h4 id="date"></h4>
				<canvas id="canvas"></canvas>
			</div>
		</div>

	<script>
	//get todays date
	var today = new Date();
	var month = today.getMonth();
	var year = today.getFullYear();
	var lastYear = today.getFullYear()-1;
	var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
	var lastMonthName = monthNames[month-1];
	var url;

	if (month < 1){
		url = "https://opendata.miamidade.gov/resource/dj6j-qg5t.json?issue_type=ANIMAL%20BITE%20TO%20A%20PERSON&created_year_month="+lastYear+'11';
		} else {
		url = "https://opendata.miamidade.gov/resource/dj6j-qg5t.json?issue_type=ANIMAL%20BITE%20TO%20A%20PERSON&created_year_month="+year+month;
	};
	console.log(lastMonthName);
	$( '#date' ).text( lastMonthName +' '+ year );
	//grab our data from the 311 API
	$.getJSON(url, function( data ) {
		//create array to hold all november dates
		var datesRequests = [];
		//set string length for dates in data
		var dateLength = 10;
		//make an empty array to collect all the dates for labels
		var labelsArr = [];
		//make an empty array to collect all the requests
		var requests = [];
		//create the date labels for the chart
		for (i = 1; i < 31; i++) {
				//if i is less than 9 add a 0 to day digit
				if (i<10){
					//create november date labels for single-digit days
					var label = "2015-11-0"+i;
					}else{
					//create november date labels for days > 10
					var label = "2015-11-"+i;
					};
				//push labels into the labelsArr array
				labelsArr.push(label);
				//push an object for each date that includes the date label and sets the bite count to 0 into the datesRequests array
				datesRequests.push( { 'date': label, 'requests': 0 } );

			};
		//loop through each object from the 311 API data
		$.each(data, function(i, item){
			//set a date variable to the ticket created date in the data
			var date = data[i].ticket_created_date_time;
			//truncate the date variable to only show YYYY-MM-DD
			var cleanDate = date.substring(0, dateLength);
			//compare the clean Date to the date of each object in our daterequests array
			$.each(datesRequests, function(x, item){
				//if the ticket_created_date matches a date in an object within daterequests …
				if ( cleanDate === datesRequests[x].date ){
					//then add 1 to the requests count in the datesRequests object
					datesRequests[x].requests++;
				}
			});
		});
		//loop through each item in the datesRequests array
		$.each(datesRequests, function(i, item){
			//push the bite count for each date into the requests array
			requests.push(datesRequests[i].requests);
		});
		//set up the chart
		var lineChartData = {
		labels : labelsArr, //set labels to our labelsArr array
		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 : requests //set data to requests array
						}
					]
				}
		//set up canvas
		var ctx = document.getElementById("canvas").getContext("2d");
		//draw chart
		window.myLine = new Chart(ctx).Line(lineChartData, {
			//make chart responsive
			responsive: true
		});
	});

	</script>
	</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Line Chart</title>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
	</head>
	<body>
	<div style="width: 90%; height:100%;">
	<div>
	<h1>Animal bites to a person</h1>
	<h4 id="date"></h4>
	<canvas id="canvas"></canvas>
	</div>
	</div>

	<script>
	//get todays date
	var today = new Date();
	var month = today.getMonth();
	var year = today.getFullYear();
	var lastYear = today.getFullYear()-1;
	var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
	var lastMonthName = monthNames[month-1];
	var url;

	if (month < 1){
	url = "https://opendata.miamidade.gov/resource/dj6j-qg5t.json?issue_type=ANIMAL%20BITE%20TO%20A%20PERSON&created_year_month="+lastYear+'11';
	} else {
	url = "https://opendata.miamidade.gov/resource/dj6j-qg5t.json?issue_type=ANIMAL%20BITE%20TO%20A%20PERSON&created_year_month="+year+month;
	};
	console.log(lastMonthName);
	$( '#date' ).text( lastMonthName +' '+ year );
	//grab our data from the 311 API
	$.getJSON(url, function( data ) {
	//create array to hold all november dates
	var datesRequests = [];
	//set string length for dates in data
	var dateLength = 10;
	//make an empty array to collect all the dates for labels
	var labelsArr = [];
	//make an empty array to collect all the requests
	var requests = [];
	//create the date labels for the chart
	for (i = 1; i < 31; i++) {
	//if i is less than 9 add a 0 to day digit
	if (i<10){
	//create november date labels for single-digit days
	var label = "2015-11-0"+i;
	}else{
	//create november date labels for days > 10
	var label = "2015-11-"+i;
	};
	//push labels into the labelsArr array
	labelsArr.push(label);
	//push an object for each date that includes the date label and sets the bite count to 0 into the datesRequests array
	datesRequests.push( { 'date': label, 'requests': 0 } );

	};
	//loop through each object from the 311 API data
	$.each(data, function(i, item){
	//set a date variable to the ticket created date in the data
	var date = data[i].ticket_created_date_time;
	//truncate the date variable to only show YYYY-MM-DD
	var cleanDate = date.substring(0, dateLength);
	//compare the clean Date to the date of each object in our daterequests array
	$.each(datesRequests, function(x, item){
	//if the ticket_created_date matches a date in an object within daterequests …
	if ( cleanDate === datesRequests[x].date ){
	//then add 1 to the requests count in the datesRequests object
	datesRequests[x].requests++;
	}
	});
	});
	//loop through each item in the datesRequests array
	$.each(datesRequests, function(i, item){
	//push the bite count for each date into the requests array
	requests.push(datesRequests[i].requests);
	});
	//set up the chart
	var lineChartData = {
	labels : labelsArr, //set labels to our labelsArr array
	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 : requests //set data to requests array
	}
	]
	}
	//set up canvas
	var ctx = document.getElementById("canvas").getContext("2d");
	//draw chart
	window.myLine = new Chart(ctx).Line(lineChartData, {
	//make chart responsive
	responsive: true
	});
	});

	</script>
	</body>
	</html>