1

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">

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

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

1 respuesta 1

-1

Antes de agregar la información, intenta eliminar el iframe del DOM:

Ejemplo:

$(".canvasCake iframe").remove()
3
  • debes leer Cómo responder y explicar por que?
    – user75901
    el 28 dic. 2018 a las 14:35
  • si hace lo que le dices explica el por que?
    – user75901
    el 28 dic. 2018 a las 14:35
  • si, que pena, lo que pasa es que cada que agregas la información que traes en el canvas, se crea un <iframe> y se va acumulando lo que tenias antes con lo nuevo y por eso al pasar el mouse por encima se muestranlas graficas vieja(s) con la nueva el 28 dic. 2018 a las 14:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.