Javascript - How to load two google charts on the same page, different divs

Question

After a dozen studies, it was still not possible to solve my problem when showing two graphs on one page (s Google Charts).

I could not understand what was wrong or what I forget, if someone can give me some advice or tell me what I am missing, I will be grateful.

I can show 1 graph, but when I try to show another one, the first disappears.

Here is 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 your script works, you called: google.visualization.CollumChartinstead google.visualization.ColumnChart, always check for javascript errors in the browser developer console. (usually f12)

google

<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>

Hide result