Timeview d3 plugins preview

d3.timeview.js

(function() {

  d3.timeview = function() {
    var barHeight = 20,
      gap = barHeight + 4,
      width = 1160,
      height = 500,
      sidePadding = 200,
      dateFormat = d3.time.format("%Y-%m-%d");


    function timeview(a) {

      if(a instanceof Array) {
        a.each(__timeview);
      } else {
        d3.select(this).each(__timeview);
      }

    }

    function __timeview(d) {
      var ele = d3.select(this),
        _data = (typeof(data) === "function" ? data(d) : data),
        height = (typeof(height) === "function" ? height(d) : gap * _data.nodes.length + 60),
        x = d3.time.scale()
          .domain([
            d3.min(_data.nodes, function (d) { return dateFormat.parse(d.startDate); }),
            d3.max(_data.nodes, function (d) { return dateFormat.parse(d.endDate); })
          ])
          .range([width * 0.10, width - 240]);

      // Append the main svg
      var svg = ele.append('div')
        .attr('class', 'gantt')
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      var svgHeader = ele.append('div')
        .attr('class', 'ganttHeader')
        .append("svg")
        .attr("width", width)
        .attr("height", 60);

      createGrid();
      createHeader();
      createProjects();
      createLegend();
      todayLine();

      function createGrid() {
        var xAxis = d3.svg.axis()
          .scale(x)
          .orient('top')
          .ticks(d3.time.months)
          .tickSize(-height, 1, 0)
          .tickFormat(d3.time.format("%m/%y"));

        var grid = svg.append('g')
          .attr('class', 'grid')
          .attr('transform', 'translate(' + sidePadding + ', ' + 0 + ')')
          .call(xAxis).selectAll("text")
          .style("text-anchor", "start")
          .attr("fill", "#000")
          .attr("stroke", "none")
          .attr("font-size", 10)
          .attr("dy", 20)
          .attr("dx", -50)
          .attr("transform", "rotate(-70)");
      }
      function createHeader() {

        var xAxis = d3.svg.axis()
          .scale(x)
          .orient('top')
          .ticks(d3.time.months)
          .tickSize(-60, 0, 0)
          .tickFormat(d3.time.format("%m/%y"));

        svgHeader.append('rect')
          .attr('width', width)
          .attr('height', 60)
          .attr('fill', 'white');

        svgHeader.append('g')
          .attr('class', 'header')
          .attr('transform', 'translate(' + sidePadding + ', ' + 0 + ')')
          .call(xAxis).selectAll("text")
          .style("text-anchor", "start")
          .attr("fill", "#000")
          .attr("stroke", "none")
          .attr("font-size", 10)
          .attr("dy", 20)
          .attr("dx", -50)
          .attr("transform", "rotate(-70)");

      }
      function createProjects() {

        // Group each project.
        var rectangles = svg.append('g')
          .attr("transform", function (d, i) {
            return "translate(" + sidePadding + "," + 60 + ")";
          })
          .selectAll("rect")
          .data(_data.nodes)
          .enter().append('g')
          .attr("transform", function (d, i) {
            return "translate(" + 0 + "," + (i * gap + 2) + ")";
          });

        // Total box.
        rectangles.append("rect")
          .attr("x", function (d) {
            return x(dateFormat.parse(d.startDate));
          })
          .attr("width", function (d) {
            return x(dateFormat.parse(d.endDate)) - x(dateFormat.parse(d.startDate));
          })
          .attr("height", barHeight)
          .attr("fill", '#FF8080');

        // Progress box on project total box.
        rectangles.append('rect')
          .attr("x", function (d) {
            return x(dateFormat.parse(d.startDate));
          })
          .attr("width", 0)
          .attr("height", barHeight)
          .attr("fill", '#99CCFF')
          .transition()
          .duration(1000)
          .attr('width', function (d) {
            var total = x(dateFormat.parse(d.endDate)) - x(dateFormat.parse(d.startDate));
            var ratio = d.real / d.planed;

            if ((d.real / d.planed) > 1) {
              ratio = 1
            }

            return ratio * total;
          });


        // Progress text after total box.
        rectangles.append('text')
          .attr('y', 15)
          .attr('x', function (d) {
            return x(dateFormat.parse(d.startDate)) + (x(dateFormat.parse(d.endDate)) - (x(dateFormat.parse(d.startDate))) + 5);
          })
          .attr('fill', 'black')
          .attr('font-size', 11)
          .attr('font-weight', 'bold')
          .text(function (d) {
            return Math.round(d.real / d.planed * 100) + '%';
          });
      }
      function createLegend() {

        // Append Even and Odd background for each project.
        var legend = svg.append("g")
          .attr('transform', 'translate(' + 3 + ', ' + 60 + ')')
          .selectAll("rect")
          .data(_data.nodes)
          .enter().append('g');

        legend.append("rect")
          .attr("x", 0)
          .attr("y", function (d, i) {
            return i * gap;
          })
          .attr("width", function () {
            return width - 6;
          })
          .attr("height", gap)
          .attr("stroke", "none")
          .attr("fill", function (d, i) {
            return i % 2 !== 0 ? 'white' : '#7F7F7F';
          })
          .attr("opacity", 0.2);

        // Name of project.
        legend.append("text")
          .text(function (d) {
            return d.name;
          })
          .attr("x", 10)
          .attr("y", function (d, i) {
            return i * gap + 16;
          })
          .attr("font-size", 11)
          .attr("text-anchor", "start")
          .attr("text-height", 14)
          .attr("fill", 'black');
      }
      function todayLine() {
        svg.append("line")
          .attr("x1", function () {
            var today = new Date();

            return x(today) + sidePadding;
          })
          .attr("y1", 0)
          .attr("x2", function () {
            var today = new Date();

            return x(today) + sidePadding;
          })
          .attr("y2", this.h)
          .style("stroke", '#1F8F1F');
      }

    }

    timeview.data = function(_) {
      if (!arguments.length) return data;
      data = _;
      return timeview;
    };

    timeview.width = function(_) {
      if (!arguments.length) return width;
      width = _;
      return timeview;
    };

    return timeview;
  };

})();

