Robware/View/Weight/index.view

@Title{Weight}@
@CSS{
	.input{
		padding:5px;
	}
	
	.input > *{
		display: block;
		width:100%;
		margin-bottom: 5px;
	}
}@
@JavaScript{
	var chartData;
	var chart;
	
	var chartOptions = {
		chart: {
			title: 'Historical Weight Data',
		},
		height:400,
		legend:{
			position: 'top',
			alignment: 'start'
		},
		series: {
			0:{axis:'Weight'},
			2:{axis:'Fat'}
		},
		axes:{
			y:{
				Weight:{label:'Weight (KG)'},
				Fat:{label:'Fat %'}
			}
		}
	};

	function DrawChart() {
		chart.draw(chartData, chartOptions);
	}
		
	function InitChart(){
		chartData = new google.visualization.DataTable();
		chartData.addColumn('date', 'Date');
		chartData.addColumn('number', 'Weight (KG)');
		chartData.addColumn('number', 'Fat %');
		chartData.addColumn('number', 'BMI');

		chartData.addRows([
			<?php
				foreach ($readings as $r){
					$dateArray=$r->GetParsedDate();
					echo '[new Date(',$dateArray['year'],',',$dateArray['month']-1,',',$dateArray['day'],'),',$r->Weight,',',$r->Fat,',',$r->Bmi,'],',PHP_EOL;
				}
			?>
		]);

		chart = new google.charts.Line(document.getElementById('linechart'));
		
		DrawChart();
	}
	
	function AddData(weight, bmi, fat){
		chartData.addRow([new Date(),weight,fat,bmi]);
		DrawChart();
	}
	
	function AddWeightReading(data){
		var reading=JSON.parse(data);
		AddData(reading.Weight, reading.BMI, reading.Fat);
	}
	
	$(function(){
		$.getScript("https://www.google.com/jsapi",function(){
			google.load('visualization', '1.1', {packages: ['line'], callback:function(){
				google.setOnLoadCallback(InitChart);
			}});
		});
	});
}@
@Body{
<form ajaxForm action="/weight/add" method="post" onsuccess="AddWeightReading">
	<div class="row col-md-4">
		<div class="col input">
			<label for="weight">Weight (KG)</label>
			<input type="text" id="weight" name="weight" />
		</div>
		<div class="col input">
			<label for="bmi">BMI</label>
			<input type="text" id="bmi" name="bmi" />
		</div>
		<div class="col input">
			<label for="fat">Fat %</label>
			<input type="text" id="fat" name="fat" />
		</div>
		<div class="col input">
			<label for="save">Action</label>
			<input id="save" style="padding:5px" type="submit" value="Save" />
		</div>
	</div>
</form>
<div class="row col-lg-1">
	<div class="col" id="linechart"></div>
</div>
}@