strength.html

<style>
#chart svg {
  height: 400px;
}

/* http://stackoverflow.com/questions/18530459/nvd3-js-bigger-points-in-a-line-chart */
.nvd3 .nv-groups .nv-point {
  stroke-opacity: 0.2 !important;
  stroke-width: 10px;
}
</style>

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">

<div id="chart">
  <svg></svg>
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<script>
  // http://stackoverflow.com/questions/10638529/how-to-parse-a-date-in-format-yyyymmdd-in-javascript
  function parse(str) {
    if(!/^\d{4}\/\d{2}\/\d{2}$/.test(str)) return "invalid date";
    var y = str.substr(0,4),
        m = str.substr(5,2),
        d = str.substr(8,2);
    return new Date(y,m,d).getTime();
  }
  var mydata = [
    {
      key: "Benchpress",
      values: [
        ["2013/10/31", 90],
        ["2013/11/18", 100],
        ["2014/03/01", 110],
        ["2014/06/19", 120]
      ]
    },
    {
      key: "Press",
      values: [
        ["2013/10/20", 55],
        ["2013/11/15", 62],
        ["2014/03/04", 70],
        ["2014/06/17", 77.5]
      ]
    },
    {
      key: "Deadlift",
      values: [
        ["2013/09/24", 110],
        ["2013/11/13", 130],
        ["2014/03/05", 150],
        ["2014/06/15", 165]
      ]
    },
    {
      key: "Front squat",
      values: [
        ["2013/11/02", 85],
        ["2013/11/19", 90],
        ["2014/03/12", 100],
        ["2014/06/20", 110]
      ]
    },
    {
      key: "Back squat",
      values: [
        ["2013/10/17", 85],
        ["2013/11/16", 100],
        ["2014/03/03", 125],
        ["2014/06/18", 135]
      ]
    },
//    {
//      key: "Pull ups",
//        values: [
//        ["2013/09/17", 8],
//        ["2013/11/12", 15],
//        ["2013/12/16", 17],
//        ["2013/12/23", 19],
//        ["2013/12/27", 22],
//        ["2014/01/17", 24],
//        ["2014/07/30", 26],
//        ["2014/07/31", 28],
//      ]
//    }
  ];

  nv.addGraph(function() {
    var chart = nv.models.lineChart()
      //.useInteractiveGuideline(true)
      .x(function (d) {
        return parse(d[0]);
      })
      .y(function (d) {
        return d[1];
      })
      .showYAxis(true)
      .margin({left: 100, right: 100})
    ;

    var dateFormatter = function(d) { return d3.time.format('%x')(new Date(d)) };
    chart.xAxis
      .axisLabel('Date')
      .tickFormat(dateFormatter);
      ;

    chart.yAxis
      .axisLabel('Weight (kg)')
      .tickFormat(d3.format(",r"))
      ;

    d3.select('#chart svg')
      .datum(mydata)
      .transition().duration(500)
      .call(chart)
      ;

    nv.utils.windowResize(chart.update);

    return chart;
  });
</script>