<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>

</style>

<body>


  <script src="../lib/d3.v2.js"></script>
  <script src="../nv.d3.js"></script>
  <script>

    function ilog(text) {
      console.log(text);
      return text;
    }


  function daysInMonth(month,year) {
    var m = [31,28,31,30,31,30,31,31,30,31,30,31];
    if (month != 2) return m[month - 1];
    if (year%4 != 0) return m[1];
    if (year%100 == 0 && year%400 != 0) return m[1];
    return m[1] + 1;
  }


  function d3_time_range(floor, step, number) {
    return function(t0, t1, dt) {
      var time = floor(t0), times = [];
      if (time < t0) step(time);
      if (dt > 1) {
        while (time < t1) {
          var date = new Date(+time);
          if (!(number(date) % dt)) times.push(date);
          step(time);
        }
      } else {
        while (time < t1) times.push(new Date(+time)), step(time);
      }
      return times;
    };
  }


  d3.time.monthEnd = function(date) {
    return new Date(date.getFullYear(), date.getMonth(), 0);
  };


  d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
      date.setUTCDate(date.getUTCDate() + 1);
      date.setDate(daysInMonth(date.getMonth() + 1, date.getFullYear()));
    }, function(date) {
      return date.getMonth();
    }
  );


  var margin = {top: 10, right: 40, bottom: 40, left: 40},
      width = 960 - margin.left - margin.right,
      height = 80 - margin.top - margin.bottom;

  var x = d3.time.scale()
      .domain([new Date(2010, 0, 1), new Date(2011, 0, 1)])
      .range([0, width]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      //.ticks(d3.time.months)
      .ticks(d3.time.monthEnds)
      //.tickSubdivide(3)
      .tickSize(8, 4, 0)
      .tickFormat(d3.time.format("%x"));
      //.tickFormat(d3.time.format("%B"));

  var svg = d3.select("body").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 + ")");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)

    .selectAll("text")
      .attr("text-anchor", "middle")
      //.attr("text-anchor", "start")
      .attr("x", 0)
      .attr("y", 12);

  </script>