jquery - How to show/hide categories with checkbox using highcharts?

Question

I want show/hide some categories in highcharts using checkbox, can you help me? This is my code so far:

var categories = chart.categories[0];
if(categories.graphic.visibility == 'hidden'){
    categories.graphic.show();
} else {
    categories.graphic.hide();
}

Answer 1

This seems to be a pretty common question in a variety of forms, and with a variety of solutions.

I have created a demo to do this in a way that is dynamically built upon a pre-processed category array and series object.

• It uses the array of categories to build a list of checkboxes for each.

• On click, it looks through the list to determine which boxes are checked.

• Then it loops through the predefined series object, and for each series loops through the data and builds a new array containing only the points for which the boxes are checked.

• Uses setData on each series to update the points/categories displayed.

• relies on each data point having the name attribute specified, and each series having an id specified.

Demo:

• http://jsfiddle.net/jlbriggs/nLcu3f7h/

There are a number of other things going on in the fiddle - it dynamically creates box plots out of randomly generated data, and dynamically builds a category array - these are unimportant to the purpose. They result in what is mentioned above: a categories array, which is used to a) build the checkboxes, and b) populate the name for each data point, and a series object to loop through to build the chart series.

{{ edit ---------------

A slimmer version, using 3 column series:

• http://jsfiddle.net/jlbriggs/wqwawuLq/

--------------- /edit }}

The functions that matter are:

• buildCheckboxes()

• rebuildData()

• The $(document).on('click', '#check-boxes input'... listener

This requires proper pre-processing of your data, but should be able to work with any number and type of series.