Chartjs-Many Flots using ChartJS and Ajax get data values

1👍

You have to recreate the canvas again for each call in AJAX, try to destroy the canvas and create it for each call

    $(document).ready(function () {
        VisaoGeralProcessamento();    
        UltimosProcessosExecutados();    
        ValorMedioPorEmpresaDeOrigem();
    });
    
    let chart1;
    let chart2;

    function perc2color(perc) {
        var r, g, b = 0;
        if (perc < 50) {
            r = 255;
            g = Math.round(5.1 * perc);
        }
        else {
            g = 255;
            r = Math.round(510 - 5.10 * perc);
        }
        var h = r * 0x10000 + g * 0x100 + b * 0x1;
        return '#' + ('000000' + h.toString(16)).slice(-6);
    }
    
    function UltimosProcessosExecutados() {    
        $.ajax({
            url: '/ProcessoIA/DadosDashboard',
            type: 'GET',
            data: {
                'grafico': ""
            },
            success: function (data) {
                var rotulos = [];
                var dados = [];
    
                $(data.dados).each(function (index, item) {
                    rotulos.push(item.Chave);
                    dados.push(item.Valor);
                });
    
                var chartUltimosProcessosExecutados = document.getElementById('ultimosProcessosExecutados').getContext('2d');
                    if (chart1) {
                        chart1.destroy();
                    }
                chart1 = new Chart(chartUltimosProcessosExecutados, {
                    type: 'line',
                    data: {
                        labels: rotulos,
                        datasets: [{
                            label: 'Valor Médio dos Matchs (%)',
                            data: dados,
                            borderColor: 'rgb(75, 192, 192)',
                            backgroundColor: 'rgb(75, 192, 192)',
                            tension: 0.1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                suggestedMax: 100
                            }
                        }
                    }
                });
            },
            error: function (request, error) {
                alert("Request: " + JSON.stringify(request));
            }
        });
    }
    
    function ValorMedioPorEmpresaDeOrigem() {
        $.ajax({
            url: '/ProcessoIA/DadosDashboard',
            type: 'GET',
            data: {
                'grafico': "ValorMedioPorEmpresaDeOrigem",
            },
            success: function (data) {
                $(data.dados).each(function (index, item) {
                    var rotulos = [];
                    var dados = [];
                    var coresDeFundo = [];
    
                    $(data.dados).each(function (index, item) {
                        rotulos.push(item.Chave);
                        dados.push(item.Valor);
                        coresDeFundo.push(perc2color(item.Valor));
                    });
    
                    var chartValorMedioPorEmpresaDeOrigem = document.getElementById('divValorMedioPorEmpresaDeOrigem').getContext('2d');
                    if (chart2) {
                        chart2.destroy();
                    }

                    chart2 = new Chart(chartValorMedioPorEmpresaDeOrigem, {
                        type: 'bar',
                        data: {
                            labels: rotulos,
                            datasets: [{
                                label: 'Valor Médio dos Matchs (%)',
                                data: dados,
                                borderColor: coresDeFundo,
                                backgroundColor: coresDeFundo,
                                tension: 0.1
                            }]
                        }
                    });
                });
            },
            error: function (request, error) {
                alert("Request: " + JSON.stringify(request));
            }
        });
    };

Leave a comment