dc.js dataTable Conditional formatting using jquery dataTable

Question

I have a dashboard which is built using dc.js and i'm using the chart types dc.rowChart and dc.dataTables.
Working Scenario with without conditional formatting:
dc.rowChart - displays Top 50 Customers
dc.dataTable - displays all the fields required and filters the data based on the rowChart.
Working Scenario with conditional Formatting (on datatable rows)
In my HTML, i'm calling the jquery plugin for DataTable (for conditioanl formatting) and here is the code below:

    <script>
    $(document).ready(function() {
    $("#Table").DataTable( {
    /*
        fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if ($(nRow).find('td:eq(7)').text()<'0') {
              $(nRow).find('td:eq(7)').addClass('color');
          }   
    }

    */                
                 columns : [
                 { title : "Customer Name" },

                 { title : "YoY Rank Change" ,

                 render: function ( data, type, row ) {
                if (data > '0') {
                    return '<p class="positive">'+data+'</p>';
                } else {
                    return '<p class="negative">'+data+'</p>';
                } } },

                 { title : "Jan'19 Qty" },
                 { title : "Dec'18 Qty" },
                 { title : "Nov'18 Qty" },
                 { title : "Oct'18 Qty" },
                 { title : "Sep'18 Qty" },
                 { title : "Aug'18 Qty" }
                ]   

       } );
    } );

    $.extend( true, $.fn.dataTable.defaults, {
        "searching": true,
        "ordering": false,
        "paging": false,
        "info": false,

    } );
    </script>

CSS:

    .negative {
    background-color:rgba(255,0,0,1.00);
    color: #fff;
    text-align: center;
    }
   .positive {
    background-color:rgba(50,205,50,1.00);
    color: #fff;
    text-align: center;
    }

ISSUE HERE When i render the page first time, everything with the datatable with conditional formatting works fine
But when i click on Row Chart to filter datatable based on Customer's, Conditional formatting is gone...
Any help is much appreciated to fix this.
I have tried almost all the stack answers but i'm not able to achieve it.
references used below:
1. How to color code rows in a table dc.datatable?
2. How do I apply conditional formatting using datatables.js?
3. Color code a data table in dc.js 4. How to color code rows in a table dc.datatable? ( This is opted out as i dont want to color code entire row)

@Gordon my survivor at all times.. Looking for your inputs please!!

Please consider using dc-tableview or dc.datatables.js instead of creating a dc.dataTable and then transforming it with $.DataTable - these libraries deal with redraw better. As you point out, $.DataTable is a one-way transformation and then nothing gets updated after that (without more work, which is what these libraries are about). — Gordon
– Gordon, Commented Mar 13, 2019 at 16:41
@Gordon, i'm not able to fix it using dc-tableview nor using dc.datatables.js. Here is my fiddle jsfiddle.net/ssbs/tf5ce7j0/51 — dataguy
– dataguy, Commented Mar 13, 2019 at 20:04

Gordon · Accepted Answer · 2019-03-14 13:19:22Z

1

I see that you are still on dc.js 2.0, so I didn't attempt to port this to dc.datatables.js or dc-tableview. I still think that would be more maintainable.

As I noted in the comments, $.DataTable is a one-way transformation: once you have done this, there is no way to update the table, because dc.dataTable doesn't recognize the DOM structure anymore, and DataTable doesn't have a way to reinitialize.

There might be some smart way to get DataTables to update the data (and this is what the libraries do). It's also madly inefficient to first build a table and then construct a DataTable using the DOM as a data source.

But whatever, let's just get this working by building the DataTable from scratch every time the dc.dataTable is drawn.

The way to do this is to listen for the table's pretransition event, remember if we've already initialized DataTable, and if we have, destroy the old instance:

var dt = null;
table.on('pretransition', function() {
    if(dt)
        dt.destroy();
    dt = $("#dc-data-grid").DataTable( {
        // as before
    } );
});

Fork of your fiddle. I had to fix a few other things, but I won't go into the details.

answered Mar 14, 2019 at 13:19

Gordon

20.2k4 gold badges39 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dataguy Over a year ago

Its really not enough if i just say "THANK YOU".. It worked like a "Charm", I owe you a lunch / Dinner.. Let me know if you are here anytime to Atlanta :)

dataguy Over a year ago

I used to be a Tableau developer and i did some bits and pieces of poc's using dc.js.. You know what?? Almost 15 dashboards built using dc.js and users loved it. All credit to the community and contributors :) Long Live..

Gordon Over a year ago

That is so nice to hear. Thank you!

Collectives™ on Stack Overflow

dc.js dataTable Conditional formatting using jquery dataTable

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related