Boxplot chart - Extra category shown with no data - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

Boxplot chart - Extra category shown with no data

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() {//  w  w  w. ja  v a 2s .c o m
  var redrawEnabled = true;
  $('#container').highcharts({
    chart: {
      type: 'boxplot',
      events: {
        render: function() {
          if (redrawEnabled) {
            redrawEnabled = false;
            var series = this.series,
              xAxis = this.xAxis[0],
              categories = xAxis.categories.slice(),
              categoryFlags = new Array(categories.length).fill(false), // indicates if any point has a value for category with the given index
              breaks = [],
              correspondingPoint;
            // find out which categories are 'used'
            for (var i = 0; i < categories.length; i++) {
              for (var ii = 0; ii < series.length; ii++) {
                if (!series[ii].visible) {
                  continue;
                }
                correspondingPoint = series[ii].data.find((point) => point.x === i);
                if (correspondingPoint) {
                  categoryFlags[i] = true;
                  break;
                }
              }
            }
            // create and apply breaks
            categoryFlags.forEach(function(flag, index) {
              if (!flag) {
                breaks.push({
                  from: index - 0.5,
                  to: index + 0.5
                });
              }
            });
            //console.log(breaks)
            xAxis.update({
              breaks: breaks
            });
          }
          redrawEnabled = true;
        }
      }
    },
    title: {
      text: ''
    },
    legend: {
      enabled: true
    },
    xAxis: {
      categories: ['Merchant 1', 'Merchant 2', 'Merchant 3']
    },
    plotOptions: {
      series: {
        grouping: true,
        pointWidth: 20
      }
    },
    yAxis: {
      title: {
        text: 'Wage'
      }
    },
    series: [{
        name: 'Banana',
        data: [
          [0.0, 40, 50, 50, 50, 80]
        ]
      }, {
        name: 'Mango',
        data: [
          [0.0, 40, 50, 50, 50, 80],
          [2.0, 40, 50, 50, 50, 80]
        ]
      },
      {
        name: 'Halwa',
        data: [
          [0.0, 40, 50, 50, 50, 80],
          [1.0, 100, 200, 200, 200, 500]
        ]
      }
    ]
  });
});

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

Related Tutorials