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?