Dual Axes Line Chart Using Google Charts pulling from Google Sheets by simzou

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="//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>

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;
}