mathfur/gantt_chart.html

## gantt_chart.html
<!DOCTYPE html>
<!--
このファイルと同一のディレクトリに
ガントチャート表示したいスケジュールを書いたschedule.csvを置いてブラウザで開く。
表示開始日時、表示終了日時を変更したい場合は下記のstart_time, end_timeを書き換える。
TODO: 月末・月初に使うことを想定していないので修正する

== schedule.csvの例(完了/未完了をoxで書く,開始(日+時刻),完了(日+時刻),スケジュール名 ==
complete,start,end,title
x,28 17:06,,チケット#1234の消化
o,27 13:16,28 14:00,機能Aの作成
-->
<meta charset="utf-8">
<style>
svg path {
  fill: none;
  stroke: black;
  stroke-width; 1;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<script>
var start_time = toDate("27 05:00");
var end_time   = toDate("29 15:00");

function toDate(time_str){
  return (new Date(Date.parse("1970/1/" + time_str)));
}

var margin = {top: 15, right: 10, bottom: 10, left: 15},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

var base = svg.append("g")
              .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

d3.csv("schedule.csv", function(data){
  var xScale = d3.time.scale().domain([start_time, end_time]).range([margin.left, width + margin.left]);
  var yScale = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([margin.top, height + margin.top]);
  var current_date = toDate((new Date()).getDate() + " " + (new Date()).getHours() + ":" + (new Date()).getMinutes());
  var font_size = 11;

  var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("top")
                .ticks(10);

  var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(5);

  var color = d3.scale.category20();
  var eps = 10;

  base.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0, " + margin.top + ")")
      .call(xAxis);

  base.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + margin.left + ", 0)")
      .call(yAxis);

  base.selectAll("rect.schedule")
     .data(data)
     .enter()
     .append("rect")
     .attr("width", function(d){
       if(d.start && d.end){
          return xScale(toDate(d.end)) - xScale(toDate(d.start));
       }else if(d.start && !d.end){
          return xScale(current_date) - xScale(toDate(d.start));
       }else{
          return eps;
       }
     })
     .attr("height", height / data.length)
     .attr("fill", function(d){ return (d.complete == "o") ? "#eee" : color(d.title) })
     .call(setX)
     .attr("y", function(d, i){ return yScale(i) });

  base.selectAll("text.label")
     .data(data)
     .enter()
     .append("text")
     .attr("text-anchor", "start")
     .attr("font-size", font_size)
     .attr("fill", function(d){ return (d.complete == "o") ? "#aaa" : "#000000" })
     .call(setX)
     .attr("y", function(d, i){ return yScale(i) + font_size })
     .text(function(d){ return d.title });

  function setX(){
     this.attr("x", function(d){
       if(d.start){
         return xScale(toDate(d.start));
       }else{
         return xScale(start_time);
       }
     })
  }
});
</script>
</body>

## schedule.csv

          
            complete
            start
            end
            title

            
              x
              28 17:06
              
              チケット#1234の消化

            
              o
              27 13:16
              28 14:00
              機能Aの作成
	<!DOCTYPE html>
	<!--
	このファイルと同一のディレクトリに
	ガントチャート表示したいスケジュールを書いたschedule.csvを置いてブラウザで開く。
	表示開始日時、表示終了日時を変更したい場合は下記のstart_time, end_timeを書き換える。
	TODO: 月末・月初に使うことを想定していないので修正する

	== schedule.csvの例(完了/未完了をoxで書く,開始(日+時刻),完了(日+時刻),スケジュール名 ==
	complete,start,end,title
	x,28 17:06,,チケット#1234の消化
	o,27 13:16,28 14:00,機能Aの作成
	-->
	<meta charset="utf-8">
	<style>
	svg path {
	fill: none;
	stroke: black;
	stroke-width; 1;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<body>
	<script>
	var start_time = toDate("27 05:00");
	var end_time = toDate("29 15:00");

	function toDate(time_str){
	return (new Date(Date.parse("1970/1/" + time_str)));
	}

	var margin = {top: 15, right: 10, bottom: 10, left: 15},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	var base = svg.append("g")
	.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

	d3.csv("schedule.csv", function(data){
	var xScale = d3.time.scale().domain([start_time, end_time]).range([margin.left, width + margin.left]);
	var yScale = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([margin.top, height + margin.top]);
	var current_date = toDate((new Date()).getDate() + " " + (new Date()).getHours() + ":" + (new Date()).getMinutes());
	var font_size = 11;

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("top")
	.ticks(10);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);

	var color = d3.scale.category20();
	var eps = 10;

	base.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0, " + margin.top + ")")
	.call(xAxis);

	base.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + margin.left + ", 0)")
	.call(yAxis);

	base.selectAll("rect.schedule")
	.data(data)
	.enter()
	.append("rect")
	.attr("width", function(d){
	if(d.start && d.end){
	return xScale(toDate(d.end)) - xScale(toDate(d.start));
	}else if(d.start && !d.end){
	return xScale(current_date) - xScale(toDate(d.start));
	}else{
	return eps;
	}
	})
	.attr("height", height / data.length)
	.attr("fill", function(d){ return (d.complete == "o") ? "#eee" : color(d.title) })
	.call(setX)
	.attr("y", function(d, i){ return yScale(i) });

	base.selectAll("text.label")
	.data(data)
	.enter()
	.append("text")
	.attr("text-anchor", "start")
	.attr("font-size", font_size)
	.attr("fill", function(d){ return (d.complete == "o") ? "#aaa" : "#000000" })
	.call(setX)
	.attr("y", function(d, i){ return yScale(i) + font_size })
	.text(function(d){ return d.title });

	function setX(){
	this.attr("x", function(d){
	if(d.start){
	return xScale(toDate(d.start));
	}else{
	return xScale(start_time);
	}
	})
	}
	});
	</script>
	</body>
complete	start	end	title
x	28 17:06		チケット#1234の消化
o	27 13:16	28 14:00	機能Aの作成