Estoy usando la biblioteca Chart.js para dibujar un gráfico de barras, pero quiero destruir el gráfico de barras y crear un nuevo gráfico en el mismo lienzo. He intentado de esta manera limpiar el lienzo:
var chart = new Chart( ctx, { type : "bar", data : data1, options : options }); $("#btn1").on("click", function() { if (chart) chart.destroy(); var chart = new Chart( ctx, { type : "bar", data : data1, options : options }); });¿Lo estoy llamando bien? En ButtonClick llamo a esta función que usa el mismo lienzo.
<canvas id="graph" width="700px" height="300px"></canvas> var ctx = $("#graph");EDITAR:
Cambio el código pero solo funciona la primera vez que hago clic en el botón, cuando cambio por segunda vez, no volverá a funcionar.
Lo más complicado es que para trabajar necesito cambiar el nombre de los 2 gráficos
var ctx = document.getElementById('graph'); var myChart = new Chart( ctx, { type : "bar", data : data1, options : options }); $("#btn2").on("click", function() { if (myChart) myChart.destroy(); var ctx = document.getElementById('graph'); var chart = new Chart( ctx, { type : "bar", data : data2, options : options }); });Gracias a todos por la ayuda pero ya lo conseguí, y para futuras dudas, pondré mi solución aquí para las personas que necesiten
var ctx = document.getElementById('graph').getContext('2d'); var myBarChart = new Chart( ctx, { type : "bar", data : data1, options : options }); $("#btn1").on("click", function() { var context1 = document.getElementById('graph').getContext('2d'); if (myBarChart) myBarChart.destroy(); myBarChart = new Chart( context1, { type : "bar", data : data1, options : options }); }); $("#btn2").on("click", function() { var context2 = document.getElementById('graph').getContext('2d'); if (myBarChart) myBarChart.destroy(); myBarChart = new Chart( context2, { type : "bar", data : data2, options : options }); });