CODEWITHSUNDEEP
chartsgoogle-visualizationgantt-chart
Atashi Dubz
Atashi Dubz

Reputation: 251

Customize Google Chart (Gantt Chart)

I am currently working on creating Gantt Chart using Google Chart. Customizing the chart is what I seek. Gant Chart

How would you create a Gantt chart with multiple bar on a single row? Please see the image attached.

Upvotes: 4

Views: 3241

Answers (1)

Saurabh Talreja
Saurabh Talreja

Reputation: 349

I believe this might serve your purpose:

https://codepen.io/saurabhtalreja/pen/LYbzLMX

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('timeline-chart');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
     [ 'Briefing Meeting', 'Baseline', new Date(2020, 2, 6), new Date(2020, 2, 10) ],
      [ 'Briefing Meeting', 'Forecast', new Date(2020, 2, 7), new Date(2020, 2, 11) ],
      [ 'Briefing Meeting', 'Actual', new Date(2020, 2, 6), new Date(2020, 2, 13) ],
      [ 'Concept Design', 'Baseline', new Date(2020, 2, 6), new Date(2020, 2, 10) ],
      [ 'Concept Design', 'Forecast', new Date(2020, 2, 7), new Date(2020, 2, 11) ],
      [ 'Concept Design', 'Actual', new Date(2020, 2, 6), new Date(2020, 2, 13) ]
    ]);

    var options = {
      timeline: {  },
      height:1000,    
    };

    chart.draw(dataTable, options);
  }
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline-chart"></div>

This uses the Timeline, not Gantt Chart. Also one important thing here is:

  • If your start Date overlaps then only it'll put it into next line.
  • Don't forget to group using the first identifier ie role here, you can modify it to any name

Upvotes: 1

Related Questions