dynamically resize charts for different screen sizes

[KatiRG]

dc.js gitter recommends:

-remove width parameter from chart definition -make an event listener to check for window resizing: window.addEventListener('resize', dc.renderAll); -dc should automatically set the width based on the size defined in index.html, e.g. <div class=".col-md-5"><div class="dc-chart"></div></div>

Status: in progress, not working yet!

[KatiRG]

Suggestion from dc.js gitter group:

http://jsbin.com/wahivokidi/edit?html,js,output

Note: the arrow function in js is

chart.width(function(el){return el.parentNode.getBoundingClientRect().width;});
chart.height(function(el){return el.parentNode.getBoundingClientRect().height;});

Problem: this solution only works for the latest version of dc.js ( 2.0.0-beta.20), and the viz uses 1.7.0. Switching to the beta version messes everything up...

[KatiRG]

update from dc.js gitter group:

in 2.0 you can use a function as the argument for width but in 1.7 you must specify width and height as numbers. Suggestion:

window.addEventListener('resize', function(){
  dc.chartRegistry.list().forEach(function(chart){
    var _bbox = chart.anchor().parentNode.getBoundingClientRect();
   chart.width(_bbox.width).height(_bbox.height).render();
  });

Problem: chart.anchor() is defined but chart.anchor().parentNode is undefined. });

[KatiRG]

Latest update: http://jsbin.com/zimomiqawu/edit?html,js,output

Leaflet complaining that Map container is already initialized...stay tuned...