drawChart jsapi

by Akram kamal

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="example3.1"></div>

JavaScript

function drawChart() {
    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
        [ 'Release 1', 'Milestone 1 due 12/25/14 - Goals: FATCA onboarding, orientation, registration, requirements gathering, visualization', '#E60000', new Date(2014, 11, 01), new Date(2014, 11, 30)],
        [ 'Release 1', 'Milestone 2', '#0066FF', new Date(2014, 12, 01),  new Date(2014, 12, 30)],
        [ 'Release 1', 'Milestone 3', '#00CC00', new Date(2015, 01, 01),  new Date(2015, 01, 30)],
        [ 'Release 2', 'Milestone 1', '#E60000', new Date(2015, 2, 01), new Date(2015, 2, 30)],
        [ 'Release 2', 'Milestone 2', '#FF9900', new Date(2015, 3, 01),  new Date(2015, 3, 30)],
        [ 'Release 2', 'Milestone 3', '#00CC00', new Date(2015, 4, 01),  new Date(2015, 4, 30)],
        [ 'Release 3', 'Milestone 1', '#E60000', new Date(2015, 5, 01), new Date(2015, 5, 30)],
        [ 'Release 3', 'Milestone 2', '#0066FF', new Date(2015, 6, 01), new Date(2015, 6, 30)],
        [ 'Release 3', 'Milestone 3', '#0066FF', new Date(2015, 7, 01),  new Date(2015, 7, 30)]
    ]);
    
    var options = {};
    
    chart.draw(dataTable, options);
}
google.load('visualization', '1', {packages: ['timeline'], callback: drawChart});