1

Olá,

Primeiramente vou dar uma breve introdução de como funciona o meu sistema para que vocês entendam exatamente a minha dificuldade. Talvez fique um pouco grande, me desculpe.

Dentro do meu sistema, quando o usuário se loga, é feita uma consulta no meu banco de dados por meio de requisição AJAX que filtra os dados e os retorna, preenchendo certas lacunas do conteúdo presente. Como no código abaixo, vejam os ids que são alterados pelos dados:

function inicializaDashboard(){
    $.ajax({
        url: 'datacenter/functions/inicializaDashboard.php',
        async: true,
        type: 'POST',
        dataType: 'JSON',
        data: {rede: '9999999', codLoja: '9999999', mes: '9999999'},
        success: function(data){
            //console.log(data);
            $("#filtro-rede").text(data[0]['rede']);
            $("#filtro-loja").text(data[0]['loja']);
            $("#filtro-mes").text(data[0]['mesReferencia']);
            $('#cpfsEnviados').text(data[0]['cpfsEnviados']);
            $("#finalizadas").text(data[0]['propostasFinalizadas']);
            $("#aprovadas").text(data[0]['propostasAprovadas']);
            $("#indiceAprovacao").text(data[0]['indiceAprovacao']+'%');
            $("#primeirasCompras").text(data[0]['primeirasCompras']);
            $("#segurosQnt").text(data[0]['seguros']);
        },
        error: function(data){
            console.log('Ocorreu um erro durante a execução do dashboard: '+ data);
        }
    });
}

E assim os dados são mostrados, mas caso o usuário queira visualizar dados mais específicos, ele parte para os seletores dropdowns que atuam da mesma forma, repondo os dados em questão:

$("#botao-filtrar").click(function(){
$(".mask-loading").fadeToggle(500);
    $.ajax({
        url: 'datacenter/functions/filtraDashboardGeral.php',
        async: true,
        type: 'POST',
        dataType: 'JSON',
        data: {rede: $("#dropdown-parceria").val(), codLoja: $("#dropdown-loja").val(), mes: $("#dropdown-mes").val()},
        success: function(data){
            //console.log(data);
            $("#filtro-rede").text(data[0]['rede']);
            $("#filtro-loja").text(data[0]['loja']);
            $("#filtro-mes").text(data[0]['mesReferencia']);
            $('#cpfsEnviados').text(data[0]['cpfsEnviados']);
            $("#finalizadas").text(data[0]['propostasFinalizadas']);
            $("#aprovadas").text(data[0]['propostasAprovadas']);
            $("#indiceAprovacao").text(data[0]['indiceAprovacao']+'%');
            $("#primeirasCompras").text(data[0]['primeirasCompras']);
            $("#segurosQnt").text(data[0]['seguros']);
            mascararFiltros();
            $('#graficoBarra').replaceWith('<canvas id="graficoBarra"></canvas>');
            $('#graficoLinha').replaceWith('<canvas id="graficoLinha"></canvas>');
            gerarGraficos();
            $(".mask-loading").fadeToggle(500);
        },
        error: function(){
            alert('Ocorreu um erro durante o processamento dos filtros. Tente novamente!');
            $(".mask-loading").fadeToggle(500); 
        }
    });
});

