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));
}
});
};
Source:stackexchange.com