KorkyPlunger/gist:16c540f7b622b8906c1351e44bf1bf3c

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>

        google.load('visualization', '1.1', { packages: ['timeline'] });
        google.setOnLoadCallback(createChart);
        window.onresize = createChart;

        function createChart() {
            var container = document.getElementById('div_timeline');
            var chart = new google.visualization.Timeline(container);
            var data = new google.visualization.DataTable();


            data.addColumn({ type: 'string', id: 'RowLabel' });
            data.addColumn({ type: 'string', id: 'BarLabel' });
            data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
            data.addColumn({ type: 'date', id: 'Start' });
            data.addColumn({ type: 'date', id: 'End' });


            data.addRows([

                ['Group1', 'Item1', 'this is a tooltip for Item1.cpp', new Date(1485183398349.28) /* 2017-01-23 14:56:38.349 */, new Date(1485183403210.01) /* 2017-01-23 14:56:43.210 */],
                ['Group1', 'Item2', 'this is a tooltip for Item2.cpp', new Date(1485183398349.28) /* 2017-01-23 14:56:38.349 */, new Date(1485183404293.85) /* 2017-01-23 14:56:44.293 */],
                ['Group2', 'Item3', 'this is a tooltip for Item3.cpp', new Date(1485183404293) /* 2017-01-23 14:57:06.839 */, new Date(1485183423010.27) /* 2017-01-23 14:57:11.891 */],
                ['Group3', 'Item4', 'this is a tooltip for Item4.cpp', new Date(1485183425010) /* 2017-01-23 14:57:14.014 */, new Date(1485183434895.97) /* 2017-01-23 14:57:14.895 */],
                ['Group3', 'Item5', 'this is a tooltip for Item5.cpp', new Date(1485183427010.3) /* 2017-01-23 14:57:14.484 */, new Date(1485183430862.57) /* 2017-01-23 14:57:14.862 */],

            ]);

            // Hack from Stack Overflow to try and re-size the vertical extents of the chart to
            // avoid vertical scrolling. See http://stackoverflow.com/questions/18640818/google-charts-timeline-dynamic-height-with-scalebar-position
            // set a padding value to cover the height of title and axis values
            var paddingHeight = 40;
            // set the height to be covered by the rows
            var rowHeight = data.getNumberOfRows() * 45;
            // set the total chart height
            var estimatedHeight = rowHeight + paddingHeight;

            var options = {
                timeline: {
                    showRowLabels: true,
                    colorByRowLabel: true,
                    rowLabelStyle: { fontName: 'Arial', color: '#FFFFFF' },
                    barLabelStyle: { fontName: 'Arial' /* bar label color cannot be set viat the API */ }
                },
                backgroundColor: '#999999',
                avoidOverlappingGridLines: false,
                height: estimatedHeight
            };

            chart.draw(data, options);
        }

    </script>
</head>
<body>
    <h1>Your title goes here</h1>
    <div id='div_timeline'></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	<script type='text/javascript'>

	google.load('visualization', '1.1', { packages: ['timeline'] });
	google.setOnLoadCallback(createChart);
	window.onresize = createChart;

	function createChart() {
	var container = document.getElementById('div_timeline');
	var chart = new google.visualization.Timeline(container);
	var data = new google.visualization.DataTable();


	data.addColumn({ type: 'string', id: 'RowLabel' });
	data.addColumn({ type: 'string', id: 'BarLabel' });
	data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
	data.addColumn({ type: 'date', id: 'Start' });
	data.addColumn({ type: 'date', id: 'End' });


	data.addRows([

	['Group1', 'Item1', 'this is a tooltip for Item1.cpp', new Date(1485183398349.28) /* 2017-01-23 14:56:38.349 /, new Date(1485183403210.01) / 2017-01-23 14:56:43.210 */],
	['Group1', 'Item2', 'this is a tooltip for Item2.cpp', new Date(1485183398349.28) /* 2017-01-23 14:56:38.349 /, new Date(1485183404293.85) / 2017-01-23 14:56:44.293 */],
	['Group2', 'Item3', 'this is a tooltip for Item3.cpp', new Date(1485183404293) /* 2017-01-23 14:57:06.839 /, new Date(1485183423010.27) / 2017-01-23 14:57:11.891 */],
	['Group3', 'Item4', 'this is a tooltip for Item4.cpp', new Date(1485183425010) /* 2017-01-23 14:57:14.014 /, new Date(1485183434895.97) / 2017-01-23 14:57:14.895 */],
	['Group3', 'Item5', 'this is a tooltip for Item5.cpp', new Date(1485183427010.3) /* 2017-01-23 14:57:14.484 /, new Date(1485183430862.57) / 2017-01-23 14:57:14.862 */],

	]);

	// Hack from Stack Overflow to try and re-size the vertical extents of the chart to
	// avoid vertical scrolling. See http://stackoverflow.com/questions/18640818/google-charts-timeline-dynamic-height-with-scalebar-position
	// set a padding value to cover the height of title and axis values
	var paddingHeight = 40;
	// set the height to be covered by the rows
	var rowHeight = data.getNumberOfRows() * 45;
	// set the total chart height
	var estimatedHeight = rowHeight + paddingHeight;

	var options = {
	timeline: {
	showRowLabels: true,
	colorByRowLabel: true,
	rowLabelStyle: { fontName: 'Arial', color: '#FFFFFF' },
	barLabelStyle: { fontName: 'Arial' /* bar label color cannot be set viat the API */ }
	},
	backgroundColor: '#999999',
	avoidOverlappingGridLines: false,
	height: estimatedHeight
	};

	chart.draw(data, options);
	}

	</script>
	</head>
	<body>
	<h1>Your title goes here</h1>
	<div id='div_timeline'></div>
	</body>
	</html>