Google Vis: Gantt Chart with odd lines - google-visualization

Question

Trying to creat a gantt chart but the lines are odd:
https://jsfiddle.net/Khrys/zyfbsy67/1/
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');
data.addRows([
['Project', 'Project 1', null, new Date(2015, 0, 1), new Date(2015, 6, 5), null, 100, null],
['Task1', 'Task 1', 'Tarefa', new Date(2015, 0, 1), new Date(2015, 2, 5), null, 20, 'Project'],
['Task2', 'Task 2', 'Tarefa', new Date(2015, 2, 1), new Date(2015, 3, 5), null, 60, 'Project'],
['Task3', 'Task 3', 'Tarefa', new Date(2015, 4, 1), new Date(2015, 5, 5), null, 40, 'Project']
]);
var options = {
height: 475
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}

Answer 1

The data you supply to the chart needs to be corrected.
All Tasks are dependent on the overall Project, which ends after all the Tasks.
You can remove the dependencies, or shorten the Project end date to before the end of the first Task.
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');
data.addRows([
['Project', 'Project 1', null, new Date(2015, 0, 1), new Date(2015, 6, 5), null, 100, null],
['Task1', 'Task 1', 'Tarefa', new Date(2015, 0, 1), new Date(2015, 2, 5), null, 20, null],
['Task2', 'Task 2', 'Tarefa', new Date(2015, 2, 1), new Date(2015, 3, 5), null, 60, null],
['Task3', 'Task 3', 'Tarefa', new Date(2015, 4, 1), new Date(2015, 5, 5), null, 40, null]
]);
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, {});
drawChart2();
}
function drawChart2() {
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');
data.addRows([
['Project', 'Project 1', null, new Date(2015, 0, 1), new Date(2015, 0, 9), null, 100, null],
['Task1', 'Task 1', 'Tarefa', new Date(2015, 0, 1), new Date(2015, 2, 5), null, 20, 'Project'],
['Task2', 'Task 2', 'Tarefa', new Date(2015, 2, 1), new Date(2015, 3, 5), null, 60, 'Project'],
['Task3', 'Task 3', 'Tarefa', new Date(2015, 4, 1), new Date(2015, 5, 5), null, 40, 'Project']
]);
var chart = new google.visualization.Gantt(document.getElementById('chart_div2'));
chart.draw(data, {});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<br/>
<div id="chart_div2"></div>