Integrate with DataTables.js

[brylie]

We are trying to implement table search (filtering) and pagination. DataTables.js provides these and other user-friendly table improvements. It would be really useful if the DC DataTable would optionally display using the DataTables.js library.

[brylie]

I have found the following discussions related to this feature request:

• Datatable pagination #183
• DataTable pagination #101
• Filter data in DataTables and Redraw all charts #420
• DataTables integration with DC.js
• dc.js - data table using jquery data-table plugin

[brylie]

There are also a few examples of common integration patterns:

• How to add a paginated data table for a dc.js visualisation
• StackOverflow: dcjs - reorder datatable by column

[gordonwoodhull]

This would be great.

I don't think it should be part of dc.js proper, because of the extra dependency, but it would make sense to host the project in the dc-js organization if you or someone else works it up.

Thanks for the request and the research!

[JuusoV]

@gordonwoodhull We would be interested to do this because this is very important feature for our project. How should we get started? Are there any examples or guidelines to follow?

Ping: @brylie

[gordonwoodhull]

It's really quite easy to integrate external charts with dc.js, but the "chart registry" is undocumented.

Take a look at this SO question for some hints which should get you started.

http://stackoverflow.com/questions/25336528/dc-js-listening-for-chart-group-render

I'll definitely help you get it working if you open source it in return.

[brylie]

@frenchbread and @JuusoV, lets do some pair programming on this task.

[gordonwoodhull]

@brylie and team, did you get anywhere with this? Feel free to email me (address on my user page) if you need any help.

[frenchbread]

@gordonwoodhull, we came up with solution to use dynatable.js within dc.js dataset. So basically approach itself is described here by using RefreshTable() function.
In our case, it looks like this and this.

[gordonwoodhull]

Cool, thanks for the links. Still not a general solution but I'm glad you guys got something working!

[tttp]

FYI, we integrated it on integritywatch, worked ok, don't recall any specific problem.

http://www.integritywatch.eu/

[wallinm1]

Based on the discussion and links found here, I was able to put together a dc.js-dashboard with a Leaflet.js-map that can be used as a filter, and a DataTables.js-table with expandable row details and a search box that filters all of the component graphs. With the DataTables-table, the dashboard seems to be slightly less responsive than with the regular dc.js-table, but it's not too bad.

The repo with the code can be found here, and a demo of the dashboard can be found here.

[frenchbread]

@wallinm1 Looks great! Thanks for sharing.

[brylie]

@wallinm1, great work!

I am wondering what would be involved in unifying the DataTable search field/results with the rest of the charts. E.g. when a user filters the DataTable, by using the search field, only the remaining results are displayed in the charts. This would be ideal, as all chart/table components would act as an integrated whole.

[tttp]

Hi,

So the trick I did was to create a new searchbox "graph", so that connection is done automatically, eg:
http://www.integritywatch.fr/

and it works pretty well and fast. The pro side is that you can filter on stuff that aren't in a column, the con side is that you can't select what is the column you are filtering (in theory, you could, it's just a matter of adapting the filter code
https://github.com/tttp/iw-wu/blob/master/index.html#L957

[gordonwoodhull]

@tttp contributed the search box in #936, btw - it is mostly ready to merge but could use some more people testing it. (It also has a few broken Jasmine tests.)

[jsmedmar]

This would be a great addition to dc.js

[gordonwoodhull]

I started a new project https://github.com/dc-js/dc.datatables.js

It's just the skeleton of the idea, but it mimics the interface of dc.dataTable and uses jquery.dataTables.js for rendering. So it has pagination and search "for free", so to speak, and in theory it would provide all the features of jquery.dataTables.js, which is a very rich library.

Here's an example, swapping out dc.dataTable for dc_datatable.datatable in the stock example. This is only 6724 rows but it seems plenty fast. My understanding is that jquery.dataTables.js has reasonable performance up to somewhere between 10,000-100,000 rows, as long as you use the JavaScript API, not the API where it converts a table into data.

Please try it out! Feedback and contributions welcome!