Reset or Clear Cubism Graph

Question

I'm trying to reset or clear the D3.js cubism graph so that it starts fresh. Here is the code :

$(function(){

    // create new cubism.js context to render
    var graphContext = cubism.context()
        .serverDelay(1000) // allow 1second delay
        .step(1000) // 1 second steps
        .size(650); // 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;
            values.push(Math.random());
        }
        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);    
    d3.select(graphElement).call(function(div) {
        div.append("div")
            .attr("class", "axis top")
            .call(graphContext.axis().orient("top"));
        div.append("div")
            .attr("class", "rule")
            .call(graphContext.rule());
        div.selectAll(".horizon")
            .data([graphMetric])
            .enter().append("div")
            .attr("class", "horizon")
            .call(graphContext.horizon()
                  .height(150)
             );        
    });

});

Here is a demo on jsfiddle

What is the desired behavior? It shows random data over current time. Do you want to reset the time? — Andrey, Apr 07 '17 at 11:38
I want to clear the existing data( green color) on click of a button and start over again fresh. Hope I'm clear — iJade, Apr 07 '17 at 11:40

score 1 · Accepted Answer · answered Apr 07 '17 at 12:03

I can only suggest clearing canvas by yourself. Like this

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

Full code (jsfiddle)

console.clear();

$(function(){

    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;
            values.push(Math.random());
        }
        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);    
    d3.select(graphElement).call(function(div) {
        div.append("div")
            .attr("class", "axis top")
            .call(graphContext.axis().orient("top"));
        div.append("div")
            .attr("class", "rule")
            .call(graphContext.rule());
        div.selectAll(".horizon")
            .data([graphMetric])
            .enter().append("div")
            .attr("class", "horizon")
            .call(graphContext.horizon()
                  .height(canvasHeight)
             );        
    });

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

Reset or Clear Cubism Graph

1 Answers1