Gantt Chart

var data = [
  { "start": "4/1/2015 9:00:00", "end": "4/1/2015 9:30:00", "task": "Planning" },
  { "start": "4/1/2015 9:30:00", "end": "4/1/2015 10:30:00", "task": "Development" },
  { "start": "4/1/2015 10:30:00", "end": "4/1/2015 10:45:00", "task": "QE" }
];

var colorScale = new Plottable.Scales.Color();

var xScale = new Plottable.Scales.Time();
var xAxis = new Plottable.Axes.Time(xScale, "bottom");

var yScale = new Plottable.Scales.Category();
var yAxis = new Plottable.Axes.Category(yScale, "left");

var plot = new Plottable.Plots.Rectangle()
  .x(function(d) { return new Date(d.start); }, xScale)
  .x2(function(d) { return new Date(d.end); })
  .y(function(d) { return d.task; }, yScale)
  .attr("fill", function(d) { return d.task; }, colorScale)
  .addDataset(new Plottable.Dataset(data));

var chart = new Plottable.Components.Table([
  [yAxis, plot],
  [null, xAxis]
]);

chart.renderTo("svg#example");