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

Open it with browser maximized (depending on your resolution you will see the full lines)

Open it with the browser resized, smaller and you will see the chart does not generate the scrollbar but cuts the lines.

function drawChart() {
    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 w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        xWidth = w.innerWidth || e.clientWidth || g.clientWidth,
        yHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;

    var options = {
        height: yHeight - 165,
        width: "100%",
        hAxis: {
            textStyle: {
                fontName: ["RobotoCondensedRegular"]
            }
        },
        gantt: {
            labelStyle: {
            fontName: ["RobotoCondensedRegular"],
            fontSize: 12,
            color: '#757575',
            }
        }
    };

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

    chart.draw(data, options);
    }

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

Any suggestion will be appreciated. Thanks.

回答1:

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>

来源：https://stackoverflow.com/questions/41448006/google-gantt-chart-height-detection

标签

javascript

charts

google-visualization