How to capture the selection in a dc.js + crossfilter + d3.js chart?

Question

perhaps the answer is very obvious and has nothing to do the libraries but with general javascript, JQuery or Ajax. I am very new to javascript and I was trying to implement a dashboard using flask as the backend.

Crossfilter and dc help me select ranges on the charts and see how that affects the whole dataset. If I add a:

<span class="filter"></span>

It will display the range above the chart

But that is a class "filter" inside a span object and not a variable or data that I can get inside the code. Below is what I use to display the chart (btw, the reset button does not appear at all)

                <div class='span6' id='dc-close-chart'>
                <h4>
                    close
                </h4>
                <p>range:
                    <span class="filter">
                        <a class="reset" href="javascript:closeChart.filterAll();dc.redrawAll();" style="display: none;">
                            reset
                        </a>
                    </span>

                </p>

            </div>

I would like to be able to do the following:

Be able to access that range and store it is a variable so I can access it and maybe post it using a submit button.
Be able to replace that label for an input textbox to modify the range and change the filter accordingly.

I've been looking around the crossfilter and dc.js forums but I didn't find anything relevant, what I want to do, is it even possible?

Below the JS code, can I create a variable that captures that?

var closeChart = dc.barChart("#dc-close-chart");

   // set constants
   var n_bins = 35;
   d3.csv("/static/data2.csv", function (data) {
   console.log(data);

   data.forEach(function (d) {

       d.close = d3.round(+d.close, 1);

   });

   // Run the data through crossfilter and load our 'facts'
   var facts = crossfilter(data);
   var all = facts.groupAll();

   // count all the facts
   dc.dataCount(".dc-data-count")
       .dimension(facts)
       .group(all);



   // for Each chart numeric
   var closeValue = facts.dimension(function (d) {
       return d.close; // add the magnitude dimension
   });
   var closeValueGroupSum = closeValue.group()
       .reduceSum(function (d) {
           return d.close;
       }); // sums 
   var closeValueGroupCount = closeValue.group()
       .reduceCount(function (d) {
           return d.close;
       }) // counts 
   // extent
   var closeExtent = d3.extent(data, function (d) {
       return d.close;
   });
   // binwidth
   var closebinWidth = (closeExtent[1] - closeExtent[0]) / n_bins;
   //group
   var closeGroup = closeValue.group(function (d) {
       return Math.floor(d / closebinWidth) * closebinWidth;
   });
   // Setup the charts
   // Magnitide Bar Graph Counted
   closeChart.width(480)
       .height(150)
       .margins({
           top: 10,
           right: 10,
           bottom: 20,
           left: 40
       })
       .dimension(closeValue)
       .group(closeGroup)
       .transitionDuration(500)
       .centerBar(true)
       .gap(1) // 65 = norm
       //    .filter([3, 5])
       .x(d3.scale.linear().domain(closeExtent).range([0, n_bins]))
       .elasticY(true)
       .xUnits(function () {
           return n_bins;
       })
       .controlsUseVisibility(true)
       .colors(['LimeGreen'])
       .xAxis().tickFormat(function (v) {
           return v;
       });

   // Render the Charts
   dc.renderAll();

   });

It helps if you add the [dc.js] tag to questions about the charting library. Also a warning: [javascript] is much too vague and often attracts hate from people who don't understand what you're asking about. — Gordon
oh, thank you very much for the advice. Noted for the future. I am just starting with front end, so there is a good chance the question looks really silly, :) — comendeiro

Gordon Gordon · Accepted Answer · 2019-03-08T19:59:56

You can read the currently active filters using chart.filter() or chart.filters().

There isn't anything built in to parse filters from text, but if you figure out how to do that, you could apply the filter with

chart.replaceFilter([dc.filters.RangedFilter(min, max)])

RangedFilter docs.

replaceFilter docs.

How to capture the selection in a dc.js + crossfilter + d3.js chart?

1 Answers