Google条形图和表格图表位于同一页面上

Question

您好我正在尝试使用谷歌图表在同一页面上获得一个表格和条形图，它们都可以在那里工作正常，然后当我合并它们不会显示的代码时。我非常感谢你们的任何帮助。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

    google.charts.load("visualization", "1.1", {packages:["bar", "table"]});
    google.charts.setOnLoadCallback(drawChart1);


function drawChart1(){

    var rowData1 = [['Product', 'Revenue', {role: "style"}, {role: 'annotation'}],
                    ['w', 15300, "color: #f68d38; opacity: 1", '15,300'],
                    ['x', 0, "color: #f68d38; opacity: 0.8", '0'],
                    ['y', 675, "color: #f68d38; opacity: 0.6", '675'],
                    ['z', 525, "color: #f68d38; opacity: 0.4", '525']];

    var rowData2 = [['Product', 'Revenue', {role: "style"}, {role: 'annotation'}],
                    ['w', 12600, "color: #f68d38; opacity: 1", '12,600'],
                    ['x', 0, "color: #f68d38; opacity: 0.8",  '0'],
                    ['y', 4050, "color: #f68d38; opacity: 0.6", '4,050'],
                    ['z', 1575, "color: #f68d38; opacity: 0.4", '1,575']];

var rowData4 = [['Year', 'Top-Up'],
        ['2014', {v: 19046, f: '$19,046'}]];

var rowData5 = [['Year', 'Top-Up'],
        ['2015', {v:26323,   f: '$26,323'}]];


    var data = [];
    data[0] = google.visualization.arrayToDataTable(rowData1);
    data[1] = google.visualization.arrayToDataTable(rowData2);
    data[3] = google.visualization.arrayToDataTable(rowData4);
    data[4] = google.visualization.arrayToDataTable(rowData5);

var options = {

        width: '100%',
        height: '100%',

        };

var options1 = {

        width: 500,
        height: 700,
        bar: {groupWidth: "95%"},
        legend: { position: "none"},
        title: 'Revenue 2016 by Product',
        titleTextStyle: { fontName: 'Century Gothic' }, 
            animation:{ duration: 1000, easing: 'out'}

        };


    var current = 0;
    var current1 = 3;

    var table = new google.visualization.Table(document.getElementById('table'));
    var chart = new google.visualization.Bar(document.getElementById('chart'));

    var button1 = document.getElementById('b1');
    var button2 = document.getElementById('b2');
    var button3 = document.getElementById('b3');


    function drawChart1() {

    button1.disabled = true;
        google.visualization.events.addListener(table, 'ready',
        function() {
                    button1.disabled = false;
                });

        table.draw(data[current1], options);

        google.visualization.events.addListener(chart, 'ready',
        function() {
                    button1.disabled = false;

                });

        chart.draw(data[current], options1);

    }

drawChart1();

        button1.onclick = function() {
        current = 0;
    current1 = 5;
    drawChart1();
     }

function drawChart1() {

        button2.disabled = true;
        google.visualization.events.addListener(table, 'ready',
        function() {
                    button2.disabled = false;
                });

        table.draw(data[current1], options);

        google.visualization.events.addListener(chart, 'ready',
        function() {
                    button2.disabled = false;

                });

        chart.draw(data[current], options1);

    }

drawChart1();

        button2.onclick = function() {
        current = 1;
        current1 = 4;
        drawChart1();
     }

}