Dc.js permalink or href to share render filter state?

Question

I am working on dataviz with dc.js ( http://edouard-legoupil.imtqy.com/3W-Dashboard/ )

The main limitation is that when users find a certain fact while studying the data, it’s not easy to reproduce the exact filters that they used to share their results with other users (and start the discussion). The solution may be to have permalinks for each filter state.

dc.js already has "dc.redrawAll ();" reset the entire filter, but is it possible to freeze the state of certain filters and pass it to #href?

Ideally, such a href will be shared via the sharing button or through the usual facebook / twitter sharing function.

Any piece of code or examples will really help!

Thanks in advance, Edward.

Answer 1

Here are the basic methods you want to use:

• dc.chartRegistry.list (): retrieves an array of all the diagrams loaded by dc
• chart.filters (): retrieves an array of all filters for a given chart
• chart.filter (): applies a filter to a given chart
• dc.redrawAll (): redraws all diagrams after applying external filters.

From there, it's just a matter of serializing and deserializing objects.

Here is one way to do this by building a JSON object:

var filters = []; for (var i = 0; i < dc.chartRegistry.list().length; i++) { var chart = dc.chartRegistry.list()[i]; for (var j = 0; j < chart.filters().length; j++){ filters.push({ChartID: chart.chartID(), Filter: chart.filters()[j]}); } } var urlParam = encodeURIComponent(JSON.stringify(filters)); 

Here is the reverse process of parsing a JSON string and applying filters:

 var urlParam = ""; //have user input string somehow var filterObjects = JSON.parse(decodeURIComponent(urlParam)); for (var i = 0; i< filterObjects.length; i++) { dc.chartRegistry.list()[filterObjects[i].ChartID-1].filter(filterObjects[i].Filter); } dc.redrawAll(); 

The combination of the two steps will depend on your scenario. You could save the row in the database or add it as a url parameter.

Some ribs may not be present in this code, but it seems to work for basic dc.js examples.