|
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Show latest Withings data</title> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> |
|
<style> |
|
|
|
body { font: 12px Arial;} |
|
|
|
path { |
|
stroke: steelblue; |
|
stroke-width: 2; |
|
fill: none; |
|
} |
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: grey; |
|
stroke-width: 1; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
|
|
.limits { |
|
|
|
stroke: black; |
|
stroke-width: 1; |
|
shape-rendering: crispEdges; |
|
stroke-dasharray: 4,9; |
|
} |
|
|
|
|
|
|
|
.start { |
|
|
|
stroke: green; |
|
stroke-width: 1; |
|
shape-rendering: crispEdges; |
|
|
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<p>Tracking weight (kg) during half marathon training</p> |
|
<script type="text/javascript"> |
|
|
|
var public_v = []; |
|
|
|
//could, should make this read from data rather than hard code |
|
var mindate = new Date(2014,2,1), |
|
maxdate = new Date(); |
|
|
|
var dataset; //Declare global var |
|
|
|
// Set the dimensions of the graph |
|
var margin = {top: 30, right: 20, bottom: 30, left: 50}, |
|
width = 600 - margin.left - margin.right, |
|
height = 470 - margin.top - margin.bottom; |
|
|
|
// Set the ranges |
|
var x = d3.time.scale().domain([mindate, maxdate]).range([0, width]); |
|
var y = d3.scale.linear().domain([0,100]).range([height, 0]); |
|
|
|
// Define the axes |
|
var xAxis = d3.svg.axis().scale(x) |
|
.orient("bottom").ticks(5); |
|
|
|
var yAxis = d3.svg.axis().scale(y) |
|
.orient("left").ticks(5); |
|
|
|
var dan=[]; |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", width + margin.left + margin.right+50) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
|
|
// Define the line |
|
var valueline = d3.svg.line() |
|
.x(function(d) { return x(d.nicedate); }) |
|
.y(function(d) { return y(d.kg); }); |
|
|
|
//this is our JSON data |
|
d3.json("https://script.googleusercontent.com/macros/echo?user_content_key=usdMojNZPRcmiGMgx3TB4pT7Y_QSzqSXkqN5PzCvZlhqBVNVDl9jh6PD27tcbrKElyFYSGlDQRvJGLTNOaBxm9hyqBP0AxQ0OJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa1GhPSVukpSQTydEwAEXFXgt_wltjJcH3XHUaaPC1fv5o9XyvOto09QuWI89K6KjOu0SP2F-BdwU_bHdEvMA1ZAseN0DDVILwljXtyAA-4uSbcTCwOx--LnHcH7xjEi2QVjlMJ3RLnnD5y7FLqOV0Tk27B8Rh4QJTQ&lib=MnrE7b2I2PjfH799VodkCPiQjIVyBAxva", function(error,data) { |
|
|
|
//Hand CSV data off to global variable so it's accessible later if needed |
|
dataset_raw = data.Sheet1; |
|
|
|
|
|
|
|
var dataset = []; |
|
for (var i = 0, len = dataset_raw.length; i<len; i++) { |
|
if (dataset_raw[i].kg > 0 ) |
|
{dataset.push(dataset_raw[i]);}; |
|
}; |
|
console.log(dataset); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var parseDate = d3.time.format("%B %d, %Y").parse; |
|
|
|
dataset.forEach(function(d) { |
|
d.nicedate = parseDate(d.date.substring(0, d.date.indexOf(",")+6)); |
|
d.kg = +d.kg; |
|
d.fat = +d.fatpercent; |
|
|
|
}); |
|
|
|
|
|
dan=dataset; |
|
|
|
|
|
|
|
|
|
|
|
console.log('this is the max'); |
|
console.log(d3.max(dataset, function(d) { return d.kg; })); |
|
|
|
var max = d3.max(dataset, function(d) { return d.kg; }); |
|
|
|
var min = d3.min(dataset, function(d) { return d.kg; }); |
|
|
|
var d_length = dataset.length; |
|
console.log('d_length'); |
|
console.log(d_length); |
|
|
|
public_v = dataset; |
|
|
|
var latest = dataset[d_length-1].kg; |
|
console.log('latest'); |
|
console.log(latest); |
|
|
|
var latest2 = dataset[d_length-1].date; |
|
console.log('latest2'); |
|
console.log(latest2); |
|
|
|
|
|
|
|
var latestz = dataset[d_length-8].kg; |
|
console.log('latestz'); |
|
console.log(latestz); |
|
|
|
var latestz2 = dataset[d_length-8].date; |
|
console.log('latestz2'); |
|
console.log(latestz2); |
|
|
|
|
|
|
|
var fat1 = dataset[d_length-1].fat; |
|
|
|
|
|
var fat2 = dataset[d_length-8].fat; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.select("p").append("p").html('Latest: <b>' + latest + '</b> kg - Fat:<b> ' + fat1 + '% </b>(' + latest2 + ')'); |
|
d3.select("p").append("p").html('Previously: <b>' + latestz + '</b> kg - Fat:<b> ' + fat2 + '% </b>(' + latestz2 + ')'); |
|
d3.select("p").append("p").html("Change : <b>" + (latest-latestz).toFixed(2) + ' kg'); |
|
|
|
// Add the valueline path. |
|
|
|
svg.append("path") |
|
.attr("class", "line") |
|
.attr("d", valueline(dataset)); |
|
|
|
|
|
//Add the X Axis |
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(xAxis); |
|
|
|
// Add the Y Axis |
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.call(yAxis); |
|
|
|
|
|
svg.selectAll(".limits").data([max,min]).enter().append("line").attr("x1",x(mindate)).attr("x2",x(maxdate)).attr("y1",function(d) {return y(d)}).attr("y2",function(d) {return y(d)}).attr("class","limits"); |
|
|
|
svg.selectAll(".labels").data([max,min]).enter().append("text").text(function(d) {return d+' kg'}).attr("x",x(maxdate)).attr("y",function(d) {return y(d)}); |
|
|
|
|
|
|
|
var start = new Date(2016, 01, 22); |
|
var start2 = x(start); |
|
console.log(start); |
|
console.log(start2); |
|
|
|
svg.selectAll(".start").data([1]).enter().append("line").attr("x1",start2).attr("x2",start2).attr("y1",y(0)).attr("y2",y(100)).attr("class","start"); |
|
|
|
svg.append("text").text("Training begins >>").attr("x",start2-110).attr("y",200).style("stroke","none").style("fill","green"); |
|
|
|
|
|
d3.select("body").append("p").html("Previously = about 7 'weigh-in's ago"); |
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
</body> |
|
</html> |