Withings data via IFTTT

A full explaination here: https://danjharrington.wordpress.com/2014/05/25/chart-withings-data-using-ifttt-google-spreadsheets-and-d3-js/

This line chart gets its data from: Withings>IFTTT>Google Spreadhseets>Google App Script>JSON>d3.js

Dan is a developer from London whose current projects include helping people making wedding table plans online

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js