index.html

<!DOCTYPE html>
<html>
	<head>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script type="text/javascript"src="d3.timeview.js"></script>
    
    <style>
    .box {
      position: relative;
      padding-bottom: 3px;
    }

    .legend {
      font-size: 12px;
    }

    .gantt {
      height: 510px;
      overflow-y: auto;
    }
    
    .ganttHeader {
      height: 60px;
      position: absolute;
      top: 0;
    }
    </style>
  </head>
  <body>

    <div class="box"></div>
    
    <script type="text/javascript"src="init.js"></script>
	
  </body>
</html>

init.js

var data = {
  config: {
    sortBy: 'time'
  },
  nodes: [
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Vigie des marchés et produits',
      startDate: '2014-02-02',
      endDate: '2014-10-02',
      planed: 64,
      real: 16
    },
    {
      name: 'Support en continu aux ventes',
      startDate: '2013-02-02',
      endDate: '2014-03-02',
      planed: 32,
      real: 16
    },
    {
      name: 'Support en continu à la commercialisation',
      startDate: '2014-01-02',
      endDate: '2014-04-02',
      planed: 10,
      real: 16
    },
    {
      name: 'Rencontre équipe',
      startDate: '2014-01-02',
      endDate: '2014-03-02',
      planed: 300,
      real: 200
    },
    {
      name: 'Rencontre de revue de dossier',
      startDate: '2013-06-02',
      endDate: '2014-02-12',
      planed: 64,
      real: 58
    },
    {
      name: 'Administratif',
      startDate: '2014-05-02',
      endDate: '2014-06-08',
      planed: 64,
      real: 0
    },
    {
      name: 'Présentation des dossiers aux divers comités décisionnels',
      startDate: '2014-04-02',
      endDate: '2014-12-08',
      planed: 64,
      real: 0
    },
    {
      name: 'Comités multisecteurs des gammes',
      startDate: '2013-04-02',
      endDate: '2014-05-08',
      planed: 64,
      real: 58
    },
    {
      name: 'Demandes ponctuelles/entretien',
      startDate: '2013-01-02',
      endDate: '2014-02-08',
      planed: 64,
      real: 58
    },
    {
      name: 'Stratégie de tarification des fonds',
      startDate: '2014-04-02',
      endDate: '2014-04-32',
      planed: 2,
      real: 58
    },
    {
      name: 'Tarification des régimes',
      startDate: '2014-01-02',
      endDate: '2014-10-08',
      planed: 64,
      real: 32
    },
    {
      name: 'Diagnostic REEE',
      startDate: '2014-10-02',
      endDate: '2014-12-30',
      planed: 64,
      real: 0
    },
    {
      name: 'Évolution des régimes fiscaux (Fiducie) demande ad hoc',
      startDate: '2014-01-02',
      endDate: '2014-02-08',
      planed: 64,
      real: 58
    },
    {
      name: 'Bulletins (Info Fonds, Réalisez-vous, Focus, Expertise, etc.)',
      startDate: '2014-05-02',
      endDate: '2014-10-08',
      planed: 64,
      real: 0
    },
    {
      name: 'Bulletins (Info Fonds, Réalisez-vous, Focus, Expertise, etc.)',
      startDate: '2014-05-02',
      endDate: '2014-10-08',
      planed: 64,
      real: 0
    },
    {
      name: 'Bulletins (Info Fonds, Réalisez-vous, Focus, Expertise, etc.)',
      startDate: '2014-05-02',
      endDate: '2014-10-08',
      planed: 64,
      real: 0
    },
    {
      name: 'Bulletins (Info Fonds, Réalisez-vous, Focus, Expertise, etc.)',
      startDate: '2014-05-02',
      endDate: '2014-10-08',
      planed: 64,
      real: 0
    },
    {
      name: 'Bulletins (Info Fonds, Réalisez-vous, Focus, Expertise, etc.)',
      startDate: '2014-01-02',
      endDate: '2015-02-08',
      planed: 44,
      real: 33
    }
  ]
};

var chart = d3.timeview()
  .data(data).width(960);

d3.select('.box').call(chart);