jeudi 6 octobre 2016

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. Like this: After

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

Here is the fiddle: http://ift.tt/2dhU1C9

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

}); });




Aucun commentaire:

Enregistrer un commentaire