Visualization Google

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">google.setOnLoadCallback(drawChart);

function drawChart() {

    var container = document.getElementById('example1');
    var chart = new google.visualization.Timeline(container);

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({
        type: 'string',
        id: 'Title'
    });
    dataTable.addColumn({
        type: 'string',
        id: 'Status'
    });
    dataTable.addColumn({
        type: 'date',
        id: 'Start'
    });
    dataTable.addColumn({
        type: 'date',
        id: 'End'
    });
    dataTable.addRows([
        ["1", "Planning", new Date(2013, 5, 20), new Date(2013, 6, 21)],
        ["2", "Design", new Date(2013, 6, 25), new Date(2013, 7, 25)],
        ["3", "Development", new Date(2013, 7, 25), new Date(2013, 10, 11)],
        ["4", "Implementation", new Date(2013, 10, 15), new Date(2013, 11, 14)],
        ["5", "Testing", new Date(2013, 11, 18), new Date(2013, 12, 10)],
        ["6", "Delivering", new Date(2013, 12, 1), new Date(2013, 12, 21)]
    ]);

    var formatter = new google.visualization.DateFormat({
        formatType: 'medium'
    });

    formatter.format(dataTable, 2);
    formatter.format(dataTable, 3);

    var options = {
        timeline: {
            showRowLabels: false,
            barLabelStyle: {
                fontSize: 10
            },
            groupByRowLabel: false,
            colorByRowLabel: false
        },
        avoidOverlappingGridLines: false,
        colors: ['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58', '#A7A7A7']
    };

    chart.draw(dataTable, options);
}
</script>
<div id="example1" style="width: 900px; height: 300px;"></div>