gantt chart d3.js

by vinodlouis

HTML

<script src="http://mbostock.github.com/d3/d3.v2.js"></script>

CSS

.chart {
	shape-rendering: crispEdges;
}

.mini text {
	font: 9px sans-serif;	
}

.main text {
	font: 12px sans-serif;	
}

.month text {
	text-anchor: start;
}

.todayLine {
	stroke: blue;
	stroke-width: 1.5;
}

.axis line, .axis path {
	stroke: black;
}

.miniItem {
	stroke-width: 6;	
}

.future {
	stroke: gray;
	fill: #ddd;
}

.past {
	stroke: green;
	fill: lightgreen;
}

.brush .extent {
	stroke: gray;
	fill: blue;
	fill-opacity: .165;
}

JavaScript

var RandomData = function() {

		var addToLane = function (chart, item) {
		    var name = item.lane;

		    if (!chart.lanes[name])
		        chart.lanes[name] = [];

		    var lane = chart.lanes[name];
		    
		    var sublane = 0;
		    while(isOverlapping(item, lane[sublane]))
		    	sublane++;

		    if (!lane[sublane]) {
		    	lane[sublane] = [];
			}
		    
		    lane[sublane].push(item);	
		};

		var isOverlapping = function(item, lane) {
			if (lane) {
		        for (var i = 0; i < lane.length; i++) {
		            var t = lane[i];
		            if (item.start < t.end && item.end > t.start) {
		                return true;                      
		            }
		        }
			}
		    return false;
		};

        var parseData = function (data) {
            var i = 0, length = data.length, node;
            chart = { lanes: {} };
            
            for (i; i < length; i++) {
                var item = data[i];

                addToLane(chart, item);


            }

            return collapseLanes(chart);
        };

        var collapseLanes = function (chart) {
        	var lanes = [], items = [], laneId = 0;
        	var now = new Date();

        	for (var laneName in chart.lanes) {
        		var lane = chart.lanes[laneName];

        		for (var i = 0; i < lane.length; i++) {
        			var subLane = lane[i];

        			lanes.push({
	        			id: laneId, 
	        			label: i === 0 ? laneName : ''
	        		});

	        		for (var j = 0; j < subLane.length; j++) {
	        			var item = subLane[j];

	        			items.push({
	        				id: item.id,
	        				lane: laneId,
	        				start: item.start,
	        				end: item.end,
	        				class: item.end > now ? 'future' : 'past',
	        				desc: item.desc
	        			});
	        		}

	        		laneId++;
        		}
        	}

        	return {lanes: lanes, items: items};
        }

		var randomNumber = function(min, max) {
			return Math.floor(Math.random(0, 1) * (max -...