Question

I have the following set up:

HighChart Graph
--------------------

DataTable Header
Month             | Day       | Total   | etc
----------------------------------------
June              |     2     | 10      | ...
June              |     5     | 20      | ...
July              |    29     | 10      | ...
Aug               |     1     | 30      | ...

The series on my chart are titled as the months.

What I wanted to do is, when the legend is toggled it will hide the rows which MATCH the clicked series.

The question is, how do you integrate HighChart callbacks with DataTables’ filters?

Answer 1

In this answer, I assume that the variable dataTable is equal to that of the DataTable object.

First,

Lets set up the callback from HighCharts.

...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                 // Filters Go Here
            }
       },
       showInLegend: true 
    }
}
...

Secondly,

We are going to take this a step further and add detect when the series are toggled:

filters = []; // Set this inside your $(document).ready(function(e) {
...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                 tmp = [];

                 // Series was Visible, Now Hidden
                 if(this.visible){
                     // Add Action Here
                 }
                 // Series was Hidden, Now Visible
                 else{
                     // Add Action Here
                 }
            }
       },
       showInLegend: true 
    }
}
...

Thirdly,

We now know when the series were toggled. We can detect from which state they came from and which state they are going. We are not going to set up the filters for the DataTables.

filters = []; // Set this inside your $(document).ready(function(e) {
...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                 tmp = [];

                 // Series was Visible, Now Hidden
                 if(this.visible){
                     filter.push(this.name);
                 }

                 // Series was Hidden, Now Visible
                 else{
                     var series = this.name;
                     $.each(filter, function(k, v){
                         if(v != series){
                             tmp.push(v);
                         }
                     });

                     filter = tmp;
                 }
            }
       },
       showInLegend: true 
    }
}
...

Lastly,

We now have the filter array populated with the names of the series from the HighCharts Legend. We need to take this array, and apply it to a filter.

filters = []; // Set this inside your $(document).ready(function(e) {
...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                  tmp = [];

                 // Series was Visible, Now Hidden
                 if(this.visible){
                     filter.push(this.name);
                 }

                 // Series was Hidden, Now Visible
                 else{
                     var series = this.name;
                     $.each(filter, function(k, v){
                         if(v != series){
                             tmp.push(v);
                         }
                     });

                     filter = tmp;
                }

                regex = (filter.length > 0 ? '^((?!('+filter.join('|')+')).)*$' : "");

                dataTable.fnFilter(
                    regex,
                    0, // set this to your column index
                    true
                );
            }
       },
       showInLegend: true 
    }
}
...

Done!

The RegEx used above, ^((?!('+filter.join('|')+')).)*$ will perform a negative look-ahead with an implode of the filter array with a | (pipe) character as the glue for an OR.