Gantt Chart Example

An example of a Google Gantt Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['gantt']}]}"></script>
<div id="chart_div"></div>

JavaScript

google.load("visualization", "1.1", {
        packages: ["gantt"]
    });
    google.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
        return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task ID');
        data.addColumn('string', 'Task Name');
        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([
            ['Research', 'Find sources',
            new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
            ['Write', 'Write paper',
            null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
            ['Cite', 'Create bibliography',
            null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
            ['Complete', 'Hand in paper',
            null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
            ['Outline', 'Outline paper',
            null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
        ]);

        var options = {
            height: 275
        };

        var chart = new google.visualization.GanttChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', function () {
            console.log(chart.getSelection());
        });
        chart.draw(data, options);
    }