Epics gantt

by mikecmpbll

HTML

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

JavaScript

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

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');

  rows = JSON.parse("[[\"1052\",\"Support 'drill-down' style analysis\",\"Resource 1\",\"2020-03-24T13:46:44.869+00:00\",\"2020-04-03T13:46:44.869+01:00\",null,0,null],[\"1358\",\"Increase System Builder robustness\",\"Resource 1\",\"2020-04-29T09:46:44.869+01:00\",\"2020-05-04T09:46:44.869+01:00\",null,0,null],[\"1740\",\"System wide and custom reporting\",\"Resource 1\",\"2020-04-07T11:46:44.892+01:00\",\"2020-06-05T09:46:44.893+01:00\",null,0,null],[\"1856\",\"Performance improvements\",\"Resource 1\",\"2020-03-24T13:46:44.892+00:00\",\"2020-04-27T09:46:44.862+01:00\",null,0,null],[\"56\",\"Collaborative Chronologies\",\"Resource 1\",\"2020-08-03T09:46:44.862+01:00\",\"2020-10-26T09:46:44.893+00:00\",null,0,null],[\"1627\",\"API work\",\"Resource 1\",\"2020-06-24T09:46:44.862+01:00\",\"2021-01-18T11:46:44.863+00:00\",null,0,null],[\"1210\",\"Simplify system permissions\",\"Resource 1\",\"2020-04-27T09:46:44.862+01:00\",\"2020-04-30T09:46:44.862+01:00\",null,0,null],[\"762\",\"Manual Upload improvements\",\"Resource 1\",\"2020-06-18T13:46:44.893+01:00\",\"2020-06-30T09:46:44.893+01:00\",null,0,null]]")

  for (var i = 0; i < rows.length; i++) {
    rows[i][3] = new Date(rows[i][3])
    rows[i][4] = new Date(rows[i][4])
  }

  data.addRows(rows);

  var options = {
    height: 15000,
    gantt: {
      trackHeight: 30
    }
  };

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

  chart.draw(data, options);
}