dc.js filtered table export using filesaver.js

Question

I'm trying to export dc.js filtered table data using FileSaver.js.

I use the code below based on this which is fine except it export all fields (but filtered ok) whereas I would just need table specific fields which are are only a few of the fields plus 2 calculated.

d3.select('#download')
    .on('click', function() {
        var blob = new Blob([d3.csv.format(dateDim.top(Infinity))], {type: "text/csv;charset=utf-8"});
        saveAs(blob, DateT + '.csv');
    });

Is there a way I can point to the table rather that dimension?

Thanks.

EDIT: Working code below

d3.select('#download')
  .on('click', function() {
        var data = MYTABLEDIM.top(Infinity);
        {
            data = data.map(function(d) {
                var row = {};
                MYTABLENAME.columns().forEach(function(c) {
                    row[MYTABLENAME._doColumnHeaderFormat(c)] = MYTABLENAME._doColumnValueFormat(c, d);
                });
                return row;
            });
        }
        var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
        saveAs(blob, 'data.csv');
});

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

Good question.

It is actually possible to format the data according to the column definitions, by using some undocumented methods of the data table.

I've updated the example with a radio button to choose which data to download.

Here is the code that transforms and download the data as it is encoded in the table:

d3.select('#download')
    .on('click', function() {
        var data = nameDim.top(Infinity);
        data = data.map(function(d) {
            var row = {};
            table.columns().forEach(function(c, i) {
                // if you're using the "original method" for specifying columns,
                // use i to index an array of names, instead of table._doColumnHeaderFormat(c)
                row[table._doColumnHeaderFormat(c)] = table._doColumnValueFormat(c, d);
            });
            return row;
        });
        var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
        saveAs(blob, 'data.csv');
    });

Basically, when the table radio is selected, we'll transform the data row-by-row using the same functions that the table uses to format its data.

The rows will be in the order of the original data, not sorted like the table. (And strictly speaking, the columns may not be in the same order either). That would be a bigger endeavor, and might require new features in dc.js. But this works without any changes. Hope it helps!

edited May 23 '17 at 12:22

Community

1
1

answered Jul 19 '16 at 19:35

Gordon

19,811
4
36
74

Thanks Gordon, This is is really interesting functionality. I tried but both options exported the same data. There are 4 references to 'table' are they all generic api "table" or do some/all of them refer to the var 'table' that we are getting trying to get the data from – stonk Jul 20 '16 at 10:23
Hmm sorry it didn't work for you. It does what you expect in the example page right? Table refers to the dc chart here but I also used it as the radio button option name. You probably don't want the `if` around it, that's just for the example. – Gordon Jul 20 '16 at 21:08
It works now. The issue was that I didn't change the references to my table. Details in the edit. Is there also a way to specify Header names as by default it uses the names from the table definition. Thanks again. – stonk Jul 21 '16 at 08:30
I discovered that in order to retain Header names in the export just define the names in the dc.dataTable using the **{label, format}** method. [http://dc-js.github.io/dc.js/docs/html/dc.dataTable.html](http://dc-js.github.io/dc.js/docs/html/dc.dataTable.html). I was previously using the original method. – stonk Jul 21 '16 at 13:24
Ah, good point, this method doesn't cover the "original method" where your headers are defined in the HTML - not sure how to infer the column names in that case. I've added a comment about that, or, sure, just update to one of the newer methods for specifying columns. – Gordon Jul 21 '16 at 17:47
Please how can I export the fields which I have in my data-table and not those fields in my originals documents ( mongodb ) ... thank you in advance; – Jean Dupont Aug 01 '16 at 18:37
Hi @JeanDupont - I don't understand, I thought that was exactly the same question that was asked answered here. – Gordon Aug 01 '16 at 19:35
I tried your code but it gives me my original documents ... :s i don't know what i should put in the index i – Jean Dupont Aug 01 '16 at 19:41
okay, i've removed the condition that was in the original example, please try again – Gordon Aug 01 '16 at 19:44
Same result :s The csv file countain original fields in my database and not those in the dc datatable ... – Jean Dupont Aug 01 '16 at 20:53
Yeah I have no idea. This code definitely will not produce the same fields. It's clearly using the columns from the data table. Please file another question with a fiddle and I'll try to take a look. – Gordon Aug 01 '16 at 22:34

dc.js filtered table export using filesaver.js

1 Answers1