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:

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

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í:

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


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 579 suscriptores

Relacionado:  PHPWord: agregar marca de agua, TOC y gráficas a documento de Word con PHP

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/

8 Comments

Josué Argueta · septiembre 27, 2019 a las 10:48 am

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

    parzibyte · septiembre 27, 2019 a las 10:50 am

    Es un placer ayudar 🙂
    Te invito a seguirme en mis redes sociales y a suscribirte a mi canal de YouTube
    Saludos

Eli · julio 15, 2019 a las 11:02 am

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.

    parzibyte · julio 16, 2019 a las 4:18 pm

    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

Alexander Guandique · febrero 14, 2019 a las 10:50 pm

Era justo lo que necesitaba gracias me sirvió perfectamente

Alexis Montilla · agosto 5, 2018 a las 9:18 pm

Perfecto!!!!
Lo que estaba buscando…

    parzibyte · agosto 5, 2018 a las 9:44 pm

    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 🙂

daniel · julio 11, 2018 a las 4:30 pm

Hola amigo, un gran aporte me sirvió mucho, Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: