Javascript 多个图表未显示在Google图表中

我是Javascript和HTML的新手，我正在学习如何在项目中使用谷歌图表。我试图在同一个HTML页面中并排显示两个图表。但是页面上没有显示任何内容。我附加了HTML和Javascript代码。有人能指出问题所在吗

HTML:

---

只有一个小问题，必须记住javascript是区分大小写的

setOnLoadCallback  //<-- should be lower case b in Callback

setOnLoadCallBack  //<-- NOT capital B

---

@WhiteHat为Laravel中的单刀片视图提供多个图表的更好解决方案

google.charts.load('current', {packages: ['corechart']});

google.charts.setOnLoadCallBack(drawChart1);
google.charts.setOnLoadCallBack(drawChart2);

function drawChart1(){
    var data = new google.visualization.DataTable();
            data.addColumn('string', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addColumn({type:'string', role:'tooltip'});
            data.addRows([
                ['Firefox', 45.0, '45% people use Firefox'],
                ['IE', 26.8, '26.8% people use Internet Explorer'],
                ['Chrome', 12.8, '12.7% people use Chrome'],
                ['Safari', 8.5, '8.5% people use Safari'],
                ['Opera', 6.2, '6.2% people use Opera'],
                ['Others', 0.7, '0.7% people use other browsers']
                ]);

            //pieHole used for donut chart (value between 0 and 1). Skip for regular pie chart
            var options = {
                'title' : 'Browser market shares at a specific website, 2014',
                width:600,
                height:600};

            var chart = new google.visualization.BarChart(document.getElementById('chart1'));
            chart.draw(data, options);
}

function drawChart2(){
    var data = new google.visualization.DataTable();

            // var firefox_ptage = 45;
            data.addColumn('string', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addColumn({type:'string', role:'tooltip'});
            data.addRows([
                ['Firefox', 45.0, '45% people use Firefox'],
                //['Firefox', firefox_ptage, firefox_ptage + '% people use Firefox'],
                ['IE', 26.8, '26.8% people use Internet Explorer'],
                ['Chrome', 12.8, '12.7% people use Chrome'],
                ['Safari', 8.5, '8.5% people use Safari'],
                ['Opera', 6.2, '6.2% people use Opera'],
                ['Others', 0.7, '0.7% people use other browsers']
                ]);

            //pieHole used for donut chart (value between 0 and 1). Skip for regular pie chart
            var options = {
                title : 'Browser market shares at a specific website, 2014',
                pieHole:0.4,
                width:600,
                height:600,
                fontSize:13,
                //is3D : true,
                pieSliceText:'label',
                slices:{
                    0: {color:'Indigo'},
                    1: {color:'BurlyWood'},
                    2: {color:'Coral'},
                    3: {color:'DarkGoldenRod', offset:0.1},
                    4: {color:'IndianRed', offset:0.2},
                    5: {color:'Aqua'}
                }};

                var chart = new google.visualization.PieChart(document.getElementById('chart2'));
                chart.draw(data, options);
}

setOnLoadCallback  //<-- should be lower case b in Callback

setOnLoadCallBack  //<-- NOT capital B