Gráfico não exibido no Google Chrome | Gráficos na web parte 1: criando e customizando gráficos | Solucionado

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

por Aline de Albuquerque Martins Scallari

| 32.5k xp | 3 posts

Assistente de Tecnologia

Aparece essa mensagem de "Atenção" no console : 'jquery.min.js:6 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.' Foi gerado a URL com o "Raw", porém o gráfico não aparece no Chrome e não consegui entender o que fiz de errado.

 var dadosJson = $.ajax({
            //url: 'dados.json',
            url: 'https://gist.githubusercontent.com/amartins/4bdda5481b7cc9fccd7bc11c801915db/raw/4a80277d6c190abab466544d0ab09c828c7cf7bd/dados.json',
            mimeType: 'application-json',    
            dataType: 'json',
            async: false
        }).responseText;

        var tabela = new google.visualization.DataTable(dadosJson);

        tabela.sort([{column: 1, desc: true}]);

        var opcoes = {
                    title: 'Usuários e Poupanças',
                    height: 400,
                    width: 800,
                    legend: 'none',
                    hAxis: {
                            gridlines:
                            {
                                color: 'transparent'
                            },  
                            textPosition: 'none'    
                    },
                    annotations:
                    {
                        alwaysOutside: true
                    }
        }

        var grafico = new google.visualization.BarChart(document.getElementById('graficoBarrasJson'));
        grafico.draw(tabela, opcoes);

{ "cols": [ { "label": "Nome", "type": "string" }, { "label": "Valor", "type": "number" },

            {
                "type": "string",
                "role": "annotation"
            }
        ],

"rows": [
            {"c": [
                    {"v": "João Antônio Marques", "f": null},
                    {"v": 25.110, "f":null},
                    {"v": "R$25.110", "f":null}
                    ]
            },

            {"c": [
                {"v": "Ana Siqueira", "f": null},
                {"v": 10.020, "f":null},
                {"v": "R$25.110", "f":null}
                ]
            },

            {"c": [
                {"v": "Alcides V. de Oliveira", "f": null},
                {"v": 30.240, "f":null},
                {"v": "R$30.240", "f":null}
                ]  
            },

            {"c": [
                {"v": "Rafael Antunes", "f": null},
                {"v": 2.310, "f":null},
                {"v": "R$2.310", "f":null}
                ]  
            },

            {"c": [
                {"v": "Bianca M. Sampaio", "f": null},
                {"v": 8.542, "f":null},
                {"v": "R$8.542", "f":null}
                ]  
            },

            {"c": [
                {"v": "Victor Barbosa", "f": null},
                {"v": 6.521, "f":null},
                {"v": "R$6.521", "f":null}
                ]  
            },

            {"c": [
                {"v": "Maria do Carmo Prado", "f": null},
                {"v": 12.327, "f":null},
                {"v": "R$12.327", "f":null}
                ]  
            },

            {"c": [
                {"v": "Maria Heloísa de Almeida", "f": null},
                {"v": 9.764, "f":null},
                {"v": "R$9.764", "f":null}
                ]  
            },

            {"c": [
                {"v": "Rita de Cássia Cuaron", "f": null},
                {"v": 20.174, "f":null},
                {"v": "R$20.174", "f":null}
                ]  
            }
        ]

}

5 respostas

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

09/12/2020

Fala ai Aline, tudo bem? Esse problema parece ser um pouco mais complexo e exigir uma certa atenção, sendo assim, vou te pedir um favor.

Compartilha o projeto completo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Espero ter ajudado.

por Aline de Albuquerque Martins Scallari

| 32.5k xp | 3 posts

Assistente de Tecnologia

11/12/2020

Oi Matheus, tudo bem!!!Vou te passar o link do projeto no Git Hub: https://github.com/ascallari/graficosWeb . Desde já agradeço a atenção.

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

14/12/2020

Fala Aline, olhando o projeto, ele estava dando erro na formatação e estrutura do JSON.

Eu peguei o dados.json local e formatei ele.

Depois mudei o gráfico para utilizar o dados.json local e não mais externo do Gist.

Segue como ficou o JSON:

{
    "cols": [{
            "label": "Nome",
            "type": "string"
        },
        {
            "label": "Valor",
            "type": "number"
        },

        {
            "type": "string",
            "role": "annotation"
        }
    ],

    "rows": [{
            "c": [{
                    "v": "João Antônio Marques",
                    "f": null
                },
                {
                    "v": 25.110,
                    "f": null
                },
                {
                    "v": "R$25.110",
                    "f": null
                }
            ]
        },

        {
            "c": [{
                    "v": "Ana Siqueira",
                    "f": null
                },
                {
                    "v": 10.020,
                    "f": null
                },
                {
                    "v": "R$25.110",
                    "f": null
                }
            ]
        },

        {
            "c": [{
                    "v": "Alcides V. de Oliveira",
                    "f": null
                },
                {
                    "v": 30.240,
                    "f": null
                },
                {
                    "v": "R$30.240",
                    "f": null
                }
            ]
        },

        {
            "c": [{
                    "v": "Rafael Antunes",
                    "f": null
                },
                {
                    "v": 2.310,
                    "f": null
                },
                {
                    "v": "R$2.310",
                    "f": null
                }
            ]
        },

        {
            "c": [{
                    "v": "Bianca M. Sampaio",
                    "f": null
                },
                {
                    "v": 8.542,
                    "f": null
                },
                {
                    "v": "R$8.542",
                    "f": null
                }
            ]
        },

        {
            "c": [{
                    "v": "Victor Barbosa",
                    "f": null
                },
                {
                    "v": 6.521,
                    "f": null
                },
                {
                    "v": "R$6.521",
                    "f": null
                }
            ]
        },

        {
            "c": [{
                    "v": "Maria do Carmo Prado",
                    "f": null
                },
                {
                    "v": 12.327,
                    "f": null
                },
                {
                    "v": "R$12.327",
                    "f": null
                }
            ]
        },

        {
            "c": [{
                    "v": "Maria Heloísa de Almeida",
                    "f": null
                },
                {
                    "v": 9.764,
                    "f": null
                },
                {
                    "v": "R$9.764",
                    "f": null
                }
            ]
        },

        {
            "c": [{
                    "v": "Rita de Cássia Cuaron",
                    "f": null
                },
                {
                    "v": 20.174,
                    "f": null
                },
                {
                    "v": "R$20.174",
                    "f": null
                }
            ]
        }
    ]
}

Espero ter ajudado.

solução!

por Aline de Albuquerque Martins Scallari

| 32.5k xp | 3 posts

Assistente de Tecnologia

15/12/2020

Obrigada Matheus, ajudou muito!!!

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

15/12/2020

Magina Aline, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.