Highcharts Drilldown no working in IE

Question

This fiddle does not work in IE browser, been stuck for hours here. Help me out with this. I have no idea why is it going wrong. the code works fine in Mozilla and in Chrome

Here is JSFiddle

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'column',
    events: {
      drilldown: function(e) {
        var chart = this;
        drilldowns = chart.userOptions.drilldown.series;
        series = [];
        e.preventDefault();
        Highcharts.each(drilldowns, function(p, i) {
          if (p.id.includes(e.point.drilldown)) {
            chart.addSingleSeriesAsDrilldown(e.point, p);
          }
        });
        chart.applyDrilldown();
      }
    }
  },
  title: {
    text: 'Scores par paliers'
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: -45,
      align: 'right',
      style: {
        fontFamily: 'Verdana, sans-serif'
      }
    },
    min: 0
  },
  yAxis: {
    title: {
      text: 'Score'
    },
    max: 100,
    tickInterval: 10,
    min: 0
  },
  legend: {
    enabled: true
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true
      }
    }
  },
  exporting: {
    enabled: true
  },
  tooltip: {
    formatter: function() {
      if (this.point.drilldown) {
        var s = this.key + ' : <b>' + this.y + ' %</b>';
      } else {
        var s = this.key + ' : <b>' + this.y + '</b>';
      }
      return s;
    }
  },
  series: [{
    name: 'Marches',
    colorByPoint: true,
    data: [{
        name: 'september',
        y: 89,
        drilldown: 'step1'
      },
      {
        name: 'october',
        y: 17,
        drilldown: 'step2'
      }, {
        name: 'nov',
        y: 89,
        drilldown: 'step3'
      },
      {
        name: 'dec',
        y: 17,
        drilldown: 'step4'
      }, {
        name: 'jan',
        y: 89,
        drilldown: 'step5'
      },
      {
        name: 'feb',
        y: 17,
        drilldown: 'step6'
      },
    ]
  }, {
    type: 'spline',

    data: [{
        name: 'september',
        y: 89,
        drilldown: 'step1'
      },
      {
        name: 'october',
        y: 17,
        drilldown: 'step2'
      }, {
        name: 'nov',
        y: 89,
        drilldown: 'step3'
      },
      {
        name: 'dec',
        y: 17,
        drilldown: 'step4'
      }, {
        name: 'jan',
        y: 89,
        drilldown: 'step5'
      },
      {
        name: 'feb',
        y: 17,
        drilldown: 'step6'
      },
    ]
  }],
  drilldown: {
    drillUpButton: {
      relativeTo: 'spacingBox',
      position: {
        y: 0,
        x: -50
      }
    },
    series: [{
        id: 'step1',
        name: 'Step 1',
        type: 'column',
        data: [
          ['Game 1', 100],
          ['Game 2', 100],
          ['Game 3', 100]
        ]
      },
      {
        id: 'step2',
        name: 'Step 2',
        type: 'column',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step1',
        name: 'Step 1',
        type: 'spline',
        data: [
          ['Game 1', 83],
          ['Game 2', 82],
          ['Game 3', 79]
        ]
      },
      {
        id: 'step2',
        name: 'Step 2',
        type: 'spline',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step3',
        name: 'Step 3',
        type: 'column',
        data: [
          ['Game 1', 100],
          ['Game 2', 100],
          ['Game 3', 100]
        ]
      },
      {
        id: 'step4',
        name: 'Step 4',
        type: 'column',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step3',
        name: 'Step 3',
        type: 'spline',
        data: [
          ['Game 1', 83],
          ['Game 2', 82],
          ['Game 3', 79]
        ]
      },
      {
        id: 'step4',
        name: 'Step 4',
        type: 'spline',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step5',
        name: 'Step 5',
        type: 'column',
        data: [
          ['Game 1', 100],
          ['Game 2', 100],
          ['Game 3', 100]
        ]
      },
      {
        id: 'step6',
        name: 'Step 6',
        type: 'column',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step5',
        name: 'Step 5',
        type: 'spline',
        data: [
          ['Game 1', 83],
          ['Game 2', 82],
          ['Game 3', 79]
        ]
      },
      {
        id: 'step6',
        name: 'Step 6',
        type: 'spline',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      }
    ]
  }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="width:100%;height:400px;">
</div>

which version of IE are you talking about and please update code you have tried in the question — user93, Apr 03 '17 at 12:26
Since i m new to Stack overflow i didnt know how to add fiddle in my Question so bare with me. — Sri Krishna, Apr 03 '17 at 12:30
the outer chart is working he inner drilldown is not happening — Sri Krishna, Apr 03 '17 at 12:31
the console gives no error the page loads fine but the drilldown is not happening at all — Sri Krishna, Apr 03 '17 at 12:32
https://jsfiddle.net/kbn8w68d/ these are the changes i made in the fiddle — Sri Krishna, Apr 03 '17 at 12:40
http://stackoverflow.com/questions/31340868/includes-not-working-in-all-browsers you are using method includes which is not supported in IE — user93, Apr 03 '17 at 12:42

score 0 · Accepted Answer · answered Apr 04 '17 at 00:05

0

The drilldown was not working in IE because you were using includes method which was not supported in IE. Using polyfill method for the method will make it work.

if (!String.prototype.includes) {
     String.prototype.includes = function() {
         'use strict';
         return String.prototype.indexOf.apply(this, arguments) !== -1;
     };
 }

Here is the updated code that works in IE.

answered Apr 04 '17 at 00:05

user93

1,866
5
26
45

Thanks mate , Works Fine but i dont know why we are adding the above script would be great if you could explain. New to Programming bare with me if it is a stupid question. – Sri Krishna Apr 04 '17 at 04:00
it is a polyfill. Since the string.prototype in IE does not has include method you are adding it manually. – user93 Apr 04 '17 at 04:32
http://stackoverflow.com/questions/7087331/what-is-the-meaning-of-polyfills-in-html5 hope it helps – user93 Apr 04 '17 at 04:33

Highcharts Drilldown no working in IE

1 Answers1