Dynamic div creation for dc.js and implementing crossfiltered dashboard

Question

I am creating a generic dashboard where you upload any data -- with any number of columns, one should be able to visualize the bar charts dynamically using dc.js. Till now, I had been creating individual div element for each column (when file column types and count is known). What should I do to make the div creation automatic as per the number of columns of csv file uploaded sothat the charts are created accordingly with crossfilter enabled ?

Note: Generic means the file can have any number of columns and all should be bar charts. What I want is -- According to the number of columns, it should create dynamically the bar charts as we implement in dc.js(crossfiltered feature -- creating dimensions and group according to the number of columns in the csv file)

Gordon Gordon · Accepted Answer · 2018-03-19T22:58:14

I would usually just generate the divs with d3:

var cols = ['col1', 'col2', 'col3'];
var divs = d3.selectAll('div.yourchart').data(cols);
divs.enter().append('div').attr('class', 'yourchart');

var dcCharts = new Array(cols.length);
divs.each(function(col, i) {
  var dimension = cf.dimension(function(d) { return d[col]; });
  var group = dimension.group(); // or however you want to bin them
  var bar = dc.barChart(this) // pass div element as parent/root instead of using selector
      .dimension(dimension)
      .group(group)
      // ...
  dcCharts[i] = bar;
});

dc.js charts can be constructed given a parent/root element instead of a selector, useful here.

Dynamic div creation for dc.js and implementing crossfiltered dashboard

1 Answers