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

Share Improve this question Follow asked Apr 15, 2014 at 10:44 Amr H. Abd ElmajeedAmr H. Abd Elmajeed 1,5211515 silver badges4141 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.