I have a html page with 5 dc.js charts.

I would like to clear all the charts (pletely remove them from the page) given a certain event.

something like:

dc.clearAll();

I checked the API's and such a method does not exist.

I implemented a workaround with jquery:

$('#chart1').empty();
$('#chart2').empty();
$('#chart3').empty();
$('#chart4').empty();
$('#chart5').empty();

The workaround works but i was wondering if there was a cleaner way to do it, preferably with the API.

I have a html page with 5 dc.js charts.

I would like to clear all the charts (pletely remove them from the page) given a certain event.

something like:

dc.clearAll();

I checked the API's and such a method does not exist.

I implemented a workaround with jquery:

$('#chart1').empty();
$('#chart2').empty();
$('#chart3').empty();
$('#chart4').empty();
$('#chart5').empty();

The workaround works but i was wondering if there was a cleaner way to do it, preferably with the API.

• javascript
• dc.js

• You could also do it with d3 if you don't want the extra dependency of jquery - d3.selectAll("svg").remove(). – elsherbini Commented Apr 22, 2014 at 16:39

2 Answers 2

If when you create the charts you name them, you can use the api like so:

chartOne.resetSvg()
chartTwo.resetSvg()

etc. This will leave behind an empty <svg> tag in the div.

d3.selectAll("svg").remove() worked for me.