Sheetrock D3 Linechart by davo

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

	

});