dk8996/example.css

## example.css
html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
}

.chart {
	font-family: Arial, sans-serif;
	font-size: 12px;
}

.axis path,.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.bar {
	fill: #33b5e5;
}

.bar-failed {
	fill: #CC0000;
}

.bar-running {
	fill: #669900;
}

.bar-succeeded {
	fill: #33b5e5;
}

.bar-killed {
	fill: #ffbb33;
}

#forkme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 5px;
	z-index: 10;
	padding: 10px 40px 10px 5px;
	color: #fff;
	background:
		url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png')
		#0090ff no-repeat 95% 50%;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	text-decoration: none;
}

#twittme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 180px;
	z-index: 10;
	padding: 10px 40px 10px 5px;
	color: #fff;
	background:
		url('http://dk8996.github.io/Gantt-Chart/images/twitter.png')
		#0090ff no-repeat 95% 50%;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	text-decoration: none;
}

## example3.js
var tasks = [
{"startDate":new Date("Sun Dec 09 01:36:45 EST 2012"),"endDate":new Date("Sun Dec 09 02:36:45 EST 2012"),"taskName":"E Job","status":"RUNNING"}];

var taskStatus = {
    "SUCCEEDED" : "bar",
    "FAILED" : "bar-failed",
    "RUNNING" : "bar-running",
    "KILLED" : "bar-killed"
};

var taskNames = [ "D Job", "P Job", "E Job", "A Job", "N Job" ];

tasks.sort(function(a, b) {
    return a.endDate - b.endDate;
});
var maxDate = tasks[tasks.length - 1].endDate;
tasks.sort(function(a, b) {
    return a.startDate - b.startDate;
});
var minDate = tasks[0].startDate;

var format = "%H:%M";
var timeDomainString = "1day";

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format).height(450).width(800);


gantt.timeDomainMode("fixed");
changeTimeDomain(timeDomainString);

gantt(tasks);

function changeTimeDomain(timeDomainString) {
    this.timeDomainString = timeDomainString;
    switch (timeDomainString) {
    case "1hr":
	format = "%H:%M:%S";
	gantt.timeDomain([ d3.time.hour.offset(getEndDate(), -1), getEndDate() ]);
	break;
    case "3hr":
	format = "%H:%M";
	gantt.timeDomain([ d3.time.hour.offset(getEndDate(), -3), getEndDate() ]);
	break;

    case "6hr":
	format = "%H:%M";
	gantt.timeDomain([ d3.time.hour.offset(getEndDate(), -6), getEndDate() ]);
	break;

    case "1day":
	format = "%H:%M";
	gantt.timeDomain([ d3.time.day.offset(getEndDate(), -1), getEndDate() ]);
	break;

    case "1week":
	format = "%a %H:%M";
	gantt.timeDomain([ d3.time.day.offset(getEndDate(), -7), getEndDate() ]);
	break;
    default:
	format = "%H:%M"

    }
    gantt.tickFormat(format);
    gantt.redraw(tasks);
}

function getEndDate() {
    var lastEndDate = Date.now();
    if (tasks.length > 0) {
	lastEndDate = tasks[tasks.length - 1].endDate;
    }

    return lastEndDate;
}

function addTask() {

    var lastEndDate = getEndDate();
    var taskStatusKeys = Object.keys(taskStatus);
    var taskStatusName = taskStatusKeys[Math.floor(Math.random() * taskStatusKeys.length)];
    var taskName = taskNames[Math.floor(Math.random() * taskNames.length)];

    tasks.push({
	"startDate" : d3.time.hour.offset(lastEndDate, Math.ceil(1 * Math.random())),
	"endDate" : d3.time.hour.offset(lastEndDate, (Math.ceil(Math.random() * 3)) + 1),
	"taskName" : taskName,
	"status" : taskStatusName
    });

    changeTimeDomain(timeDomainString);
    gantt.redraw(tasks);
};

function removeTask() {
    tasks.pop();
    changeTimeDomain(timeDomainString);
    gantt.redraw(tasks);
};

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Gantt Chart Example 3</title>
<link type="text/css" href="http://mbostock.github.io/d3/style.css" rel="stylesheet" />
<link type="text/css" href="example.css" rel="stylesheet" />
</head>
<body>
        <a id="forkme_banner" href="http://dk8996.github.io/Gantt-Chart/" target="_blank">View on GitHub</a>
	<a id="twittme_banner"
		href="https://twitter.com/intent/tweet?hashtags=d3&original_referer=http%3A%2F%2Fdk8996.github.io%2FGantt-Chart%2F&text=D3%20Gantt%20Chart&tw_p=tweetbutton&url=http%3A%2F%2Fdk8996.github.com%2FGantt-Chart&screen_name=dk8996" target="_blank">Share on Twitter</a>
	<button type="button" onclick="addTask()">Add Task</button>
	<button type="button" onclick="removeTask()">Remove Task</button>
	<button type="button" onclick="changeTimeDomain('1hr')">1 HR</button>
	<button type="button" onclick="changeTimeDomain('3hr')">3 HR</button>
	<button type="button" onclick="changeTimeDomain('6hr')">6 HR</button>
        <button type="button" onclick="changeTimeDomain('1day')">1 DAY</button>
        <button type="button" onclick="changeTimeDomain('1week')">1 WEEK</button>
