JSFiddle - React, Tailwind, and code Playground

by Elisandro Boeno

HTML

<div id="example"></div>

JavaScript

function drawChart() {
	
  var container = document.getElementById('example');


	var chart = new google.visualization.Timeline(container);
	
	var dataTable = {
		"cols":[
			{"id":"situacaoId", "label":"Situacao","type":"string"},
			{"id":"descricaoId", "label":"Descrição","type":"string"},
			{"id":"startId", "label":"Start","type":"datetime"},
			{"id":"endId", "label":"End","type":"datetime"}
		],
		"rows":[
			{"c":[{"v":"A"},{"v":"Azul"},{"v": new Date(2014, 02, 05, 00, 00, 00)},{"v": new Date(2014, 02, 05, 06, 30, 00)}]},
			{"c":[{"v":"B"},{"v":"Verde"},{"v": new Date(2014, 02, 05, 06, 30, 00)},{"v": new Date(2014, 02, 05, 10, 30, 00)}]},
			{"c":[{"v":"B"},{"v":"Vermelho"},{"v":new Date(2014, 02, 05, 10, 30, 00)},{"v":new Date(2014, 02, 05, 11, 30, 00)}]},
			{"c":[{"v":"C"},{"v":"Azul"},{"v":new Date(2014, 02, 05, 11, 30, 00)},{"v":new Date(2014, 02, 05, 12, 30, 00)}]},
			{"c":[{"v":"B"},{"v":"Verde"},{"v":new Date(2014, 02, 05, 12, 30, 00)},{"v":new Date(2014, 02, 05, 15, 30, 00)}]},
			{"c":[{"v":"B"},{"v":"Amarelo"},{"v":new Date(2014, 02, 05, 15, 30, 00)},{"v":new Date(2014, 02, 05, 16, 30, 00)}]}
		]
	}
	var options = {
		colors:["#0000FF", "#00CC00", "#FF0000", "#0000FF", "#00CC00", "#FFFF00"]
	}
	var data = new google.visualization.DataTable(dataTable);
	chart.draw(data, options);
}

google.load('visualization', '1', {packages: ['timeline'], callback: drawChart});