Table Chart Group

58 views
Skip to first unread message

sevil yılmaz

unread,
Aug 10, 2021, 10:25:54 AM8/10/21
to dc-js user group
Hello,

When I add a filter group to the charts, they filter within themselves, but I can not click on the row in the table and filter in the related group.

For example, I have a group called group1 and group 2, when I choose from the select menu, the relevant pie chart is filtered.

When I click on the first pie chart, the table is filtered, but when I click on a row from the table, the pie chart is not filtered.

I hope I was able to explain. I made a  example.


Thank you very much in advance for your help.

Sevil,

Gordon Woodhull

unread,
Aug 10, 2021, 11:01:38 AM8/10/21
to dc-js user group

Hi Sevil,

There are a couple of reasons for this:

1. In this example, you are using two chart groups, but you only have one crossfilter instance. Usually there will be one chart group per crossfilter instance, because the chart group defines which charts will interact with each other, and when you set a filter on one of the dimensions of a crossfilter instance, that affects all the other dimensions & groups of that crossfilter instance.

2. After setting the filters for the table and the table's dimension, you immediately reset the filters to null:
        vendedorTable.filter(null);
        marketDim3.filter(null);

I tried using only one chart group and commenting out these resets, and it appears to work:

But perhaps this misses the intent of your example?

Cheers,
Gordon

sevil yılmaz

unread,
Aug 11, 2021, 4:54:13 AM8/11/21
to dc-js user group
Hi Gordon,

I need to use more than one chart group.Thank you so much for your help.
      vendedorTable.filter(null);
        marketDim3.filter(null);
When I remove these lines, I can filter on the table click  in more than one chart group.


I have one more problem, when I give size  to the  table, it doesn't sort correctly.
    .sortBy(function(d) {
       return d.value.TotalCost
     })
     .order(d3.descending)
     .size(Infinity)

When I use these lines, the first 5 data is correct as in the screenshot.
table1.png
but when I give size(5) to the table, the correct data is not coming. How can i solve this?

table2.png
Cheers,
Sevil


10 Ağustos 2021 Salı tarihinde saat 18:01:38 UTC+3 itibarıyla gor...@woodhull.com şunları yazdı:

Gordon Woodhull

unread,
Aug 11, 2021, 6:36:16 AM8/11/21
to dc.js user group
Hi Sevil,

I'm glad it worked! I agree, the chart groups had nothing to do with it.

The reason you are seeing the wrong top 5 is because dc.dataTable uses group.top(k) in order to fetch the data. So you will get weird results if the group order disagrees with your sort function.

You can fix it by specifying group.order():

  var dm1 = marketDim3.group().reduce(reduceAdd, reduceRemove, reduceInitial).order(d => d.TotalCost)


Here is the related issue: https://github.com/dc-js/dc.js/issues/1457

Why is it like this? Historical reasons, evolution, mumble mumble.

Cheers,
Gordon

On Aug 11, 2021, at 4:54 AM, sevil yılmaz <programc....@gmail.com> wrote:

Hi Gordon,

I need to use more than one chart group.Thank you so much for your help.
      vendedorTable.filter(null);
        marketDim3.filter(null);
When I remove these lines, I can filter on the table click  in more than one chart group.


I have one more problem, when I give size  to the  table, it doesn't sort correctly.
    .sortBy(function(d) {
       return d.value.TotalCost
     })
     .order(d3.descending)
     .size(Infinity)

When I use these lines, the first 5 data is correct as in the screenshot.
<table1.png>
but when I give size(5) to the table, the correct data is not coming. How can i solve this?

<table2.png>
Cheers,
Sevil


10 Ağustos 2021 Salı tarihinde saat 18:01:38 UTC+3 itibarıyla gor...@woodhull.com şunları yazdı:

Hi Sevil,

There are a couple of reasons for this:

1. In this example, you are using two chart groups, but you only have one crossfilter instance. Usually there will be one chart group per crossfilter instance, because the chart group defines which charts will interact with each other, and when you set a filter on one of the dimensions of a crossfilter instance, that affects all the other dimensions & groups of that crossfilter instance.

2. After setting the filters for the table and the table's dimension, you immediately reset the filters to null:
        vendedorTable.filter(null);
        marketDim3.filter(null);

I tried using only one chart group and commenting out these resets, and it appears to work:

But perhaps this misses the intent of your example?

Cheers,
Gordon

On Tuesday, August 10, 2021 at 10:25:54 AM UTC-4 programc....@gmail.com wrote:
Hello,

When I add a filter group to the charts, they filter within themselves, but I can not click on the row in the table and filter in the related group.

For example, I have a group called group1 and group 2, when I choose from the select menu, the relevant pie chart is filtered.

When I click on the first pie chart, the table is filtered, but when I click on a row from the table, the pie chart is not filtered.

I hope I was able to explain. I made a  example.


Thank you very much in advance for your help.

Sevil,

-- 
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/7f765403-c78f-47d7-8041-4e03273d2f7cn%40googlegroups.com.
<table2.png><table1.png>

sevil yılmaz

unread,
Aug 13, 2021, 9:17:38 AM8/13/21
to dc-js user group
Hi Gordon,
Thank you so much for your help.
Well, I'll ask one more thing. When I use the remove_empty_bins function to not show data that is zero, the sorting is not  displayed  correctly.
What can I do for it.
https://jsfiddle.net/developersevil/d3vt7jkq/22/

Cheers,
Sevil
11 Ağustos 2021 Çarşamba tarihinde saat 13:36:16 UTC+3 itibarıyla gor...@woodhull.com şunları yazdı:

Gordon Woodhull

unread,
Aug 13, 2021, 9:56:33 AM8/13/21
to dc.js user group
I don't understand. The table is sorted descending by TotalCost.

No matter what I select in the select menu or pie chart, this appears to hold.

What is incorrect?



Gordon Woodhull

unread,
Aug 13, 2021, 10:42:58 AM8/13/21
to dc.js user group
Oh, I got it, the old bug recurs.

We need to change remove_empty_bins to use group.top():

     function remove_empty_bins_top(source_group) {
                return {
                    top: function (N) {
                        return source_group.top(Infinity).filter(function (d) {
                            return d.value.TotalCost !== 0;
                        }).slice(0, N);
                    }
                };
            }


Reply all
Reply to author
Forward
Message has been deleted
0 new messages