4

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.

Atashi Dubz
  • 241
  • 1
  • 3
  • 14
  • 1
    Your linked image reminds me more of the [Timeline Chart](https://developers.google.com/chart/interactive/docs/gallery/timeline) than the Gantt Chart, because it has no arrows. Google's Gantt Chart doesn't seem to be an appropriate start for what you are trying to do. – nbering Jul 01 '16 at 16:38
  • I see, that's a great suggestion. I read about the timeline however, can't seems to figure out on how to achieve the same output on timeline. How would you adjust the height of the bars and how do you group the data? – Atashi Dubz Jul 04 '16 at 03:14
  • You'll need to figure some of that out for yourself, but timeline charts are a lot closer to what you're trying to do. Gantt charts simply cannot do that. – nbering Jul 04 '16 at 03:16
  • I should probably also note that customization is limited with Google Charts. They are pretty customizable but not completely. And since they are not open source you can't just hack away at them to get what you want. Something like D3.js is totally customizable but at the cost of a higher barrier to entry. The chart you're trying to build actually isn't impossible to build with plain javascript, html and CSS. You might even consider trying to build it without a library. – nbering Jul 04 '16 at 03:24

1 Answers1

1

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
Saurabh Talreja
  • 335
  • 2
  • 6