Não está carregando o gráfico | Gráficos na web parte 1: criando e customizando gráficos

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Felipe Lima de Azevedo

| 74.3k xp | 12 posts

<!DOCTYPE html>
<html>
<head>
    <title>Gráficos</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

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

        function desenharGraficoPizza() {
            var tabela = new google.visualization.DataTable();
            tabela.addColumn('string','categorias');
            tabela.addColumn('number', 'valores');
            tabela.addRows([    
                ['Educação',2000]
                ['Transporte',500]
                ['Lazer',230]
                ['Saúde',50]
                ['Cartão de Crédito',900]
                ['Alimentação',260]
            ]);

            var grafico = new google.visualization.PieChart(document.getElementById('graficoPizza'));
            grafico.draw(tabela);
        }

        google.charts.setOnLoadCallback(desenharGraficoPizza);

    </script>
</head>
<body>
    <div id="graficoPizza"></div>

</body>
</html>

2 respostas

solução!

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

01/05/2018

Boa noite, Felipe! Como vai?

O problema é na declaração do parâmetro passado para o método addRows(), o correto seria utilizar uma vírgula como separador entre os dados como visto nesse exercício:

tabela.addRows([    
     ['Educação',2000],
     ['Transporte',500],
     ['Lazer',230],
     ['Saúde',50],
     ['Cartão de Crédito',900],
     ['Alimentação',260]
]);

Aprendizado para a vida: Sempre que tiver problemas com o HTML ou o JavaScript, dê uma olhada no console do navegador no painel do desenvolvedor! Se houverem erros eles estarão listados lá junto com a informação do arquivo e da linha onde está ocorrendo o erro, de modo que com esses dados vc poderá ter uma luz sobre o problema! Nesse caso, seria mostrado o erro a seguir, o qual utilizei para descobrir a causa!

TypeError: Cannot read property '230' of undefined

Grande abraço e bons estudos!

por Cássia Sampaio

| 250.2k xp | 311 posts

Instrutor Data Scientist

01/05/2018

Oie Felipe e Gabriel :).

Felipe, é super comum nos esquecermos de colocar essas vírgulas depois de cada par de dados, nem esquente a cabeça. Reforçando o que o Gabriel disse, procure ir olhando no console sem medo e pode sempre postar qualquer erro aqui que vamos te responder.

Para as vírgulas, uma coisa que funciona para mim é pensar que são vários conjuntos de dados, e como são vários tenho que enumerar senão eles se juntam todos e fica confuso. A vírgula que vai dizer para o navegador "opa, tem mais dado vindo aí". Veja se pensar assim funciona para você.

Gabriel, eu precisava elogiar sua resposta e obrigada pela força aqui no Fórum, mandou muito. o/