JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Babel + JSX

let start = new Date('Thu Dec 14 2017')
const tasks = [
	['Development', 0],
	['Foo', 2],
  ['Bar', 5],
  ['Baz', 10],
]

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

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');
  data.addRows(
  	tasks.map(([name, duration], index) => {
	    const prev = index > 0 ? (tasks[index - 1][0]) : null
    	return [
      	name,
        name,
        start,
        start = new Date(start.getMilliseconds() + daysToMilliseconds(duration)),
        index > 0 ? duration : null,
        100,
        prev
     ]
    })
  )
  var options = {
    height: 275
  };
  var chart = new google.visualization.Gantt(document.getElementById('chart'));
  chart.draw(data, options);
}