1
resposta

Gráfico inferior não aparece

Coloquei os códigos da seguinte maneira, porém o segundo gráfico não aparece. Os códigos são os seguintes.

Index

<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <!--scripts dos graficos-->
        <script type="text/javascript" src="graficoAreasReceita.js"></script>
        <script type="text/javascript" src="graficoReceitaPlanilha.js"></script>

        <!--calbacks das funções dos graficos-->
        <script>
            google.charts.load('current', {'packages':['corechart'],
                'language': 'pt'});
            google.charts.setOnLoadCallback(desenharGraficoAreasReceita);
            google.charts.setOnLoadCallback(desenharGraficoReceitaPlanilha);

        </script>

    </head>
    <body>

        <div id="graficoAreasReceita"></div>
        <div id="graficoReceitaPlanilha"></div>



    </body>
</html>

graficoReceitaPlanilha.js

function desenharGraficoReceitaPlanilha(){

        //fazer a busca acontecer
        var busca = new google.visualization.Query(
            'https://docs.google.com/spreadsheets/d/19FtUuabsM3oNY_tu3SUWoq1WFtmkntKIpqWZlVQLC_k/gviz/tq?range=A1:F262'
            );

        //pegar os resultados mandar resultados pro grafico
        busca.send(resultadoDaBusca);

        //pegar os resultados e criar uma tabela
        function resultadoDaBusca(resultado){

            var tabela = resultado.getDataTable();

            //seguir com o grafico - customizar, escolher o tipo de grafico, conectar com o html
            var opcoes = {
                            title: 'Receitas anuais de contas da planilha',

                    };

            var grafico = new google.visualization.AreaChart(document.getElementById('graficoReceitaPlanilha'));
                grafico.draw(tabela, opcoes);
        }

}

A imagem com o erro está neste link abaixo: https://drive.google.com/file/d/1Uz6ljO4Hr-qMAMgufrRe-wbAm7SfRR4K/view?usp=sharing

1 resposta

Fala ai Lucas, tudo bem? O problema é que durante sua requisição está dando erro de CORS, ou seja, o endereço que você está requisitando não permite que seu domino dispare requisições para ele.

Isso porque acredito que a Google não libera de forma tão simples o acesso as planilhas via AJAX.

Provavelmente se ela libera, isso vai precisar de alguma configuração.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software