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 Query
- 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?
More Query from same tag
- Big data amounts with Highcharts / Highstock (async loading)
- How to tell Highcharts to set date on the x axis, and use a range of time (like 1 day)
- Highcharts won't display in Chrome App
- How to adjust the spacing of grid lines in highcharts
- Hightcharts Display Date month on X-Axis
- Highcharts remove grid
- Highcharts - change pie slice color on existing chart
- how to import highcharts offline-exporting in typescript
- Drawing a line between 2 points in line chart using Highcharts?
- Highcharts remove column defined by keys from export to CSV
- Highcharts same scale steps (equal tick interval) on x and y axis
- Highcharts Flag series tooltip does not follow yAxis
- Saving 30 keys from an array to another variable
- Cannot display name with special character in highchart
- Highcharts: Change Pie Colors By Clicking on a button
- Increasing the length of widgetboxes sDashboard
- Center Highstock chart scrollbar handle
- Highchart labels are selected if I hover over tool-tip, while dragging the chart
- Trying to use highcharts inside native script web-view. Does not work
- Grouping a stacked bar chart in Highcharts
- How to create chart using Springboot Json api
- having sorted multi column chart with unsorted series in highchart-ng module
- Exporting Chart Not Keeping Navigator Series
- Highcharts column chart. Sometimes unusable 1px stacked columns. Sometimes usable side by side columns
- Getting coordinates of chart on selecting plot in highcharts
- How to set new data then reverse to original data in Highcharts?
- Highcharts multiple x-Axis without multiple series?
- Highcharts - Updating a chart's option after initial render
- What if x and x2 values are same in X range highcharts
- User inputs in highcharts