2

Estou implementando gráficos na minha aplicação feita em PHP,usando Framework Chart.js,passando o dados da query via JSON,para montar o gráfico,porém quando vou renderizar o mesmo apresenta o seguinte error:

Erro

Segue código:

$(document).ready(function() {
    $.ajax({
        url: "http://des.ead.prodemge.gov.br/gea/develop/graficos/data.php",
        method: "GET",
        success: function(dados) {
        console.log(dados);
        var departament = [];
        var acesso      = [];

        for( var i in dados){
            departament.push("Departamento "+dados[i].department);
            acesso.push(dados[i].qtdacesso);
        }

        var chartdado = {
            labels:departament,
            datasets:[
                {
                    label: 'Departamento Acessos',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor:  'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    dados:acesso

                }
            ]
        };

        var ctx = $("#mycanvas");
        var grafico = new (ctx, {
            type:'bar',
            data:chartdado
        });
    },
    error: function(dados){
        console.log(dados);
    }
});

});
3
  • Verifiquei as variáveis datasets,realizei a troca data:acesso,porém continua apresentando o mesmo error...seguinte critica do console.log "TypeError: ({type:"bar", data:{labels:["Departamento undefined" conforme imagem acima.
    – Rafael Luz
    26/10/2017 às 13:13
  • Atualizei minha publicação com crítica de erro. @AndréLuizdeGusmão..
    – Rafael Luz
    26/10/2017 às 13:36
  • @AndréLuizdeGusmão commitei código no GIT github.com/Rafael2016/Web...
    – Rafael Luz
    27/10/2017 às 10:45

1 Resposta 1

0

Consegui reproduzir o seu erro, no seguinte trecho:

var grafico = new (ctx, {
    type:'bar',
    data:chartdado
});

Segundo a documentação do Chart.js pra criar um gráfico você precisa instanciar o objeto Chart deles, logo o seu código fica assim:

var grafico = new Chart(ctx, {
    type:'bar',
    data:chartdado
});

Eu fiz um fiddle com um exemplo funcionando, como eu não consegui acessar a url http://des.ead.prodemge.gov.br/gea/develop/graficos/data.php eu fiz um mock utilizando a url https://www.mocky.io/v2/59f3146a320000b207a624b8.

Segue o Fiddle: https://jsfiddle.net/andredgusmao/zhcv9dap/

2
  • Show de bola,contudo,realizei alguns testes com uns dados extraído de banco para montar gráfico,meu arquivo json apresenta um erro. "..SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data" segue URL :rafaeluz.com.br/gea_dev/dashboard/dados.php
    – Rafael Luz
    28/10/2017 às 19:15
  • Estou retornando somente JSON,pelo que andei lendo,meu controlador esta retornando void,falaram para colocar um "return" e "@RequestMappin",porém não sei aonde,meu arquivo que montar dados ou javascript que montar o gráfico. GIT : goo.gl/7ShZbb
    – Rafael Luz
    29/10/2017 às 22:34

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .