simzou/app.js

## app.js
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(main);

var url = "https://spreadsheets.google.com/feeds/list/1XN5NxxILuWs5osbksgvBMEoEaEGSVZIEF7NK5vmJivs/1/public/values?alt=json"
var data = {};


// GET VARIABLE
var $_GET = {};
if(document.location.toString().indexOf('?') !== -1) {
    var query = document.location
                   .toString()
                   // get the query string
                   .replace(/^.*?\?/, '')
                   // and remove any existing hash string (thanks, @vrijdenker)
                   .replace(/#.*$/, '')
                   .split('&');

    for(var i=0, l=query.length; i<l; i++) {
       var aux = decodeURIComponent(query[i]).split('=');
       $_GET[aux[0]] = aux[1];
    }
}


function main() {

	$.getJSON(url, function(json){
		data = clean_google_sheet_json(json);
		data = _.filter(data, function(datum) { return datum['wearingclothesorunderwear'] === 'Underwear'})
		var chart_data = prepare_data_for_line_graph(data);
		var days_of_data = 'days' in $_GET ? $_GET['days'] : 30;
		chart_data = filter_chart_data(chart_data, days_of_data);
		draw_line_graph(chart_data);
	});

	console.log($_GET);
}


function filter_chart_data(chart_data, days_of_data) {
	var days_in_milliseconds = days_of_data * 24 * 60 * 60 * 1000;
	return _.filter(chart_data, function(datum) {
		return datum[0] == "Timestamp" || Date.now() - datum[0].getTime() < days_in_milliseconds;
	});
}


function prepare_data_for_line_graph(data) {
	var chart_data = [["Timestamp", "Weight", "Waistline", "Goal Weight", "Goal Waist"]];
	_.each(data, function (row) {
		if (row.timestamp){
			var date = new Date(row.timestamp);
			var weight = Number.parseFloat(row['weight']);
			var waist = Number.parseFloat(row['waistline']);
			var goalweight = Number.parseFloat(row['goalweight']);
			var goalwaist = Number.parseFloat(row['goalwaist']);
			chart_data.push([date, weight, waist, goalweight, goalwaist]);
		}
	});
	return chart_data;
}

function draw_line_graph(data) {
	var data = new google.visualization.arrayToDataTable(data);

	var options = {
		// width: 1000,
		height: 500,
		series: {
			0: {targetAxisIndex: 0},
			1: {targetAxisIndex: 1},
			2: {targetAxisIndex: 0},
			3: {targetAxisIndex: 1},
		},
		curveType: 'function',
	};

	var chart = new google.visualization.LineChart(document.getElementById('weight-graph'));

	chart.draw(data, options);
}


// takes in JSON object from google sheets and turns into a json formatted
// this way based on the original google Doc
// [
// 	{
// 		'column1': info1,
// 		'column2': info2,
// 	}
// ]
function clean_google_sheet_json(data){
	var formatted_json = [];
	var elem = {};
	var real_keyname = '';
	$.each(data.feed.entry, function(i, entry) {
		elem = {};
		$.each(entry, function(key, value){
			// fields that were in the spreadsheet start with gsx$
			if (key.indexOf("gsx$") == 0)
			{
				// get everything after gsx$
				real_keyname = key.substring(4);
				elem[real_keyname] = value['$t'];
			}
		});
		formatted_json.push(elem);
	});
	return formatted_json;
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link href="favicon.ico" rel="icon" type="image/x-icon" />
        <title>Health Log / Goals</title>
        <meta name="description" content="Page description, shows up in search results. Should be no longer than 150-160 characters." />

        <!-- Open Graph -->
        <meta property="og:title" content="The title of this page, excluding any branding." />
        <meta property="og:site_name" content="Name of this website." />
        <meta property="og:url" content="Canonical URL of this page, excluding session and user-identifying variables." />
        <meta property="og:image" content="URL to an image for this page. Should be at least 1200x630 pixels." />

        <!-- CSS -->
        <!--
        <link href="app.css" rel="stylesheet" type="text/css" />
        -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <!-- JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script src="app.js"></script>

        <style>
            .chart {
                display: block;
                margin: 0px auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="col-lg-12">
                <div class="chart" id="weight-graph"></div>
                <form id="filter_days">
                    <input type="number" name="days" min="1">
                    <input type="submit">
                </form>
            </div>
        </div>
    </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	google.load('visualization', '1', {packages: ['corechart']});
	google.setOnLoadCallback(main);

	var url = "https://spreadsheets.google.com/feeds/list/1XN5NxxILuWs5osbksgvBMEoEaEGSVZIEF7NK5vmJivs/1/public/values?alt=json"
	var data = {};


	// GET VARIABLE
	var $_GET = {};
	if(document.location.toString().indexOf('?') !== -1) {
	var query = document.location
	.toString()
	// get the query string
	.replace(/^.*?\?/, '')
	// and remove any existing hash string (thanks, @vrijdenker)
	.replace(/#.*$/, '')
	.split('&');

	for(var i=0, l=query.length; i<l; i++) {
	var aux = decodeURIComponent(query[i]).split('=');
	$_GET[aux[0]] = aux[1];
	}
	}


	function main() {

	$.getJSON(url, function(json){
	data = clean_google_sheet_json(json);
	data = _.filter(data, function(datum) { return datum['wearingclothesorunderwear'] === 'Underwear'})
	var chart_data = prepare_data_for_line_graph(data);
	var days_of_data = 'days' in $_GET ? $_GET['days'] : 30;
	chart_data = filter_chart_data(chart_data, days_of_data);
	draw_line_graph(chart_data);
	});

	console.log($_GET);
	}


	function filter_chart_data(chart_data, days_of_data) {
	var days_in_milliseconds = days_of_data * 24 * 60 * 60 * 1000;
	return _.filter(chart_data, function(datum) {
	return datum[0] == "Timestamp" \|\| Date.now() - datum[0].getTime() < days_in_milliseconds;
	});
	}


	function prepare_data_for_line_graph(data) {
	var chart_data = [["Timestamp", "Weight", "Waistline", "Goal Weight", "Goal Waist"]];
	_.each(data, function (row) {
	if (row.timestamp){
	var date = new Date(row.timestamp);
	var weight = Number.parseFloat(row['weight']);
	var waist = Number.parseFloat(row['waistline']);
	var goalweight = Number.parseFloat(row['goalweight']);
	var goalwaist = Number.parseFloat(row['goalwaist']);
	chart_data.push([date, weight, waist, goalweight, goalwaist]);
	}
	});
	return chart_data;
	}

	function draw_line_graph(data) {
	var data = new google.visualization.arrayToDataTable(data);

	var options = {
	// width: 1000,
	height: 500,
	series: {
	0: {targetAxisIndex: 0},
	1: {targetAxisIndex: 1},
	2: {targetAxisIndex: 0},
	3: {targetAxisIndex: 1},
	},
	curveType: 'function',
	};

	var chart = new google.visualization.LineChart(document.getElementById('weight-graph'));

	chart.draw(data, options);
	}


	// takes in JSON object from google sheets and turns into a json formatted
	// this way based on the original google Doc
	// [
	// {
	// 'column1': info1,
	// 'column2': info2,
	// }
	// ]
	function clean_google_sheet_json(data){
	var formatted_json = [];
	var elem = {};
	var real_keyname = '';
	$.each(data.feed.entry, function(i, entry) {
	elem = {};
	$.each(entry, function(key, value){
	// fields that were in the spreadsheet start with gsx$
	if (key.indexOf("gsx$") == 0)
	{
	// get everything after gsx$
	real_keyname = key.substring(4);
	elem[real_keyname] = value['$t'];
	}
	});
	formatted_json.push(elem);
	});
	return formatted_json;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link href="favicon.ico" rel="icon" type="image/x-icon" />
	<title>Health Log / Goals</title>
	<meta name="description" content="Page description, shows up in search results. Should be no longer than 150-160 characters." />

	<!-- Open Graph -->
	<meta property="og:title" content="The title of this page, excluding any branding." />
	<meta property="og:site_name" content="Name of this website." />
	<meta property="og:url" content="Canonical URL of this page, excluding session and user-identifying variables." />
	<meta property="og:image" content="URL to an image for this page. Should be at least 1200x630 pixels." />

	<!-- CSS -->
	<!--
	<link href="app.css" rel="stylesheet" type="text/css" />
	-->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

	<!-- JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script src="app.js"></script>

	<style>
	.chart {
	display: block;
	margin: 0px auto;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="col-lg-12">
	<div class="chart" id="weight-graph"></div>
	<form id="filter_days">
	<input type="number" name="days" min="1">
	<input type="submit">
	</form>
	</div>
	</div>
	</body>
	</html>