Clear canvas after drawing a chart (AJAX Request)

Currently I am trying to draw a new chart after a POST request, which transfers the JSON to the “canvas” element. Unfortunately the graph starts jumping around and gets “fuzzy” between the grid lines. This happens every time when the JSON data has changing datasets - which means, that there are different amounts of grid lines zu draw.

So far I have tried

ctx.clearRect(0, 0, canvas.width, canvas.height);

and

myLineChart = new Chart(ctx).Line(jsonData, {
    responsive: true,
    bezierCurveTension : 0.3
});
window.myLine = myLineChart;
//... chart is drawn

// before drawing a new chart
myLine.clear();

Both without success. Do you have any tipps/hints to destroy the canvas before redrawing on it?

[asadnauman]

Hi Waniel,

create a global variable and use that variable while creating chart. e-g

var mychart; function drawChart() { var ctx = document.getElementById(“age-wise-chart-line”).getContext(“2d”); mychart= new Chart(ctx).Line(lineData, lineOptions); }

Now you can use mychart.clear() or mychart.destroy()

Regards, Asad

[rohandalvi]

What if I have multiple bar charts, I cannot use a single global variable for all.