basic app

9 years ago · da1f23c853
commit da1f23c853
2 changed files with 54 additions and 0 deletions
--- a/app.js
+++ b/app.js
@ -0,0 +1,41 @@
+window.onload = function(){
+	var ctx = document.querySelector('#runs');
+
+	var chartData = {
+		labels: [],
+		datasets: []
+	};
+
+	fetch('http://localhost:3000/users/').then(function(response){
+		response.json().then(function(data){
+			data.forEach(function(user, index){
+				var newUserObj = {
+					label: "Runs for " + user.name,
+					data: []
+				};
+				user.runs.forEach(function(run){
+					var date = new Date(run.date);
+					newUserObj.data.push({
+						// x: date.toLocaleString(),
+						x: date,
+						y: run.distance
+					});
+				})
+				chartData.datasets.push(newUserObj);
+			});
+
+			var runsChart = new Chart(ctx, {
+				type: 'line',
+				data: chartData,
+				options: {
+					scales: {
+						xAxes: [{
+							type: 'time',
+							position: 'bottom'
+						}]
+					}
+				}
+			});
+		});
+	})
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<script src="https://momentjs.com/downloads/moment.min.js" charset="utf-8"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js" charset="utf-8"></script>
+		<script src="app.js" charset="utf-8"></script>
+	</head>
+	<body>
+		<canvas id="runs" width="300" height="300"></canvas>
+	</body>
+</html>