Is it possible to filter data by selecting a table element with dc.js?
I'm working off the nasdaq example with my own data.
In the datatable I have my own column called name :
.columns([
function (d) {
return d.date;
},
function (d) {
return d.name
},
.....
I have the crossfilter imension and group set up as follows which I think is correct.
var name = ndx.dimension(function (d) {
return d.name
});
var nameGroup = name.group();
Edit Here is the html where name is dc-table-column_2
<table class="table table-hover dc-data-table dc-chart">
<thead>
<tbody>
<tr class="dc-table-group info">
<tr class="dc-table-row">
<td class="dc-table-column _0">05/01/2012</td>
<td class="dc-table-column _1">12/31/9999</td>
<td class="dc-table-column _2">Eric</td>
</tr>
</tbody>
When someone clicks on the name in the table I want to filter all the charts based on this name and render some metadata in another div (not related to d3 or crossfilter). I can't find an example where this is achieved. I was trying to use d3s onClick() event but I haven't been successful. Can someone point me towards a solution?
Without seeing where you are trying to implement on click, or the DOM, I would suggest something like the following general structure for implementing onClick:
d3.selectAll("DOM element associated with names in the table").on("click", function () {
//this line to store clicked item value for use later
var value = this.value;
d3.select("ids of charts").
set properties to filter here using stored value
d3.select("unrelated DOM id").text(stuff you want rendered);
Alternately you can just use the html onclick property for the non d3 related stuff and the d3.selectAll().on("click") to filter your table.
See here for what appears to be a related question:
Redrawing histograms with Crossfilter and D3
Or here where I did something conceptually similar:
http://www.ryansloan.org/energapp/app.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With