O código se assemelha muito. E até aí tudo funciona perfeitamente, minha dificuldade é, tenho este código que me gera dois gráficos do chart.js:

   //======================= INICIO GRAFICO BARRAS =====================================================================
        var optionsBar = {
            responsive: true
        };

        var dataBar = {
            labels: ['Outubro', 'Novembro', 'Dezembro'],
            datasets: [
                {
                    label: "CPF's Enviados",
                    backgroundColor: "rgba(0,51,90,0.8)",
                    borderColor: "rgba(0,51,90,0.9)",
                    borderWidth: 2,
                    hoverBackgroundColor: "rgba(0,51,90,0.9)",
                    hoverBorderColor: "rgba(0,51,90,1)",
                    data: [100,200,350]
                },
                {
                    label: "Propostas Finalizadas",
                    backgroundColor: "rgba(0,130,229,0.8)",
                    borderColor: "rgba(0,130,229,0.9)",
                    borderWidth: 2,
                    hoverBackgroundColor: "rgba(0,130,229,0.9)",
                    hoverBorderColor: "rgba(0,130,229,1)",
                    data: [50,65,72]
                },
                {
                    label: "Propostas Aprovadas",
                    backgroundColor: "rgba(43,139,74,0.8)",
                    borderColor: "rgba(43,139,74,0.9)",
                    borderWidth: 2,
                    hoverBackgroundColor: "rgba(43,139,74,0.9)",
                    hoverBorderColor: "rgba(43,139,74,1)",
                    data: [25,35,63]
                }
            ]
        };

    //======================= INICIO GRAFICO LINHAS =====================================================================

        var optionsLine = {
            responsive: true
        };

        var dataLine = {
            labels: [<?=$mesReferencia?>],
            datasets: [
                {
                    label: "Finalizadas",
                    fill: false,
                    backgroundColor: "rgba(255,108,0,0.7)",
                    borderColor: "rgba(255,108,0,1)",
                    borderWidth: 4,
                    data: [50,65,72]
                },
                {
                    label: "Aprovadas",
                    fill: false,
                    backgroundColor: "rgba(255,246,0,0.6)",
                    borderColor: "rgba(255,246,0,1)",                    
                    borderWidth: 4,
                    data: [25,35,63]              
}
            ]
        };     

    //======================= FUNÇÃO GERA GRÁFICOS =====================================================================

        function gerarGraficos(){
            var ctx = document.getElementById("graficoBarra").getContext("2d");
            var BarChart2 = new Chart(ctx, {
                  type: 'bar',
                  data: dataBar,
                  options: optionsBar
            });

            var ctx2 = document.getElementById("graficoLinha").getContext("2d");
            var LineChart = new Chart(ctx2, {
                  type: 'line',
                  data: dataLine,
                  options: optionsLine
            });
        }

        window.onload = gerarGraficos;

        gerarGraficos();

Gostaria de saber como posso fazer para colocar por exemplo, os valores dentro de data['0']['cpfsEnviados] dentro de seu devido local dentro do data no script do meu gráfico. Notem que no meu success eu até coloquei um código para recalcular o canvas do gráfico para tentar visualizar alguma mudança, mas nada.

Alguma ideia, sugestão, solução?

Muito obrigado!

1 Resposta 1

2

Para renderizar novamente os gráficos, você só precisa chamar novamente a função gerarGraficos. Mas como você quer que seja renderizado com novos dados, as variáveis dataLine e dataBar precisam serem alterados.

Você precisa fazer com que essas variáveis fiquem no mesmo escopo da função $.ajax.

// dados pré-definidos
var dataBar = [];
var dataLine = [];

gerarGraficos();

$.ajax({
    url: 'URL...',
    success: function (data) {
        // faça o tratamento dos dados e atualize
        // as variáveis dos gráficos.

        dataBar = data;

        gerarGraficos();
    }
});
9
  • Bom @Rafael Mafra, eles não possuem nenhum relacionamento, eles estão em .JS diferentes e sim, os dados da requisição devem substituir os valores gráficos! Poderia dar um exemplo do que vc falou? Não entendi muito bem. Commented 22/12/2016 às 10:43
  • Quando você chama a função gerarGraficos, serão usados os dados armazenados nas variáveis dataLine e dataBar. Se você quiser alterar os dados dos gráficos que já foram gerados, você precisa configurar novos dados nas variáveis e chamar gerarGraficos novamente. Aqui um exemplo: jsfiddle.net/cxtfmpjo/1
    – relaxeaza
    Commented 22/12/2016 às 12:28
  • entendi o que vc quis dizer. Mas no caso exemplificado, você está apenas recarregando o gráfico por meio de dados pré-definidos. E no meu caso que eu necessito que os dados venham do success da requisição AJAX? Como chamar os dados? Commented 22/12/2016 às 15:08
  • Agora eu entendi o que você realmente quer. Vou editar minha resposta.
    – relaxeaza
    Commented 22/12/2016 às 18:24
  • Obrigado @Rafael, estou no aguardo da resposta! Commented 22/12/2016 às 18:27

Você deve fazer log-in para responder a esta pergunta.

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