dc.datatables.js

[Gordon Woodhull]

Since we get a lot of requests for how to use DataTables with dc.js, I started a new project with what I think is the correct approach to the problem.

https://github.com/dc-js/dc.datatables.js

Rather than building a DOM table and then asking DataTables to convert it, this directly supplies the data to the library, which is much more efficient.

Here is a demo using the stock example: https://dc-js.github.io/dc.datatables.js/

This is just the skeleton of the idea and I welcome contributions. It only supports the .dimension() and .columns() methods of dc.dataTable; some of the other methods are stubbed out for demo purposes but don't do anything.

[Callum Rodgers]

Hi Gordon

This is a great idea - really looking forward to seeing how it progresses 

Cheers 

Callum 

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/A20F856E-6FEB-4369-9605-08F4DA36A9E5%40woodhull.com.

[Seko Nana]

Hi Gordon,

      I would like to ask you about dc.datatables.js. How can I group data when render on datatable when use dc.datatable.js

when i don't use dc.datatable.js my table can group by deptGroup I use  this code .dimension(reversible_group(deptGroup)) 

but when i use dc.datatable.js table can't render it's like when use  dc.datatable.js have to show all data can't group data.

     Please help me find the solution.

เมื่อ วันพฤหัสบดีที่ 26 กรกฎาคม ค.ศ. 2018 2 นาฬิกา 29 นาที 11 วินาที UTC+7, Gordon Woodhull เขียนว่า:

[Gordon Woodhull]

Hi Seko,

First off, you might check out dc-tableview, which I think is more complete than dc.datatables.js. I didn't know about it when I wrote dc.datatables.js. It's the same principle but better fleshed out.

As far as I know, dc.datatables.js should work with a group passed as the dimension. What error do you get?

Cheers,

Gordon

-- 
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/8c6252c8-55ca-4b80-a4d3-28f91026d58co%40googlegroups.com.

[Seko Nana]

Hi Gordon,

    Thank you very much for your  kind reply.  I have try to use dc-tableview. it's same problem.

I get this error.

 DataTables warning: table id=DataTables_Table_2 - Requested unknown parameter '0' for row 0, column 0.

 For more information about this error, please see http://datatables.net/tn/4

     when use .dimension(reversible_group(deptGroup))   if i use .dimension(deptDim)  it can show table value.

