CODEWITHSUNDEEP
javascripthtmlchartsgoogle-visualization
qwww
qwww

Reputation: 1363

How to add a horizontal scroll bar to google gantt chart?

I have a google gantt chart in my web page. But i am not able to scroll it horizontally if I have more items.

I tried :

explorer: {axis: 'horizontal', keepInBounds: true}

After this chart itself disappeared. How can I add a scroll bar???

Chart link : LINK

Upvotes: 2

Views: 2751

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

add css to chart container... 

#chart_div {
  overflow-x: scroll;
}

you can also give the chart a specific width... 

var options = {
  height: 275,
  width: 1000
};

see following working snippet... 

google.charts.load('current', {
  packages: ['gantt']
}).then(function () {
  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,
    width: 1000
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
  chart.draw(data, options);

  function daysToMilliseconds(days) {
    return days * 24 * 60 * 60 * 1000;
  }
});
#chart_div {
  overflow-x: scroll;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions