DavidWells · February 19, 2022 18:04
diff --git a/super-simple-gantt-chart.html b/super-simple-gantt-chart.html
 <html>
 <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    const DEFAULT_ACTIVITY_TIME_IN_DAYS = 14

    google.charts.load('current', { 'packages': ['gantt'] })
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }
    function toMilliseconds(minutes) {
      return minutes * 60 * 1000;
    }

    function addTwoWeeks(date) {
      var currentTime = new Date(date);
      currentTime.setDate(currentTime.getDate() + DEFAULT_ACTIVITY_TIME_IN_DAYS);
      return currentTime
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      function date(month, day, year = 2020) {
        const m = month - 1
        return new Date(year, m, day)
      }

      const activities = [
        {
          id: 'Product',
          title: 'Product work',
          people: 'Jimbo',
          startDate: date(3, 20),
          endDate: date(3, 30),
          percentDone: 90,
          dependencies: []
        },
        {
          id: 'Design',
          title: 'Design work',
          people: 'Joe',
          startDate: date(3, 30),
          endDate: date(4, 12),
          percentDone: 20,
          dependencies: ['Product']
        },
        {
          id: 'Backend',
          title: 'Backend work',
          people: 'Steve',
          startDate: date(4, 12),
          endDate: date(4, 25),
          percentDone: 0,
          dependencies: ['Design']
        },
        {
          id: 'Frontend',
          title: 'Frontend work',
          people: 'Bob',
          startDate: date(4, 12),
          duration: 14,
          percentDone: 0,
          dependencies: ['Design']
        },
        {
          id: 'Marketing',
          title: 'Marketing work',
          people: 'Jill',
          startDate: date(4, 20),
          endDate: date(4, 30),
          percentDone: 0,
          dependencies: ['Frontend', 'Backend']
        }
      ]

      let prevStartDate
      let prevEndDate
      activities.forEach((action) => {
        const deps = (action.dependencies || []).join(',')
        const startDate = action.startDate || prevEndDate
        let endDate
        let duration
        if (action.duration) {
          duration = daysToMilliseconds(action.duration)
        } else {
          endDate = action.endDate || addTwoWeeks(startDate)
        }
        data.addRows([
          [action.id, action.title, action.people, startDate, endDate, duration, action.percentDone, deps]
         ])
        // attach previous times
        prevStartDate = startDate
        prevEndDate = endDate
      })

      // ['ID', 'TITLE', 'RESOURCE NAME', 'DATE1', 'DATE2', 'DURATIONIFNODATES?', 'PERCENTDONE', 'Dependencies'
      // data.addRows([
      //   ['Product_id', 'Product', 'David',
      //    new Date(2020, 2, 20), new Date(2020, 2, 30), null, 90, null],
      //   ['Design_id', 'Design', 'Bill',
      //    new Date(2020, 2, 30), new Date(2020, 3, 12), null, 20, 'Product_id'],
      //   ['Backend_id', 'Backend', 'Steve',
      //    new Date(2020, 3, 12), new Date(2020, 3, 25), null, 0, 'Design_id'],
      //   ['Frontend_id', 'Frontend', 'Joe',
      //    new Date(2020, 3, 12), new Date(2020, 3, 25), null, 0, 'Design_id'],
      //   ['Marketing_id', 'Marketing', 'Jill',
      //    new Date(2020, 3, 20), new Date(2020, 3, 30), null, 0, 'Frontend_id,Backend_id'],
      // ])

      var options = {
        height: 400,
        gantt: {
          trackHeight: 40,
          shadowEnabled: false,
          percentEnabled: true
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
  <style media="screen">
    .header {
      margin-bottom: 20px;
    }
  </style>
 </head>
 <body>
  <div class='header'>
    <h1>Git Enterprise Project</h1>
    <a href="">
      Project Link
    </a>
  </div>
  <div id="chart_div"></div>
 </body>
 </html>
	<html>
	<head>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">
	const DEFAULT_ACTIVITY_TIME_IN_DAYS = 14

	google.charts.load('current', { 'packages': ['gantt'] })
	google.charts.setOnLoadCallback(drawChart);

	function daysToMilliseconds(days) {
	return days * 24 * 60 * 60 * 1000;
	}
	function toMilliseconds(minutes) {
	return minutes * 60 * 1000;
	}

	function addTwoWeeks(date) {
	var currentTime = new Date(date);
	currentTime.setDate(currentTime.getDate() + DEFAULT_ACTIVITY_TIME_IN_DAYS);
	return currentTime
	}

	function drawChart() {

	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Task ID');
	data.addColumn('string', 'Task Name');
	data.addColumn('string', 'Resource');
	data.addColumn('date', 'Start Date');
	data.addColumn('date', 'End Date');
	data.addColumn('number', 'Duration');
	data.addColumn('number', 'Percent Complete');
	data.addColumn('string', 'Dependencies');

	function date(month, day, year = 2020) {
	const m = month - 1
	return new Date(year, m, day)
	}

	const activities = [
	{
	id: 'Product',
	title: 'Product work',
	people: 'Jimbo',
	startDate: date(3, 20),
	endDate: date(3, 30),
	percentDone: 90,
	dependencies: []
	},
	{
	id: 'Design',
	title: 'Design work',
	people: 'Joe',
	startDate: date(3, 30),
	endDate: date(4, 12),
	percentDone: 20,
	dependencies: ['Product']
	},
	{
	id: 'Backend',
	title: 'Backend work',
	people: 'Steve',
	startDate: date(4, 12),
	endDate: date(4, 25),
	percentDone: 0,
	dependencies: ['Design']
	},
	{
	id: 'Frontend',
	title: 'Frontend work',
	people: 'Bob',
	startDate: date(4, 12),
	duration: 14,
	percentDone: 0,
	dependencies: ['Design']
	},
	{
	id: 'Marketing',
	title: 'Marketing work',
	people: 'Jill',
	startDate: date(4, 20),
	endDate: date(4, 30),
	percentDone: 0,
	dependencies: ['Frontend', 'Backend']
	}
	]

	let prevStartDate
	let prevEndDate
	activities.forEach((action) => {
	const deps = (action.dependencies \|\| []).join(',')
	const startDate = action.startDate \|\| prevEndDate
	let endDate
	let duration
	if (action.duration) {
	duration = daysToMilliseconds(action.duration)
	} else {
	endDate = action.endDate \|\| addTwoWeeks(startDate)
	}
	data.addRows([
	[action.id, action.title, action.people, startDate, endDate, duration, action.percentDone, deps]
	])
	// attach previous times
	prevStartDate = startDate
	prevEndDate = endDate
	})

	// ['ID', 'TITLE', 'RESOURCE NAME', 'DATE1', 'DATE2', 'DURATIONIFNODATES?', 'PERCENTDONE', 'Dependencies'
	// data.addRows([
	// ['Product_id', 'Product', 'David',
	// new Date(2020, 2, 20), new Date(2020, 2, 30), null, 90, null],
	// ['Design_id', 'Design', 'Bill',
	// new Date(2020, 2, 30), new Date(2020, 3, 12), null, 20, 'Product_id'],
	// ['Backend_id', 'Backend', 'Steve',
	// new Date(2020, 3, 12), new Date(2020, 3, 25), null, 0, 'Design_id'],
	// ['Frontend_id', 'Frontend', 'Joe',
	// new Date(2020, 3, 12), new Date(2020, 3, 25), null, 0, 'Design_id'],
	// ['Marketing_id', 'Marketing', 'Jill',
	// new Date(2020, 3, 20), new Date(2020, 3, 30), null, 0, 'Frontend_id,Backend_id'],
	// ])

	var options = {
	height: 400,
	gantt: {
	trackHeight: 40,
	shadowEnabled: false,
	percentEnabled: true
	}
	};

	var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

	chart.draw(data, options);
	}
	</script>
	<style media="screen">
	.header {
	margin-bottom: 20px;
	}
	</style>
	</head>
	<body>
	<div class='header'>
	<h1>Git Enterprise Project</h1>
	<a href="">
	Project Link
	</a>
	</div>
	<div id="chart_div"></div>
	</body>
	</html>