sort stacked bar - Javascript highcharts

Javascript examples for highcharts:Stack Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Stack Chart

Description

sort stacked bar

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function() {//from   w w w. java 2  s .  c  om
  var chart;
  var sortData = function(chartSource) {
     console.time('sorting');
    var series = chartSource.series;
    var axis = chartSource.xAxis[0];
    var categories = [];
    if ($.isArray(series)) {
      var ser = $.grep(series, function(ser, seriesIndex) {
        return ser.visible;
      })[0];
      $.each(ser.data, function(dataIndex, datum) {
        var obj = {
          name: datum.category,
          index: dataIndex,
          stackTotal: datum.stackTotal
        }
        categories.push(obj);
      });
    }
    categories.sort(function(a, b) {
      var aName = a.name.toLowerCase();
      var bName = b.name.toLowerCase();
      var aTotal = a.stackTotal;
      var bTotal = b.stackTotal;
      if (aTotal === bTotal) {
        return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
      } else {
        return ((aTotal > bTotal) ? -1 : ((aTotal < bTotal) ? 1 : 0));
      }
    });
    var mappedIndex = $.map(categories, function(category, index) {
      return category.index;
    });
    categories = $.map(categories, function(category, index) {
      return category.name;
    });
   // console.log(categories);
    //console.log(mappedIndex);
    axis.setCategories(categories);
    $.each(series, function(seriesIndex, ser) {
      var data = $.map(mappedIndex, function(mappedIndex, origIndex) {
        return ser.data[mappedIndex].y;
      });
      ser.setData(data, false);
    });
    chartSource.redraw();
      console.timeEnd('sorting');
  };
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'bar'
      },
      title: {
        text: 'Stacked column chart'
      },
      xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Total fruit consumption'
        }
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          events: {
            hide: function() {
              sortData(chart);
            },
            show: function() {
              sortData(chart);
            }
          }
        }
      },
      series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
      }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
      }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
      }]
    }, function(chart) {
      sortData(chart);
    });
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials