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-red {
	fill: #CC0000;
}

.bar-green {
	fill: #669900;
}

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

.bar-yellow {
	fill: #ffbb33;
}

#forkme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 10;
	padding: 10px 50px 10px 10px;
	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 50px 10px 10px;
	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;
}

## example.js
example();

function example() {
    var tasks = [];

    var taskStatus = {
	"Bill Johnson" : "bar",
	"Joe Johnson" : "bar-red",
    };

    d3.json("https://gist.github.com/dk8996/5835282/raw/5e134fdd60234fc96222c8b22548670c532a479f/example.json", function(error, json) {
	if (error)
	    return console.warn(error);
	var taskNames = [];
	for ( var i = 0; i < json.length; i++) {
	    for ( var j = 0; j < json[i].values.length; j++) {
		var role = json[i].values[j]["Role"];
		var company = json[i].values[j]["Company"];
		var roleAndCompany = role + "(" + company + ")";
		var name = json[i]["name"];
		taskNames.push(roleAndCompany);
		tasks.push({
		    "startDate" : new Date(json[i].values[j]["from date"]),
		    "endDate" : new Date(json[i].values[j]["to date"]),
		    "taskName" : roleAndCompany,
		    "status" : name
		});
	    }
	}
	var format = "%b-%e-%y";
	var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);
	gantt(tasks);
    });

};


## example.json
[
{ "name" : "Joe Johnson"
, "values": [
{
"from date": "jan-2000"
, "to date": "jun-2002"
, "Role": "VP of Product"
, "Company": "A Company"

},
{
"from date": "jun-2002"
, "to date": "apr-2004"
, "Role": "CEO"
, "Company": "B Company"

}
,
{
"from date": "apr-2004"
, "to date": "jun-2013"
, "Role": "CEO"
, "Company": "C Company"

}]
},

{ "name" : "Bill Johnson"
, "values": [
{
"from date": "jan-2001"
, "to date": "jun-2005"
, "Role": "VP of Product"
, "Company": "C Company"

},
{
"from date": "jun-2005"
, "to date": "july-2006"
, "Role": "CEO"
, "Company": "D Company"

}
,
{
"from date": "july-2006"
, "to date": "jun-2013"
, "Role": "CEO"
, "Company": "A Company"

}]
}

]

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Gantt Chart External Data Example</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>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v21.js"></script>
	<script type="text/javascript" src="example.js"></script>
</body>
</html>
	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-red {
	fill: #CC0000;
	}

	.bar-green {
	fill: #669900;
	}

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

	.bar-yellow {
	fill: #ffbb33;
	}

	#forkme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 10;
	padding: 10px 50px 10px 10px;
	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 50px 10px 10px;
	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;
	}
	example();

	function example() {
	var tasks = [];

	var taskStatus = {
	"Bill Johnson" : "bar",
	"Joe Johnson" : "bar-red",
	};

	d3.json("https://gist.github.com/dk8996/5835282/raw/5e134fdd60234fc96222c8b22548670c532a479f/example.json", function(error, json) {
	if (error)
	return console.warn(error);
	var taskNames = [];
	for ( var i = 0; i < json.length; i++) {
	for ( var j = 0; j < json[i].values.length; j++) {
	var role = json[i].values[j]["Role"];
	var company = json[i].values[j]["Company"];
	var roleAndCompany = role + "(" + company + ")";
	var name = json[i]["name"];
	taskNames.push(roleAndCompany);
	tasks.push({
	"startDate" : new Date(json[i].values[j]["from date"]),
	"endDate" : new Date(json[i].values[j]["to date"]),
	"taskName" : roleAndCompany,
	"status" : name
	});
	}
	}
	var format = "%b-%e-%y";
	var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);
	gantt(tasks);
	});

	};
	[
	{ "name" : "Joe Johnson"
	, "values": [
	{
	"from date": "jan-2000"
	, "to date": "jun-2002"
	, "Role": "VP of Product"
	, "Company": "A Company"

	},
	{
	"from date": "jun-2002"
	, "to date": "apr-2004"
	, "Role": "CEO"
	, "Company": "B Company"

	}
	,
	{
	"from date": "apr-2004"
	, "to date": "jun-2013"
	, "Role": "CEO"
	, "Company": "C Company"

	}]
	},

	{ "name" : "Bill Johnson"
	, "values": [
	{
	"from date": "jan-2001"
	, "to date": "jun-2005"
	, "Role": "VP of Product"
	, "Company": "C Company"

	},
	{
	"from date": "jun-2005"
	, "to date": "july-2006"
	, "Role": "CEO"
	, "Company": "D Company"

	}
	,
	{
	"from date": "july-2006"
	, "to date": "jun-2013"
	, "Role": "CEO"
	, "Company": "A Company"

	}]
	}

	]
	<!DOCTYPE html>
	<html>
	<head>
	<title>Gantt Chart External Data Example</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>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v21.js"></script>
	<script type="text/javascript" src="example.js"></script>
	</body>
	</html>