version with arrow and labels

by karolinka

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.6.1/plottable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.11.0/plottable.min.js"></script>
  <svg id="example"></svg>

CSS

html, body {
    width:100%;
    height:50%;
    margin-top:25%;
    padding: 0;
    font-family: 'Tahoma'
}

JavaScript

function datePeriod(d1,d2,d3,d4){
   
    var data = [
      { "start": d1, "end": d2, "task": "Benchmarking" },
      { "start": d2, "end": d3, "task": "Implementation" },
      { "start": d3, "end": d4, "task": "Evaluation" }
    ];
    
    var currentPos = new Date();
    var arrowPosition = [
        {"x": currentPos, "y":1}
    ];
   
    var currentTime = new Date();
    
        if (new Date() < d1 ) {
        data[0].start = currentTime;
	} else if (new Date() > d4 ) {
        arrowPosition[0].x = d4;
	} else {
		arrowPosition[0].x = currentTime;
	}
    var domain = [new Date() < new Date(d1) ? new Date() : new Date(d1), new Date(d4)];
    var dur = domain[1].getTime() - domain[0].getTime();
    
    domain[0] = new Date(domain[0].getTime() - dur * 0.1);
    domain[1] = new Date(domain[1].getTime() + dur * 0.1);
    var colorScale = new Plottable.Scales.Color();
    var yScale = new Plottable.Scales.Category();
    var xScale = new Plottable.Scales.Time()
    	.domain(domain);
    var xScaleArrow = new Plottable.Scales.Time();
    var yScaleArrow = new Plottable.Scales.Category();
   
    var xAxis = new Plottable.Axes.Time(xScale, "bottom")
	
    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); }, xScale)
		.y(function(d) { return 1 }, yScale)
    	.attr("fill", function(d) { return d.task; }, colorScale)
    	.labelsEnabled(true)
      	.label(function(d) { return d.task})
    	.addDataset(new Plottable.Dataset(data));
   
    var arrow = new Plottable.Plots.Scatter()
  		.x(function(d) { return d.x; }, xScale)
  		.y(function(d) { return d.y; }, yScaleArrow)
        .symbol(function(d) { return new Plottable.SymbolFactories.triangleDown() })
        .size(20).attr("fill", "black")
        .addDataset(new Plottable.Dataset(arrowPosition));

   var chart = new Plottable.Components.Table([
     ...