Gráfico de barras Chartjs mostrando dados antigos ao passar o mouse
Eu tenho um gráfico de barras criado usando chart.js. Tudo funciona bem no carregamento da página, mas quando altero o período de tempo usando uma paleta de cores, aparece uma falha. Os novos dados são trazidos, mas quando eu passa o mouse sobre eles, os dados antigos são mostrados. Eu sou novo em javascript, então espero obter ajuda. Parece que eu preciso incorporar .destroy (); de alguma forma, mas eu não sei como. Um trecho do meu código está abaixo:
function loadFTPRChart(startdate, enddate){
var BCData = {
labels: [],
datasets: [
{
label: "Pass %",
backgroundColor: "#536A7F",
data: [],
stack: 1
},
{
label: "Fail %",
backgroundColor: "#e6e6e6",
data: [],
stack: 1
},
{
label: "Auto %",
backgroundColor: "#286090",
data: [],
stack: 2
},
{
label: "Manual %",
backgroundColor: "#f0f0f0",
data: [],
stack: 2
}
]
};
$.getJSON( "content/FTPR_AM_Graph_ajax.php", {
startdate: startdate,
enddate: enddate,
location: "M"
})
.done(function( data ) {
console.log("data", data);
$.each( data.aaData, function( key, val ) {
if(val == ""){return true}
BCData.labels.push("Coater " + val[0]);
BCData.datasets[0].data.push(parseFloat(val[2]));
BCData.datasets[1].data.push(parseFloat(100-val[2]));
BCData.datasets[2].data.push(parseFloat(val[1]));
BCData.datasets[3].data.push(parseFloat(100-val[1]));
});
var option = {
responsive:true,
};
console.log("BCData", BCData);
//console.log("PrevData", data);
var ctx = document.getElementById("mybarChart2").getContext("2d");
new Chart(ctx, {
type: 'groupableBar',
data: BCData,
options: {
scales: {
yAxes: [{
ticks: {
max: 100,
},
stacked: true,
}]
}
}
});
});
}
loadFTPRChart($('#reportrange').data().daterangepicker.startDate.format('MM/DD/YYYY'), $('#reportrange').data().daterangepicker.endDate.format('MM/DD/YYYY'));
Qual é a melhor maneira de destruir os dados originais para que, quando altero o período e passe o mouse sobre o novo gráfico, os dados antigos não pisquem mais?
obrigado