CODEWITHSUNDEEP
javascriptcheckboxhighcharts
sergo11221
sergo11221

Reputation: 35

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"}]

});
});

Upvotes: 2

Views: 1901

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

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/

Upvotes: 1

Related Questions