sergo11221 sergo11221 - 2 months ago 36
Javascript Question

Filter categories in highcharts by using checkboxes

I would like to filter the categories by using the checkboxes. For example, if the user checks Server - only Categories belonging to class Server should be visible and redraw the highchart.

1

Like this:

After

And if the user checks all checkboxes, all categories should be visible.

Here is the fiddle: http://jsfiddle.net/Lqcrgrbh/

Thanks in advance!

$(function() {
var chart = new Highcharts.Chart('container', {
chart: {
type: 'columnrange',
inverted: true,
height: 100
},

title: {
text: null
},

xAxis: {
categories: [{"name":"Email","sys_class":"Business Service"},{"name":"Server","sys_class":"Server"}],

labels: {
formatter: function () {
return this.value.name;

},
useHTML: true
}
},
yAxis: {
type: 'datetime',
tickInterval: 1000 * 60 * 60 * 24 * 30 * 6,
title: {
text: null
},
labels: {
formatter: function () {
return Highcharts.dateFormat('%b %Y', this.value);
}
}
},

plotOptions: {
series: {
grouping: false,
stacking: 'normal',
pointPadding: 0,
groupPadding: 0.0,
allowPointSelect: true,
dataLabels: {
enabled: true,
align: 'center',
x: -10,
formatter: function() {
return this.series.name;
}
}
}
},

tooltip: {
formatter: function() {
var categories = this.x.name,
series_name = this.series.name,
low = this.point.low,
high = this.point.high,
duration = high - low;
return '<b>' +series_name + '</b><br/><b>'+ categories + ': </b>'+ Highcharts.dateFormat('%d %b %Y',
new Date(low)) + " - " + Highcharts.dateFormat('%d %b %Y',
new Date(high)) + '<br/><b>Duration: </b>' + parseInt(duration / (1000 * 60 * 60 * 24 * 365)) + " years, " + new Date(duration).getUTCMonth() + " months, " + new Date(duration).getUTCDate() + " days";
}
},

legend: {
enabled: false
},

series: [{"color":"#f47700","data":[[],[1475539200000,1570147200000]],"name":"Concept"},{"color":"#f43701","data":[[1475625600000,1570233600000],[]],"name":"Planing"}]

});
});

Answer

You should be able to edit your togglePointsByClass method so you will not hide your series, but you will change extremes on your xAxis. In this case you can use Axis.update() method.

  function togglePointsByClass(className, shouldShow, chart) {
    var isChartDirty = false;
    if (shouldShow) {
      chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
        if (category.class === className) {
          visibleArr.push(i);
        }
      });
    } else {
      chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
        if (category.class === className && visibleArr.indexOf(i) > -1) {
          visibleArr.splice(visibleArr.indexOf(i), 1);
        }
      });
    }
    if (visibleArr.length) {
      chart.xAxis[0].update({
        min: Math.min.apply(null, visibleArr),
        max: Math.max.apply(null, visibleArr)
      })
    }
  }

Here you can see simple example how it can work: http://jsfiddle.net/Lqcrgrbh/1/