score: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
.
score:1
You could apply the following to a callback.. i think..
$.each(chart.options.series, function(key, value){
// filter here
}
Source: stackoverflow.com
Related Articles
- Toggling DataTable Rows Based On HighChart Legend
- Column based Highchart drilldown series assign color code to each column
- Highchart legend based on unique series/names
- Highchart Heatmap remove empty rows on legend toggle
- Highchart columnrange, color code lines based on data
- Highchart Legend into another Element (div)
- Series markers disable on lines and enable on legend in Highchart
- change legend color high charts based on data
- How to change series legend text color in HighChart chart?
- Need to apply background color to each legend text highchart
- Highchart pie legend circles
- Group series names in columns in highchart horizontal legend
- put the highchart legend to the bottom of the chart and horizontally centered
- HighChart hide other series on click legend
- How to add Legend in highchart compare stock chart
- Using the DotNet.HighCharts Library To Create Chart Based on DataTable Result From Webservice
- Why won't the legend in my highchart show values?
- Resize highchart based on container changing NOT window resize
- how to change color of line chart in highchart based on a categorical column in r?
- Passing callback function to labelFormatter in highchart legend in typescript
- Highchart - Bell curve fill colour based on percentage
- HIghchart Treemap - Add double click event on legend click
- How to add radio button in highchart legend symbol
- Responsive Highchart legend position
- Change the color of legend symbol highchart
- HighChart Pie Chart click on legend item to trigger drilldown
- Set series color based on X axis on a column Highchart
- Hiding items in highchart legend
- Resizing Highchart based on window size
- Why is the legend of my HighChart PieChart behaving irradically, when I update my series data?
- Highchart - Min max and Mean chart
- xAxis startOnTick and endOnTick options ignored on boxplots
- mouseOver in Highcharts
- Android Highchart bar chart add a text below a bar
- Server-side rendering with Highcharts in C#
- Displaying data into a graph in web service ASP.NET MVC Framework
- Highchart logarithmic X axis fail without zero values nor threshold under zero nor minimum
- Highcharts bar chart tooltip HTML positioning
- Graphing Data with HighchartsPHP (PHP Wrapper)
- High chart yAxis error
- Highcharts hover delay and not rendering with multiple series
- Showing tooltip with two or more stack columns
- Highcharts set background color and opacity
- HighCharts: How to combine custom colors with gradient
- Highcharts throwing container not found error but the container exists
- How to pass the values to the highcharts?
- How to add data tables to dynamically generated highcharts
- Create array from string - with complex types for highchart
- How to use data in rChart Highcharts
- How to pass a JSON through a variable to highchart heatmap data tag?