reversible_group function i use (from example https://dc-js.github.io/dc.js/examples/table-on-aggregated-data.html)

function reversible_group(group) {

return {

top: function(N) {

return group.top(N);

},

bottom: function(N) {

return group.top(Infinity).slice(-N).reverse();

}

};

}

     Please help me to find solution for this problem.

best regards,

seko 

เมื่อ วันพฤหัสบดีที่ 26 กรกฎาคม ค.ศ. 2018 2 นาฬิกา 29 นาที 11 วินาที UTC+7, Gordon Woodhull เขียนว่า:

Since we get a lot of requests for how to use DataTables with dc.js, I started a new project with what I think is the correct approach to the problem.

[Gordon Woodhull]

Hi Seko,

As (sort of) explained in the datatables link, the error usually means that one of your columns doesn't match up with the data provided by your group.

I think there is something about the way we use datatables that makes the error less useful than it should be. Would be really nice if it pointed out the name of the missing column instead of referring to it by number.

Using dc.datatables.js with a group instead of a dimension works fine; I have ported the example from dc.js.

Cheers,

Gordon

[Seko Nana]

Hi Gordon,

     I can do it ,Thank you very much for you kindness.

Your example really helpful for me and It's will help for other for sure.

Wish you have a good day.

     

Best regards

Seko

เมื่อ วันเสาร์ที่ 6 มิถุนายน ค.ศ. 2020 22 นาฬิกา 16 นาที 20 วินาที UTC+7, Gordon Woodhull เขียนว่า:

[Seko Nana]

Hi Gordon,

    Your example is works fine but I would like to ask you about optional sort order ,It's not change when I  change setting to this

 .sortBy(function (d) { return d.value.number })

 .order(d3.descending)

 the value still the same it like aways sort by key and order ascending

       Please help me to find solution for this problem.

best regards,

seko 

เมื่อ วันเสาร์ที่ 6 มิถุนายน ค.ศ. 2020 22 นาฬิกา 16 นาที 20 วินาที UTC+7, Gordon Woodhull เขียนว่า:

[Gordon Woodhull]

Looks like it isn't implemented.

Again, I encourage you to use dc-tableview, which is more complete. dc.datatables.js is just a proof of concept.

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/08bd9963-ecb2-490a-aa43-e61c97d511a7o%40googlegroups.com.

[Seko Nana]

Hi Gordon,

     I would like to ask about your dc.dataTable I follow from this example https://bl.ocks.org/gordonwoodhull/2bb509445fa53a9d02e8a182597e55aa

, I want to select multiple row like this example  https://jsfiddle.net/gordonwoodhull/aofbu59y/62/ 

but I get this error when click filter table header.  

Uncaught TypeError: _chart.dimension(...).bottom is not a function

    at nestEntries (data-table.js:169)

 

at renderSections (data-table.js:141)

    at Object._chart._doRender (data-table.js:58)

    at Object._chart._doRedraw (data-table.js:207)

    

at Object._chart.redraw (base-mixin.js:736)

    at updateTable (<anonymous>:288:13)

 

at HTMLTableCellElement.tableHeaderCallback (<anonymous>:71:5)

    at HTMLTableCellElement.<anonymous> (d3.js:1526)

       I try to find solution but it's not work ,Please help me find the solution

     

Best regards

Seko

เมื่อ วันอาทิตย์ที่ 7 มิถุนายน ค.ศ. 2020 16 นาฬิกา 58 นาที 28 วินาที UTC+7, Gordon Woodhull เขียนว่า:

Looks like it isn't implemented.

Again, I encourage you to use dc-tableview, which is more complete. dc.datatables.js is just a proof of concept.

On Jun 7, 2020, at 4:35 AM, Seko Nana <thunde...@gmail.com> wrote:

Hi Gordon,

    Your example is works fine but I would like to ask you about optional sort order ,It's not change when I  change setting to this

 .sortBy(function (d) { return d.value.number })

 .order(d3.descending)

 the value still the same it like aways sort by key and order ascending

       Please help me to find solution for this problem.

best regards,

seko 

เมื่อ วันเสาร์ที่ 6 มิถุนายน ค.ศ. 2020 22 นาฬิกา 16 นาที 20 วินาที UTC+7, Gordon Woodhull เขียนว่า:

Hi Seko,

As (sort of) explained in the datatables link, the error usually means that one of your columns doesn't match up with the data provided by your group.

I think there is something about the way we use datatables that makes the error less useful than it should be. Would be really nice if it pointed out the name of the missing column instead of referring to it by number.

Using dc.datatables.js with a group instead of a dimension works fine; I have ported the example from dc.js.

Cheers,

Gordon

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-us...@googlegroups.com.

[Gordon Woodhull]

Hi Seko,

This is covered in the FAQ. I've added the error message to make it easier to search.

To support ascending order, your "fake dimension" needs to support .bottom(), and it can be added.

Here's a fork of the fiddle with it working. I don't think that bl.ock is a great example to follow since the table filters itself - everything else disappears when you click on a row. Clearly that's another reason you could not support multiple selection!

Cheers,

Gordon

To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/d341f5e0-e8a2-44b1-b1d0-f4dba7300933o%40googlegroups.com.
<eror.png>

[Seko Nana]

Thank you  for the kindness. I use fake dimension and reversible_group  then click filter table header work 

but  table filters it's not work when I don't use  reversible_group , table filters it's work. 

I try to find this solution.

Best regards

Seko

ในวันที่ จ. 15 มิ.ย. 2020 เวลา 19:33 Gordon Woodhull <gor...@woodhull.com> เขียนว่า:

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/B16C748F-6DF2-4EBD-BD83-0FD098AEEFF1%40woodhull.com.

[Gordon Woodhull]

There was a hack in there that I missed.

Even though we are using a custom filter handler, the chart checks to see if the dimension has a filter member in order to enable filtering.

So you need to add filter: true to the "fake dimension":

function reversible_group(group) {
    return {
        top: function(N) {
            return group.top(N);
        },
        bottom: function(N) {
            return group.top(Infinity).slice(-N).reverse();

        },

        filter: true

    };
}

https://jsfiddle.net/gordonwoodhull/fu5a7e0d/8/

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/CADa%3DavkzPnHx8MJ3%3DogESawJEUAjPOha3xoVLe%2Bn1bOZPAKJ2A%40mail.gmail.com.

[Seko Nana]

Hi Gordon,

             Thank you for your help. I really appreciate your kindness and support. 

Wish you have a good day.

Best regards

Seko

เมื่อ วันอังคารที่ 16 มิถุนายน ค.ศ. 2020 0 นาฬิกา 39 นาที 49 วินาที UTC+7, Gordon Woodhull เขียนว่า:

Hi Seko,

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/d341f5e0-e8a2-44b1-b1d0-f4dba7300933o%40googlegroups.com.
<eror.png>

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-us...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/B16C748F-6DF2-4EBD-BD83-0FD098AEEFF1%40woodhull.com.

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-us...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/CADa%3DavkzPnHx8MJ3%3DogESawJEUAjPOha3xoVLe%2Bn1bOZPAKJ2A%40mail.gmail.com.