</body>
</html>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script>
	<script type="text/javascript" src="example3.js"></script>
	html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
	}

	.chart {
	font-family: Arial, sans-serif;
	font-size: 12px;
	}

	.axis path,.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	fill: #33b5e5;
	}

	.bar-failed {
	fill: #CC0000;
	}

	.bar-running {
	fill: #669900;
	}

	.bar-succeeded {
	fill: #33b5e5;
	}

	.bar-killed {
	fill: #ffbb33;
	}

	#forkme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 5px;
	z-index: 10;
	padding: 10px 40px 10px 5px;
	color: #fff;
	background:
	url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png')
	#0090ff no-repeat 95% 50%;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	text-decoration: none;
	}

	#twittme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 180px;
	z-index: 10;
	padding: 10px 40px 10px 5px;
	color: #fff;
	background:
	url('http://dk8996.github.io/Gantt-Chart/images/twitter.png')
	#0090ff no-repeat 95% 50%;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	text-decoration: none;
	}
	var tasks = [
	{"startDate":new Date("Sun Dec 09 01:36:45 EST 2012"),"endDate":new Date("Sun Dec 09 02:36:45 EST 2012"),"taskName":"E Job","status":"RUNNING"}];

	var taskStatus = {
	"SUCCEEDED" : "bar",
	"FAILED" : "bar-failed",
	"RUNNING" : "bar-running",
	"KILLED" : "bar-killed"
	};

	var taskNames = [ "D Job", "P Job", "E Job", "A Job", "N Job" ];

	tasks.sort(function(a, b) {
	return a.endDate - b.endDate;
	});
	var maxDate = tasks[tasks.length - 1].endDate;
	tasks.sort(function(a, b) {
	return a.startDate - b.startDate;
	});
	var minDate = tasks[0].startDate;

	var format = "%H:%M";
	var timeDomainString = "1day";

	var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format).height(450).width(800);


	gantt.timeDomainMode("fixed");
	changeTimeDomain(timeDomainString);

	gantt(tasks);

	function changeTimeDomain(timeDomainString) {
	this.timeDomainString = timeDomainString;
	switch (timeDomainString) {
	case "1hr":
	format = "%H:%M:%S";
	gantt.timeDomain([ d3.time.hour.offset(getEndDate(), -1), getEndDate() ]);
	break;
	case "3hr":
	format = "%H:%M";
	gantt.timeDomain([ d3.time.hour.offset(getEndDate(), -3), getEndDate() ]);
	break;

	case "6hr":
	format = "%H:%M";
	gantt.timeDomain([ d3.time.hour.offset(getEndDate(), -6), getEndDate() ]);
	break;

	case "1day":
	format = "%H:%M";
	gantt.timeDomain([ d3.time.day.offset(getEndDate(), -1), getEndDate() ]);
	break;

	case "1week":
	format = "%a %H:%M";
	gantt.timeDomain([ d3.time.day.offset(getEndDate(), -7), getEndDate() ]);
	break;
	default:
	format = "%H:%M"

	}
	gantt.tickFormat(format);
	gantt.redraw(tasks);
	}

	function getEndDate() {
	var lastEndDate = Date.now();
	if (tasks.length > 0) {
	lastEndDate = tasks[tasks.length - 1].endDate;
	}

	return lastEndDate;
	}

	function addTask() {

	var lastEndDate = getEndDate();
	var taskStatusKeys = Object.keys(taskStatus);
	var taskStatusName = taskStatusKeys[Math.floor(Math.random() * taskStatusKeys.length)];
	var taskName = taskNames[Math.floor(Math.random() * taskNames.length)];

	tasks.push({
	"startDate" : d3.time.hour.offset(lastEndDate, Math.ceil(1 * Math.random())),
	"endDate" : d3.time.hour.offset(lastEndDate, (Math.ceil(Math.random() * 3)) + 1),
	"taskName" : taskName,
	"status" : taskStatusName
	});

	changeTimeDomain(timeDomainString);
	gantt.redraw(tasks);
	};

	function removeTask() {
	tasks.pop();
	changeTimeDomain(timeDomainString);
	gantt.redraw(tasks);
	};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Gantt Chart Example 3</title>
	<link type="text/css" href="http://mbostock.github.io/d3/style.css" rel="stylesheet" />
	<link type="text/css" href="example.css" rel="stylesheet" />
	</head>
	<body>
	<a id="forkme_banner" href="http://dk8996.github.io/Gantt-Chart/" target="_blank">View on GitHub</a>
	<a id="twittme_banner"
	href="https://twitter.com/intent/tweet?hashtags=d3&original_referer=http%3A%2F%2Fdk8996.github.io%2FGantt-Chart%2F&text=D3%20Gantt%20Chart&tw_p=tweetbutton&url=http%3A%2F%2Fdk8996.github.com%2FGantt-Chart&screen_name=dk8996" target="_blank">Share on Twitter</a>
	<button type="button" onclick="addTask()">Add Task</button>
	<button type="button" onclick="removeTask()">Remove Task</button>
	<button type="button" onclick="changeTimeDomain('1hr')">1 HR</button>
	<button type="button" onclick="changeTimeDomain('3hr')">3 HR</button>
	<button type="button" onclick="changeTimeDomain('6hr')">6 HR</button>
	<button type="button" onclick="changeTimeDomain('1day')">1 DAY</button>
	<button type="button" onclick="changeTimeDomain('1week')">1 WEEK</button>
	</body>
	</html>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script>
	<script type="text/javascript" src="example3.js"></script>