javascript

Reiniciar o limpiar gráfica de Chart.js

Introducción

Ayer estuve trabajando con Chart.js, una librería para generar gráficas. Debido a que la gráfica era actualizada cada que el usuario seleccionaba una opción distinta, a veces se mostraban algunas barras encima de otras, tooltips que no deberían estar y cosas de esas.

Así que investigando encontré la solución para reiniciar, limpiar y destruir una gráfica en Chart.js. En otras palabras, estaremos reiniciando la gráfica.

Nota: puedes ver un tutorial de cómo trabajar con gráficas en AngularJS aquí.

Reiniciar gráfica de Chart.js

Ponemos una variable global que albergará nuestra gráfica:

See the gist on github.

Y cada que la vayamos a actualizar, hacemos esta comprobación:

See the gist on github.

Con el if comprobamos si existe nuestra variable. En caso de que exista, la limpiamos y destruimos.

Así, estamos reiniciando nuestra gráfica. De modo que el código completo podría quedar así:

See the gist on github.

De esta manera, antes de asignar a la variable, limpiamos la gráfica si ya existe.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • Buenas amigo saludos tengo un problema con un grafico si me muestra las actualizaciones pero me sale la primera grafica siempre, como si no eliminara la primera grafica

  • muchas gracias crack me funciono a la perfeccion, estoy trabajando con graficos dinamicos por rengo de fechas y me funciono a la perfeccion

  • Hola, apliqué esta misma forma, pero tengo varias gráficas en la misma vista y cuando pongo esa declaración en cada una de las gráficas, ya no se muestran y cuando se la dejo a una sola, funciona bien para esa misma, pero para las demás ya no, ¿habrá alguna forma de poder limpiar las otras sin que afecte a las demás? Gracias, de ante mano.

    • Hola, ¿cómo estás obteniendo la gráfica? y, ¿en dónde la estás guardando? en este ejemplo solo hay una gráfica, así que se guarda en window, pero en el caso de muchas, la variable se debería guardar en otro lugar o en otras variables. Si pones el código y un ejemplo que pueda reproducir sería mucho mejor
      Saludos

    • Me da gusto que te haya funcionado. Te invito a que te suscribas a mi blog ingresando tu correo electrónico en la barra lateral de la derecha. Gracias :)

Entradas recientes

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

4 días hace

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…

4 días hace

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…

4 días hace

Plugin ESC POS – Actualización 3.4.0: imprimir HTML

El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…

5 días hace

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

2 semanas hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

2 semanas hace

Esta web usa cookies.