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?
As per the example above, you’d call
myLine.destroy()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
What if I have multiple bar charts, I cannot use a single global variable for all.
made the example above work for me.