javascript - Reset or Clear Cubism Graph -

i'm trying reset or clear d3.js cubism graph starts fresh. here code :

$(function(){      // create new cubism.js context render     var graphcontext = cubism.context()         .serverdelay(1000) // allow 1second delay         .step(1000) // 1 second steps         .size(650); // 50px wide      // create new metric     // allows retrieve values source     // data-source agnostic, 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 create new element , append our     // parent container. call d3 select newly created     // div , can create 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 demo on jsfiddle

i can suggest clearing canvas yourself. 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 render     var graphcontext = cubism.context()         .serverdelay(1000) // allow 1second delay         .step(1000) // 1 second steps         .size(canvaswidth); // 50px wide      // create new metric     // allows retrieve values source     // data-source agnostic, 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 create new element , append our     // parent container. call d3 select newly created     // div , can create 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);     }); });