Hi nandish,
Check with the below code.
HTML
<div id="timelineHolder" style="width: 600px; height: 300px; margin: auto;">
</div>
<script type="text/javascript">
google.load('visualization', '1.0', { packages: ["timeline"] });
google.setOnLoadCallback(DrewChart);
function prepareDataTable() {
var dataTable = new google.visualization.DataTable();
// Add columns
dataTable.addColumn({ type: 'string', id: 'Label' });
dataTable.addColumn({ type: 'string', id: 'Place' });
dataTable.addColumn({ type: 'date', id: 'Arrival Date' });
dataTable.addColumn({ type: 'date', id: 'Departure Date' });
//Add Rows
dataTable.addRow(['1', 'Berlin', new Date(2017, 0, 15), new Date(2017, 1, 26)]);
dataTable.addRow(['2', 'Paris', new Date(2017, 3, 20), new Date(2017, 6, 1)]);
dataTable.addRow(['3', 'Madrid', new Date(2017, 6, 21), new Date(2017, 7, 30)]);
dataTable.addRow(['4', 'Perth', new Date(2017, 10, 2), new Date(2017, 11, 5)]);
return dataTable;
}
function DrewChart() {
// Pick the HTML element
var div = document.getElementById("timelineHolder");
// Create an instance of Timeline
var timeline = new google.visualization.Timeline(div);
var dataTable = prepareDataTable();
var config = {
backgroundColor: '#ffbb33',
timeline: { singleColor: '#669900' }
}
// Draw the timeline
timeline.draw(dataTable, config);
}
</script>
Or refer the below links.
Timeline Chart
Create timeline with google chart api