javascript - 如何在同一页面上加载两个谷歌图表，不同的div

Question

After a dozen research, still could not solve my problem in showing two graphs on the same page (with Google Charts ).

I could not figure out what is wrong or what I'm forgetting, if someone can give me some tips or point me what I'm missing, I'll be grateful.

I'm able to show 1 chart, but when I try to show another one, the first dissapears.

Here's my code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

          google.load('visualization', '1.0', { 'packages': ['corechart'] });


    //google.setOnLoadCallback(drawChartAtleta);
    //google.setOnLoadCallback(drawChartSexo);
    google.setOnLoadCallback(function () {
        drawChartAtleta();
        drawChartSexo();
    });      


    //Grafico Atleta por esporte
    function drawChartAtleta() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Esporte');
        data.addColumn('number', 'Quantidade');
        data.addRows([
          ['Basquete', 30],
          ['Tenis de Mesa', 17]
        ]);

        var options = {
            'title': 'Por Esporte',
            'width': 500,
            'height': 300
        };


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

    //Grafico por Sexo
    function drawChartSexo() {


        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Sexo');
        data.addColumn('number', 'Quantidade');
        data.addRows([
          ['Masculino', 165],
          ['Feminino', 67]
        ]);


        var options = {
            'title': 'Por Sexo',
            'width': 500,
            'height': 300
        };


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


</script>

<div class="container">
    <div class="col-lg-12">
        <div class="col-lg-6">
            <div class="form-group">
                <div id="char_sexo"></div>
            </div>                
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <div id="char_atleta"></div>
            </div>
        </div>
    </div>
</div>

Answer 1

Here's your script working, you were calling: google.visualization.CollumChart instead of google.visualization.ColumnChart , always check for javascript errors in the browser developer's console. (f12 usually)

Check google charts documentation for more info about column charts

 <div class="container"> <div class="col-lg-12"> <div class="col-lg-6"> <div class="form-group"> <div id="char_sexo"></div> </div> </div> <div class="col-lg-6"> <div class="form-group"> <div id="char_atleta"></div> </div> </div> </div> </div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.0', { 'packages': ['corechart'] }); //google.setOnLoadCallback(drawChartAtleta); //google.setOnLoadCallback(drawChartSexo); google.setOnLoadCallback(function () { drawChartAtleta(); drawChartSexo(); }); //Grafico Atleta por esporte function drawChartAtleta() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Esporte'); data.addColumn('number', 'Quantidade'); data.addRows([ ['Basquete', 30], ['Tenis de Mesa', 17] ]); var options = { 'title': 'Por Esporte', 'width': 500, 'height': 300 }; //This line was changed. var chart = new google.visualization.ColumnChart(document.getElementById('char_atleta')); chart.draw(data, options); } //Grafico por Sexo function drawChartSexo() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Sexo'); data.addColumn('number', 'Quantidade'); data.addRows([ ['Masculino', 165], ['Feminino', 67] ]); var options = { 'title': 'Por Sexo', 'width': 500, 'height': 300 }; var chart = new google.visualization.PieChart(document.getElementById('char_sexo')); chart.draw(data, options); } </script>