15 49.0138 8.38624 1 1 4000 1 https://celulanerd.com.br 100 0
theme-sticky-logo-alt
theme-logo-alt

Gráfico com Chart.js e Ajax jQuery e select

Esses dias precisei criar um gráfico finaceiro para um software em php. Escolhi trabalhar com o html5, javascript Chart.js, Bootstrap, jQuery, pois o sistema em php exigia que tivesse uma opção para o usuário selecionar o ano do relatório gráfico, ou seja, ter um select form, Após a seleção do ano o software em php envia por ajax jQuery os dados e retorna com o array em json para atualização do gráfico Charts.js. Confira abaixo como ficou o algorítmo completo.

Bibliotecas utilizadas:

Primeiro adicionaremos ao código html os elementos necessários incluindo o select form:

<div class="col-12 col-md-12">
    <div class="card">
        <div class="card-body">
            <div class="d-block col-md-12">
<div class="page-title-box">
<div class="page-title-right mt-0 mb-2" id="boxSaldo">
</div>
<h4 class="page-title-left">
Saldo Gráfico anual <span id="carregaSaldo" class="font-14 text-muted mb-1 pt-1 pb-1"><i class="fa fa-fw fa-spinner fa-spin"></i> Carregando..</span>
<small class="d-block font-11 text-muted m-0 p-0 mt-2">Obs: O Saldo é calculado com base nos recibos Pagos - Despesas.</small>
</h4>
</div> <select name="selAno" id="selAno" class="form-control"> <option value="2019" selected="">2019</option> <option value="2020">2020</option> </select> </div> <div class="mt-3 chartjs-chart"> <canvas id="boxGrafico" height="400" style="width:100%"></canvas> </div> </div> </div> </div>

Agora no javascript inicializamos a variável que irá corresponder ao gráfico, para posteriormente podermos atualizar o Chart.js com ajax jQuery. Antes da função vamos atualizar o javascript numeral.js com a localização do Brasil, para que a formatação saia em real.

numeral.locale('pt-br');
var ctx = document.getElementById('boxGrafico').getContext('2d');
var boxGrafico = new Chart(ctx, {
    type:"bar",
    data: {
        labels:["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
        datasets: []
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                    display: true,
                    labelString: "Valores R$"
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, chart){
                    return 'R$ ' + numeral(tooltipItem.yLabel).format('0,[00].00');
                }
            }
        },
        responsive: false
    }
});

 

Agora vamos cria a função em javascript para integragar com o Ajax jQuery, essa integração deve retornar um array em json, com isso podemos acessar qualquer informação facilmente com o jQuery. com essa função podemos atualizar o gráfico com novas informações vindas do banco de dados, por exemplo: MySql.

function carregaGrafico() {
    $("#carregaSaldo").show();
    $("#boxSaldo").html('<div class="bg-soft-danger pt-2 pb-2 pr-4 pl-4"><h4 class="m-0 p-0">R$ 0,00</h4></div>');
    $.ajax({
        url: 'ajax.php?acao=grafico&ano='+$("#selAno").val(),
        success: function (data) {
            $("#carregaSaldo").hide();
            $("#boxSaldo").html(data.boxSaldo);
            boxGrafico.data.datasets = data.grafico;
            boxGrafico.update();
        }
    });
}

E por fim criamos o event on change no select form, para funcionar após a leitura do documento que será feita com o jQuery. O javascript já irá carregar automaticamente pois o ano selecionado sempre será o ano corrente (faça isso na sua programação), depois basta mudar o ano no select e aguardar o resultado. 🙂

$(document).ready(function () {
    carregaGrafico();
    $("#selAno").on('change', function(e){
        carregaGrafico();
        e.preventDefault();
    });
});

Eaí.. curtiu?

Compartilhe esse conhecimento:
Categoria:Ajax, JavaScript, jQuery
POST ANTERIOR
WordPress WhatsApp Plugin
PRÓXIMO POST
As vantagens em Criar um Sistema Personalizado

0 Comentário

    RESPONDER