Chart Withings data using IFTTT, Google Spreadsheets and d3.js

Visualise your quantified self

A few months ago I purchased a Withings Smart Body Analyser.  It’s a set of WiFi scales that track your weight, fat percentage, air quality, room temperature etc.  I like it a lot, but as good as it is, what I don’t like is the app’s charts have a y axis that doesn’t start at 0.  A small change in weight looks vastly exaggerated (to some maybe this is a good thing).

y axis doesn't start at 0

y axis doesn’t start at 0

Withings do have an API, but try as I might, I wasn’t able to get the data I wanted from it.  The solution I came up with was to use a combination of the following:

  • Google Spreadsheets
  • Google App Scripts
  • d3.js

So let’s first cover IFTTT.  There’s a channel for Withings in IFTTT.  So whenever you stand on your scales (a trigger) an action takes place.  Such an action might be to make use of the Google Drive channel.  This recipe here shows how every time you step on your scales, a new row with your stats will be added to a Google Drive spreadsheet.  If you like, you can paste in your previous readings so that new data is appended to your existing records.  Only weight and fat data is available, not temperature or air quality.

Next, courtesy of the weekly Dashing D3 newsletter, I came across an article showing how a Google Spreadsheet can be converted to JSON.    To make use of their script, you must find your spreadsheet’s key/id in the url of your spreadsheet and the name of the worksheet (default is Sheet1).  You may need to publish your spreadsheet before the app works with converting your spreadsheet to JSON.  Once working, you should be able to see your Withings data appearing in JSON format.

Withings JSON data

Withings JSON data

In the above image, I have added column headers to the spreadsheet that IFTTT originally created.  Not essential, but certainly helps down the line.  I have also changed the way IFTTT writes the date format to make the creation of the d3.js visual easier, but you may like to automate this conversion to minimise future changes.  You can now link to this data as if it were a typical JSON file.

The final stage involves visualising the data.  You don’t need to use d3.js, you can possibly have simply made a chart in your Google spreadsheet and stopped there.  This line chart here is now able to show my latest weight (kg) and should update every time I step on the scales.  Beware that if you step on the scales twice in one day (quite likely) then you’ll want to take the min/max or average and avoid summing the combined weight.

So to recap, you can visualise your Withings data automatically by using, Google Spreadsheets , a custom Google App Script and d3.js.


Withings data via IFTTT

Withings data via IFTTT


Leave a Reply




× 2 = fourteen

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>