Estoy usando Doughnut para crear gráficas con información almacenada en una base de datos mysql. Cuando selecciono un determinado año y mes (yyyy-mm) usando el plugin MonthPicker se genera el gráfico en base a ese período:
<canvas id="canvasCake" class="canvasCake" height="300" width="300" style="margin: 15px 10px 10px 0"></canvas>
<input id="period" name="period" type="text" class="form-control" placeholder="Period">
El problema es que cada vez que voy seleccionando períodos crea un nuevo gráfico y al pasarle el mouse muestra los gráficos anteriores que he generado y el gráfico actual a la vez, el código fuente aparece de esta forma:
He intentado cambiar mi código poniendo usando destroy al final:
var chart_doughnut = new Chart(document.getElementById("canvasCake"), chart_doughnut_settings);
chart_doughnut.destroy();
Funciona bien, pero el problema es que ya no muestra los tooltips al pasarle el mouse como antes:
Cómo puedo hacer que muestra los tooltips al pasarle el mouse pero evitando que no muestre los gráficos anteriores?
Este es mi código JS actual:
$('#period').MonthPicker({ Button: false, MonthFormat: 'yy-mm',OnAfterChooseMonth: function(){
var period = $("#period").val();
graphCake(period);
}});
function graphCake(date){
$.ajax({
url: "myfile.php",
type: "POST",
data: {fecha: date},
dataType: "json",
success: function(resp)
{
var client01 = resp[0];
var percent01 = resp[1];
show_cake(client01,percent01);
}
});
}
function show_cake(lbl,dtd){
var chart_doughnut_settings = {
type: 'doughnut',
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: {
labels: lbl,
datasets: [{
data: dtd,
backgroundColor: ["#bdc3c7","#9b59b6","#e74c3c","#26b99a","#fff200","#3498db","#634517","#f49104","#85ca19","#006b6a","#51c5cf","#4fd167","#861106","#550469","#0e6f97","#e4e23d","#df0064","#306ed6"],
hoverBackgroundColor: ["#d2d4d6","#ba68dc","#f33e2b","#25deb7","#fff878","#58b7f6","#845a19","#ffbd5f","#9fe72f","#129291","#4bdfec","#8cf9a0","#a63429","#7a1c91","#288bb4","#f0ee5a","#fa5ba2","#4f8cf0"]
}]
},
options: {
legend: false,
responsive: false
}
}
var chart_doughnut = new Chart(document.getElementById("canvasCake"), chart_doughnut_settings);
} //show_cake