davo/index.html

## index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>Sheetrock D3 Linechart</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
		<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js'></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="../assets/css/fonts.min.css">
		<style>

			html {
				position: relative;
				min-height: 100%;
			}
			body {
				padding-top: 50px;
				margin-bottom: 60px;
				font-family: "Rubik Book", "Helvetica", sans-serif !important;
			}


			.footer {
				position: absolute;
				bottom: 0;
				width: 100%;
				/* Set the fixed height of the footer here */
				background-color: #f5f5f5;
			}

			.axis path,
			.axis line {

			  fill: none;
			  stroke: #000;
			  shape-rendering: crispEdges;

			}

			text {
				font-family: "Rubik Book", "Helvetica", sans-serif !important;
			}

			.x.axis path {
			  display: none;
			}

			.line {
			  fill: none;
			  stroke: #3B5BCA;
			  stroke-width: 2px;
			}


		</style>
	</head>
<body>
	<div class="container">

		<div class="panel panel-default">
			 <div class="panel-heading">
				 <h1>Sheetrock.js + d3.js</h1>
				 <h4>https://www.dashingd3js.com/data-structures-d3js-accepts</h4>

			 </div>
			<div class="panel-body">
				<div id="loading">Cargando datos...</div>
				<div class="container-fluid">

				</div>
			</div>
		</div>

	</div>

	<footer class="footer">
		<div class="container">
			<p class="navbar-text"><a href="https://docs.google.com/spreadsheets/d/1Fm-sWrGeWEqHTkc580EFaxACtjL2n9ShCyt5E6S4IUA/edit#gid=996460197" target="_blank">Google Sheet Público</a></p>
		</div>
	</footer>


<script type="text/javascript" src="linechart.js"></script>

</body>
</html>

## linechart.js
$( document ).ready(function() {

	var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=1Fm-sWrGeWEqHTkc580EFaxACtjL2n9ShCyt5E6S4IUA&usp=drive_web#gid=996460197';

	var data = [];


	var done = function (error, options, response) {
		$('#loading').fadeOut();

		// console.log(response.rows[1].cells);

		jQuery.each(response.rows, function(index, value) {
			var row = []
				row.date = value.cells.date;
				row.close =	value.cells.close;
			data.push(row);
		});


		data.shift();

		lineChart(data);

		//console.log(data);


	};

	function lineChart(data) {
		var margin = {top: 20, right: 20, bottom: 30, left: 50},
			width = 960 - margin.left - margin.right,
			height = 500 - margin.top - margin.bottom;

		// 4/10/2012

		var formatDate = d3.time.format("%m/%e/%Y");

		var x = d3.time.scale()
			.range([0, width]);

		var y = d3.scale.linear()
			.range([height, 0]);

		var xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom");

		var yAxis = d3.svg.axis()
			.scale(y)
			.orient("left");

		var line = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y(d.close); });

		var svg = d3.select(".container-fluid").append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
		  .append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		// console.log(data);

		// for (var i = data.length - 1; i >= 0; i--) {
		// 	console.log(data[i]);
		// }

		data.forEach(function(d) {
		  d.date = formatDate.parse(d.date);
		  d.close = +d.close;
		  return d;
		  console.log(d.date);
		});

		  x.domain(d3.extent(data, function(d) { return d.date; }));
		  y.domain(d3.extent(data, function(d) { return d.close; }));

		svg.append("g")
		  .attr("class", "x axis")
		  .attr("transform", "translate(0," + height + ")")
		  .call(xAxis);

		svg.append("g")
		  .attr("class", "y axis")
		  .call(yAxis)
			.append("text")
				.attr("transform", "rotate(-90)")
				.attr("y", 6)
				.attr("dy", ".71em")
				.style("text-anchor", "end")
				.text("Close ($)");

		svg.append("path")
		      .datum(data)
		      .attr("class", "line")
		      .attr("d", line);


	}

	$('#properati').sheetrock({
		url: mySpreadsheet,
		query: "select *",
		callback: done
	});


});

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>Sheetrock D3 Linechart</title>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js'></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/css/fonts.min.css">
	<style>

	html {
	position: relative;
	min-height: 100%;
	}
	body {
	padding-top: 50px;
	margin-bottom: 60px;
	font-family: "Rubik Book", "Helvetica", sans-serif !important;
	}


	.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	background-color: #f5f5f5;
	}

	.axis path,
	.axis line {

	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;

	}

	text {
	font-family: "Rubik Book", "Helvetica", sans-serif !important;
	}

	.x.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke: #3B5BCA;
	stroke-width: 2px;
	}



	</style>
	</head>
	<body>
	<div class="container">

	<div class="panel panel-default">
	<div class="panel-heading">
	<h1>Sheetrock.js + d3.js</h1>
	<h4>https://www.dashingd3js.com/data-structures-d3js-accepts</h4>

	</div>
	<div class="panel-body">
	<div id="loading">Cargando datos...</div>
	<div class="container-fluid">

	</div>
	</div>
	</div>

	</div>

	<footer class="footer">
	<div class="container">
	<p class="navbar-text"><a href="https://docs.google.com/spreadsheets/d/1Fm-sWrGeWEqHTkc580EFaxACtjL2n9ShCyt5E6S4IUA/edit#gid=996460197" target="_blank">Google Sheet Público</a></p>
	</div>
	</footer>





	<script type="text/javascript" src="linechart.js"></script>

	</body>
	</html>
	$( document ).ready(function() {

	var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=1Fm-sWrGeWEqHTkc580EFaxACtjL2n9ShCyt5E6S4IUA&usp=drive_web#gid=996460197';

	var data = [];



	var done = function (error, options, response) {
	$('#loading').fadeOut();

	// console.log(response.rows[1].cells);

	jQuery.each(response.rows, function(index, value) {
	var row = []
	row.date = value.cells.date;
	row.close = value.cells.close;
	data.push(row);
	});



	data.shift();

	lineChart(data);

	//console.log(data);


	};

	function lineChart(data) {
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// 4/10/2012

	var formatDate = d3.time.format("%m/%e/%Y");

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.close); });

	var svg = d3.select(".container-fluid").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// console.log(data);

	// for (var i = data.length - 1; i >= 0; i--) {
	// console.log(data[i]);
	// }

	data.forEach(function(d) {
	d.date = formatDate.parse(d.date);
	d.close = +d.close;
	return d;
	console.log(d.date);
	});

	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain(d3.extent(data, function(d) { return d.close; }));

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Close ($)");

	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);


	}

	$('#properati').sheetrock({
	url: mySpreadsheet,
	query: "select *",
	callback: done
	});



	});