CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Khrys
Khrys

Reputation: 2774

Google Gantt chart height detection

I am facing a situation where the Google Gantt chart can't(?) render the height properly, thus in low resolutions I can't see all the data in chart, because it does not show the vertical scrollbar.

Code example

I also use the Google Timeline chart and it shows the vertical bar when needed.

Any suggestion will be appreciated. Thanks.

Upvotes: 3

Views: 2168

Answers (1)

WhiteHat
WhiteHat

Reputation: 61265

instead of setting the height of the chart to the screen size,

try setting a specific trackHeight

with overall height as...

height: data.getNumberOfRows() * trackHeight

see following working snippet, the scroll bar seems to appear with this approach... 

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task ID');
    data.addColumn('string', 'Task Name');
    data.addColumn('string', 'Resource');
    data.addColumn('date', 'Start Date');
    data.addColumn('date', 'End Date');
    data.addColumn('number', 'Duration');
    data.addColumn('number', 'Percent done');
    data.addColumn('string', 'Dependencies');

    data.addRows([
      ['C300300 (M, AeX)', 'C300300 (M, AeX)', 'DD', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 117.96, null],
      ['C671925 (M, XeR)', 'C671925 (M, XeR)', 'DD', new Date(2016, 2, 16), new Date(2016, 11, 16), null, 106.55, null],
      ['C769868 (M, YeB)', 'C769868 (M, YeB)', 'DD', new Date(2016, 5, 7), new Date(2017, 3, 30), null, 64.22, null],
      ['C678421 (M, XeR)', 'C678421 (M, XeR)', 'DD', new Date(2016, 2, 22), new Date(), null, 153.21, null],
      ['C678428 (M, YeB)', 'C678428 (M, YeB)', 'DD', new Date(2016, 9, 3), new Date(2017, 0, 31), null, 76.67, null],
      ['C772279 (M, YeB)', 'C772279 (M, YeB)', 'DD', new Date(2016, 5, 1), new Date(2016, 9, 31), null, 142.11, null],
      ['C769877 (M, YeB)', 'C769877 (M, YeB)', 'DD', new Date(2016, 9, 3), new Date(2017, 2, 31), null, 51.4, null],
      ['C800305 (M, XeR)', 'C800305 (M, XeR)', 'DD', new Date(2016, 5, 28), new Date(2017, 0, 31), null, 87.1, null],
      ['C774664 (M, XeR)', 'C774664 (M, XeR)', 'DD', new Date(2016, 6, 11), new Date(), null, 123.94, null],
      ['C803552 (M, XeR)', 'C803552 (M, XeR)', 'DD', new Date(2016, 6, 18), new Date(2016, 9, 14), null, 192.05, null],
      ['C803555 (M, XeR)', 'C803555 (M, XeR)', 'DD', new Date(2016, 8, 5), new Date(2017, 3, 30), null, 50.63, null],
      ['C843561 (M, AeX)', 'C843561 (M, AeX)', 'DD', new Date(2016, 8, 16), new Date(2016, 11, 6), null, 134.57, null],
      ['C840916 (M, XeR)', 'C840916 (M, XeR)', 'DD', new Date(2016, 7, 2), new Date(2017, 1, 3), null, 83.24, null],
      ['C867128 (A, YeB)', 'C867128 (A, YeB)', 'DD', new Date(2016, 10, 14), new Date(2017, 2, 1), null, 46.73, null],
      ['C850076 (M, YeB)', 'C850076 (M, YeB)', 'DD', new Date(2016, 8, 16), new Date(2017, 1, 28), null, 66.06, null],
      ['C887165 (M, XeR)', 'C887165 (M, XeR)', 'DD', new Date(2016, 8, 13), new Date(2017, 1, 28), null, 66.67, null],
      ['C907859 (M, YeB)', 'C907859 (M, YeB)', 'DD', new Date(2016, 8, 20), new Date(2017, 1, 28), null, 65.22, null],
      ['C904155 (L, YeB)', 'C904155 (L, YeB)', 'DD', new Date(2016, 11, 28), new Date(2017, 0, 20), null, 26.09, null],
      ['C769875 (M, YeB)', 'C769875 (M, YeB)', 'DD', new Date(2016, 10, 21), new Date(2017, 0, 31), null, 60.56, null],
      ['C1034751 (L, YeB)', 'C1034751 (L, YeB)', 'DD', new Date(2016, 10, 30), new Date(2017, 0, 27), null, 58.62, null]
    ]);

    var trackHeight = 40;

    var options = {
        height: data.getNumberOfRows() * trackHeight,
        width: "100%",
        hAxis: {
            textStyle: {
                fontName: ["RobotoCondensedRegular"]
            }
        },
        gantt: {
            labelStyle: {
            fontName: ["RobotoCondensedRegular"],
            fontSize: 12,
            color: '#757575',
            },
            trackHeight: trackHeight
        }
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Gantt(container);

    chart.draw(data, options);
  },
  packages:['gantt']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 12

Related Questions