Chart JS dynamic chart

Question

I am using Chart.js to build a dynamic chart (the same canvas element shows data for 30 days, 7 days and 1 day depending on the value of a drop down.

I have the code working as far as redrawing the canvas. The new data appears on drop down change, but when I mouse over the chart the data flickers and I can see the previous version of the chart. I know I need to use the .clear() function to clear the data, but I'm not sure where this should happen. On var ctx before the function is executed? Or on window.myLine?

function redrawChart(data){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(data, {
        responsive: true
    });
}

Answer 1

Try this:

Before binding data , remove the canvas too ;)

HTML:

<div id="DivChartContainer"></div>

SCRIPT:

        $('#DivChartContainer').empty();
        $('#DivChartContainer').append('<canvas id="canvas"></canvas>');
        var ctx = document.getElementById("canvas").getContext("2d");
        var myLineChart = new Chart(ctx).Bar(barChartData, {
            responsive: true,
            barValueSpacing: 10,
            barStrokeWidth: 0,
            scaleShowLabels: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
        });

Issue Solved !!