Problem recreating timeline in a new div onclick

by Daniel Buttery

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div class="modal fade" id="myModal" role="dialog">
	<div class="modal-dialog">
		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Modal Header</h4>
			</div>
			<div class="modal-body" id="modal-body">
				<p>
					Some text in the modal.
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<div>Click the button to load the modal. It will show a table of the data being used. Then in the JS below, go to line 100 and change 'Table' to 'Timeline' to see the error.</div>

<button type="button" onclick="enlargeChart();">
Click to expand
</button>

<div id="res1_div">
	 Loading...
</div>

JavaScript

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

var milestoneTimeline;
var timelineOptions;
var modalOptions;
var data;

google.setOnLoadCallback(setTable);

function setTable() {
    var projectID;

    console.log(new Date() + ' creating datatable');
    data = new google.visualization.DataTable();
    data.addColumn('string', 'ProjectName');
    data.addColumn('string', 'Milestone');
    data.addColumn('datetime', 'StartDate');
    data.addColumn('datetime', 'EndDate');

    console.log(new Date() + ' populating datatable');
    data.addRows([
        ['Dans Web', 'M1 Project Registration', new Date(2015, 4, 24), new Date(2015, 4, 29)],
        ['Dans Web', 'M0 Pre-engagement', new Date(2015, 3, 29), new Date(2015, 4, 21)],
        ['Dans Web', 'M3 Design', new Date(2015, 5, 1), new Date(2015, 5, 6)],
        ['Bills App', 'M1 Project Registration', new Date(2014, 9, 1), new Date(2014, 9, 1)],
        ['Bills App', 'M2 Project Approval', new Date(2015, 4, 11), new Date(2015, 4, 15)],
        ['Bills App', 'M3 Design', new Date(2015, 4, 25), new Date(2015, 4, 29)],
        ['Bills App', 'M4 Build', new Date(2015, 5, 1), new Date(2015, 5, 12)],
        ['Bills App', 'M5 Testing', new Date(2015, 4, 11), new Date(2015, 5, 26)],
        ['Bills App', 'M6 Project Go Live', new Date(2015, 5, 18), new Date(2015, 5, 22)],
        ['Bills App', 'M7 Project Completion', new Date(2015, 5, 23), new Date(2015, 5, 26)],
        ['Toms DB', 'M1 Project Registration', new Date(2014, 7, 1), new Date(2015, 7, 1)],
        ['Toms DB', 'M2 Project Approval', new Date(2014, 3, 3), new Date(2014, 9, 10)],
        ['Toms DB', 'M3 Design', new Date(2014, 9, 13), new Date(2014, 11, 31)],
        ['Toms DB', 'M4 Build', new Date(2015, 0, 1), new Date(2015, 3, 7)]
    ]);

    doCharts();
}

function doCharts() {

   ...