Useful fragment, text filtering row charts.

[Blair Nilsson]

This is something I have found useful, I'm posting it to the group so others can copy it / use it.

We have a chart for service items....

  service_item_name = items.dimension(function(d) { return d.service_item_name; });

  service_item_name_total = service_item_name.group().reduceSum(function(d) {d.line_total});

  service_item_name_chart = dc.rowChart('#service_item_name_chart')

      .dimension(service_item_name)

      .group(service_item_name_total)

      ....

and some html...

        <div id='service_item_name_chart' class="dc-chart">

          <legend>Service Item

            <a class="reset" href="javascript:service_item_name_chart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

          </legend>

        </div>

Here is how to add a text filter to the rowchart.

First in the html, add a text box.

        <div id='service_item_name_chart' class="dc-chart">

          <legend>Service Item

            <input type='text' id='service_item_name_filter'>

            <a class="reset" href="javascript:service_item_name_chart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

          </legend>

        </div>

Then add a new dimension in the code.

  filter_service_item = items.dimension(function(d) { return d.service_item_name; });

  

Then add the code to take the text and filter the result, and redraw when they type. (this version uses jquery, but you can do it by hand if you like)

  $('#service_item_name_filter').on('keyup', function() {

    text = $('#service_item_name_filter').val();

    filter_service_item.filterFunction(function(d) {return d.toLowerCase().indexOf(text.toLowerCase())>-1});

    dc.redrawAll();

  })

and you are done!

Filtered text rowcharts are easy :)

--- Blair

Anyone else been doing some nice little extra bits in dc.js?

[Ladislav Koščo]

if you happen to have all records counter with reset all filters, do not forget to that as well

<div class="dc-data-count">

       <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a href="javascript: dc.filterAll(); $('#service_item_name_filter').val('').trigger('keyup'); dc.renderAll();">Reset All</a>

</div>

--laci