Accepted answer

I can only suggest clearing canvas by yourself. Like this

$(graphElement).find('canvas')[0].getContext('2d').clearRect(0, 0, canvasWidth, canvasHeight);

Full code (jsfiddle)



    var canvasWidth = 650, canvasHeight = 150;
    // create new cubism.js context to render
    var graphContext = cubism.context()
        .serverDelay(1000) // allow 1second delay
        .step(1000) // 1 second steps
        .size(canvasWidth); // 50px wide

    // create a new metric
    // this allows you to retrieve values from some source
    // this is data-source agnostic, so this does not matter.
    var graphMetric = graphContext.metric(function(start, stop, step, callback) {
        var values = [];
        start = +start;
        stop = +stop;
        while (start < stop) {
            start += step;
        callback(null, values);

    // here we create a new element and then append it to our
    // parent container. Then we call d3 to select the newly created
    // div and then we can create a chart
    var graphElement = document.createElement("div");
    $("#insertElement").append(graphElement); {
            .attr("class", "axis top")
            .attr("class", "rule")
            .attr("class", "horizon")

  $('#reset').on('click', function () {
    $(graphElement).find('canvas')[0].getContext('2d').clearRect(0, 0, canvasWidth, canvasHeight);

Related Query

More Query from same tag