Skip to content

Instantly share code, notes, and snippets.

@davo

davo/index.html

Created Jun 24, 2016
Embed
What would you like to do?
Sheetrock D3 Linechart
<!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
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment