Base Plottable JSFiddle

by bluong63

HTML

<link rel="stylesheet" href="https://rawgithub.com/palantir/plottable/develop/plottable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<svg id="svg" width="500" height="500"/>

JavaScript

var timeScale = new Plottable.Scales.Time().domain([new Date(2015, 0), new Date(2015, 11, 31)]);
  var timeAxis = new Plottable.Axes.Time(timeScale, "bottom");

  var today = new Date();
  var laborDay = new Date(2015, 8, 7);
  timeAxis.annotationsEnabled(true);
  timeAxis.annotatedTicks([today, laborDay, new Date(2015, 4, 17), new Date(2015, 2, 17), new Date(2015, 5, 1)]);
  timeAxis.annotationTierCount(2);
  timeAxis.margin(100);
  timeAxis.annotationFormatter(function(d) {
    if (d === laborDay) {
      return "Labor Day";
    } else {
      return Plottable.Formatters.time("%b %d")(d);
    }
  });
  timeAxis.renderTo("#svg");