smallfield/workout.html

## workout.html
<!DOCTYPE html>
	<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>My workout stat</title>
		<script src="//code.jquery.com/jquery-1.8.2.js"></script>
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
		<script type='text/javascript' src='//www.google.com/jsapi'></script>

		<script src="//jquery-csv.googlecode.com/git/src/jquery.csv.js"></script>
		<script type='text/javascript'>
			google.load('visualization', '1', {'packages':['annotatedtimeline']});
			google.setOnLoadCallback(drawChart);

			function drawChart() {
				$.get("data.csv", function(csvstr){
					csv = $.csv.toArrays(csvstr);
					$(csv).each(function() {
						this.forEach(function(val,i) {
							if (val.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2} [0-9]{2}\:[0-9]{2}/)) {
								this[i] = new Date(val);
							} else {
								this[i] = parseFloat(val);
							}
						}, this);
					});
					var data = new google.visualization.DataTable();
					data.addColumn('date', 'Date');
					data.addColumn('number', 'Total Distance');
					data.addColumn('number', 'Time');
					data.addColumn('number', 'Average Speed');
					data.addRows(csv);
					var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
					chart.draw(data, {displayAnnotations: false});
				});
			}


			$.get("source.csv", function(csvstr){
				var m;
				if (m = csvstr.match(/^Year.*/m)) {
					var date = m[0].split(",")
					console.log(date[1] + "/" + date[3] + "/" + date[5] + " " + date[7] + ":" + date[9]);
				}
				if (m = csvstr.match(/^workout,.*\n(.*)$/m)) {
					var data = m[1].split(",")
					console.log(data);
				}
			});

		</script>
	</head>

	<body>
		<div class="container">
			<h1>My workout stat</h1>
			<div id='chart_div' style='width: 700px; height: 300px;'></div>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My workout stat</title>
	<script src="//code.jquery.com/jquery-1.8.2.js"></script>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script type='text/javascript' src='//www.google.com/jsapi'></script>

	<script src="//jquery-csv.googlecode.com/git/src/jquery.csv.js"></script>
	<script type='text/javascript'>
	google.load('visualization', '1', {'packages':['annotatedtimeline']});
	google.setOnLoadCallback(drawChart);

	function drawChart() {
	$.get("data.csv", function(csvstr){
	csv = $.csv.toArrays(csvstr);
	$(csv).each(function() {
	this.forEach(function(val,i) {
	if (val.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2} [0-9]{2}\:[0-9]{2}/)) {
	this[i] = new Date(val);
	} else {
	this[i] = parseFloat(val);
	}
	}, this);
	});
	var data = new google.visualization.DataTable();
	data.addColumn('date', 'Date');
	data.addColumn('number', 'Total Distance');
	data.addColumn('number', 'Time');
	data.addColumn('number', 'Average Speed');
	data.addRows(csv);
	var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
	chart.draw(data, {displayAnnotations: false});
	});
	}


	$.get("source.csv", function(csvstr){
	var m;
	if (m = csvstr.match(/^Year.*/m)) {
	var date = m[0].split(",")
	console.log(date[1] + "/" + date[3] + "/" + date[5] + " " + date[7] + ":" + date[9]);
	}
	if (m = csvstr.match(/^workout,.\n(.)$/m)) {
	var data = m[1].split(",")
	console.log(data);
	}
	});

	</script>
	</head>

	<body>
	<div class="container">
	<h1>My workout stat</h1>
	<div id='chart_div' style='width: 700px; height: 300px;'></div>
	</div>
	</body>
	</html>