Highchart-graph does not appear in internet explorer - highcharts

Question

I computed a graph in Highcharts which words perfectly well in any browser but internet explorer (see https://jsfiddle.net/statistik_tg/e69Lp3cv/). I had to add a drill down and drill up as the main chart and the drilled down chart include other metrics. Since then, it hasn't been working in IE.
Does anybody know asolution to let the code run in IE, too? Thanks in advance!
$(document).ready(function() {
var chart = {
type: 'column',
marginBottom: 220,
spacingBottom: 85,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Thurgau': {
name: 'Übrige',
color: '#878787',
data: [
['2009', 106],
['2010', 107],
['2011', 102],
['2012', 102],
['2013', 100],
['2014', 102],
['2015', 107],
['2016', 120],
['2017', 121]
]
}
},
drilldowns2 = {
'Thurgau': {
name: 'Phyisotherapie',
color: '#B5B5B5',
data: [
['2009', 79],
['2010', 83],
['2011', 82],
['2012', 85],
['2013', 89],
['2014', 103],
['2015', 115],
['2016', 128],
['2017', 132]
]
}
},
drilldowns3 = {
'Thurgau': {
name: 'Laboratorien',
color: '#E39E00',
data: [
['2009', 42],
['2010', 43],
['2011', 45],
['2012', 48],
['2013', 55],
['2014', 57],
['2015', 63],
['2016', 69],
['2017', 73]
]
}
},
drilldowns4 = {
'Thurgau': {
name: 'Spitex',
color: '#CD3700',
data: [
['2009', 48],
['2010', 49],
['2011', 53],
['2012', 58],
['2013', 62],
['2014', 68],
['2015', 75],
['2016', 80],
['2017', 83]
]
}
},
drilldowns5 = {
'Thurgau': {
name: 'Pflegeheime',
color: '#8B0000',
data: [
['2009', 192],
['2010', 186],
['2011', 182],
['2012', 182],
['2013', 179],
['2014', 169],
['2015', 171],
['2016', 175],
['2017', 173]
]
}
},
drilldowns6 = {
'Thurgau': {
name: 'Apotheken',
color: '#FFED00',
data: [
['2009', 119],
['2010', 121],
['2011', 126],
['2012', 136],
['2013', 141],
['2014', 145],
['2015', 159],
['2016', 178],
['2017', 188]
]
}
},
drilldowns7 = {
'Thurgau': {
name: 'Ärzte Laboranalysen',
color: '#00B4E8',
data: [
['2009', 52],
['2010', 45],
['2011', 46],
['2012', 47],
['2013', 51],
['2014', 54],
['2015', 58],
['2016', 61],
['2017', 62]
]
}
},
drilldowns8 = {
'Thurgau': {
name: 'Ärzte Medikamente',
color: '#0064e6',
data: [
['2009', 339],
['2010', 331],
['2011', 327],
['2012', 329],
['2013', 335],
['2014', 330],
['2015', 342],
['2016', 361],
['2017', 369]
]
}
},
drilldowns9 = {
'Thurgau': {
name: 'Ärzte Behandlung (ohne Labor)',
color: '#27408B',
data: [
['2009', 477],
['2010', 490],
['2011', 509],
['2012', 521],
['2013', 563],
['2014', 586],
['2015', 632],
['2016', 646],
['2017', 655]
]
}
},
drilldowns10 = {
'Thurgau': {
name: 'Spital ambulant',
color: '#a2c510',
data: [
['2009', 474],
['2010', 481],
['2011', 524],
['2012', 533],
['2013', 579],
['2014', 597],
['2015', 602],
['2016', 658],
['2017', 675]
]
}
},
drilldowns11 = {
'Thurgau': {
name: 'Spital stationär',
color: '#3CA433',
data: [
['2009', 724],
['2010', 733],
['2011', 736],
['2012', 727],
['2013', 874],
['2014', 865],
['2015', 844],
['2016', 833],
['2017', 793]
]
}
},
series = drilldowns[e.point.name],
series2 = drilldowns2[e.point.name];
series3 = drilldowns3[e.point.name];
series4 = drilldowns4[e.point.name];
series5 = drilldowns5[e.point.name];
series6 = drilldowns6[e.point.name];
series7 = drilldowns7[e.point.name];
series8 = drilldowns8[e.point.name];
series9 = drilldowns9[e.point.name];
series10 = drilldowns10[e.point.name];
series11 = drilldowns11[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.addSingleSeriesAsDrilldown(e.point, series3);
chart.addSingleSeriesAsDrilldown(e.point, series4);
chart.addSingleSeriesAsDrilldown(e.point, series5);
chart.addSingleSeriesAsDrilldown(e.point, series6);
chart.addSingleSeriesAsDrilldown(e.point, series7);
chart.addSingleSeriesAsDrilldown(e.point, series8);
chart.addSingleSeriesAsDrilldown(e.point, series9);
chart.addSingleSeriesAsDrilldown(e.point, series10);
chart.addSingleSeriesAsDrilldown(e.point, series11);
chart.applyDrilldown();
chart.yAxis[0].update({
min: 0,
max: 4000
})
}
},
drillup(){
this.yAxis[0].update({
min: 0,
max: 100
})
}
}
};
var plotOptions = {
column: {
stacking: 'normal'
}
};
var title = {
text: "Fast die Hälfte der Kosten im Kanton Thurgau für Spitalbehandlungen",
style: {
fontSize: '18px',
},
align: 'left'
};
var subtitle = {
text: 'Struktur der Bruttokosten nach Kostengruppe, Kanton Thurgau und Schweiz, 2017, Anteile in %/CHF pro versicherte Person¹',
style: {
fontSize: '12px'
},
align: 'left'
};
var yAxis = {
gridLineWidth: 1,
title: '',
lineWidth: 1,
max: 100
};
var xAxis = {
type: 'category'
};
var tooltip = {
valueSuffix: ' CHF'
};
var series = [{
name: 'Übrige',
tooltip: {
valueSuffix: ' %'
},
color: '#878787',
data: [{
name: 'Thurgau',
y: 3.7,
drilldown: true
},{
name: 'Schweiz',
y: 3.5,
drilldown: false
}]
},{
name: 'Physiotherapie',
tooltip: {
valueSuffix: ' %'
},
color: '#B5B5B5',
data: [{
name: 'Thurgau',
y: 4.0,
drilldown: true
},{
name: 'Schweiz',
y: 3.1,
drilldown: false
}]
},{
name: 'Laboratorien',
color: '#E39E00',
tooltip: {
valueSuffix: ' %'
},
data: [{
name: 'Thurgau',
y: 2.2,
drilldown: true
},{
name: 'Schweiz',
y: 2.8,
drilldown: false
}]
},{
name: 'Spitex',
color: '#CD3700',
tooltip: {
valueSuffix: ' %'
},
data: [{
name: 'Thurgau',
y: 2.5,
drilldown: true
},{
name: 'Schweiz',
y: 2.7,
drilldown: false
}]
},{
name: 'Pflegeheime',
tooltip: {
valueSuffix: ' %'
},
color: '#8B0000',
data: [{
name: 'Thurgau',
y: 5.2,
drilldown: true
},{
name: 'Schweiz',
y: 5.7,
drilldown: false
}]
},{
name: 'Apotheken',
tooltip: {
valueSuffix: ' %'
},
color: '#FFED00',
data: [{
name: 'Thurgau',
y: 5.7,
drilldown: true
},{
name: 'Schweiz',
y: 11.8,
drilldown: false
}]
},{
name: 'Ärzte Laboranalysen',
tooltip: {
valueSuffix: ' %'
},
color: '#00B4E8',
data: [{
name: 'Thurgau',
y: 1.9,
drilldown: true
},{
name: 'Schweiz',
y: 1.7,
drilldown: false
}]
},{
name: 'Ärzte Medikamente',
tooltip: {
valueSuffix: ' %'
},
color: '#0064e6',
data: [{
name: 'Thurgau',
y: 11.1,
drilldown: true
},{
name: 'Schweiz',
y: 6.3,
drilldown: false
}]
},{
name: 'Ärzte Behandlungen (ohne Labor)',
tooltip: {
valueSuffix: ' %'
},
color: '#27408B',
data: [{
name: 'Thurgau',
y: 19.7,
drilldown: true
},{
name: 'Schweiz',
y: 22.6,
drilldown: false
}]
},{
name: 'Spital ambulant',
tooltip: {
valueSuffix: ' %'
},
color: '#a2c510',
data: [{
name: 'Thurgau',
y: 20.3,
drilldown: true
},{
name: 'Schweiz',
y: 19.1,
drilldown: false
}]
},{
name: 'Spital stationär',
tooltip: {
valueSuffix: ' %'
},
color: '#3CA433',
data: [{
name: 'Thurgau',
y: 23.8,
drilldown: true
},{
name: 'Schweiz',
y: 20.7,
drilldown: false
}]
}];
var drilldown = {
series: []
};
var legend = {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
padding: 25,
symbolPadding: 10,
symbolWidth: 25,
margin: -10,
/*maxHeight: 150,*/
alignColumns: false,
reversed: false,
itemStyle: {
fontWeight: 'normal'
}
};
var credits = {
text: '<b>Hinweis: Für den Vergleich der Kostenanteile im Kanton Thurgau von 2009-2017 klicken Sie <br><b>auf den Balken oder die Balkenbeschriftung zum Thurgau<br>¹ Vergleich Thurgau-Schweiz Anteile in %, Vergleich Thurgau 2009-2017 Anteile in CHF<br>Dienststelle für Statistik Kanton Thurgau <br>Datenquellen: Bundesamt für Gesundheit, Monitoring der Krankenversicherungs-<br>Kostenentwicklung',
href: false,
style: {
color:'#999999',
cursor: false,
fontSize:'10px'
},
position: {
align: 'left',
x: 10,
y: -90
}
};
var exporting = {
allowHTML: true,
enabled: true,
filename:'2019_07_Krankenversicherungskosten_Brutto_2017',
buttons: {
contextButton: {
menuItems: "printChart separator downloadPNG downloadJPEG downloadSVG".split(" ")
}
},
/*csv: {
columnHeaderFormatter: function (item) {
if(item instanceof Highcharts.Axis) {
return 'Quartal';
} else {
if(item instanceof Highcharts.Series) {
return item.name;
}
}
}
}*/
};
var responsive = {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
};
var highchartsOptions = Highcharts.setOptions ({
lang: {
decimalPoint: '.',
thousandsSep: "'",
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
contextButtonTitle: 'Drucken, Download, Export',
downloadJPEG: 'Download JPEG Bild',
downloadPNG: 'Download PNG Bild',
downloadSVG: 'Download SVG Vektor Bild',
downloadXLS: 'Download XLS',
printChart: 'Bild drucken',
viewData: 'Datentabelle ein-/ausblenden',
resetZoom: "Zoom zurücksetzen",
resetZoomTitle: "Zoom zurücksetzen",
drillUpText: "Zurück",
numericSymbols: null //otherwise by default ['k', 'M', 'G', 'T', 'P', 'E']
}
});
colors = ["#878787","#B5B5B5","#E39E00","#CD3700","#8B0000","#3CA433","#a2c510","#FFED00","#00B4E8","#0064e6","#27408B"]
var json = {};
json.chart = chart;
json.plotOptions = plotOptions;
json.title = title;
json.subtitle = subtitle;
json.yAxis = yAxis;
json.xAxis = xAxis;
json.tooltip = tooltip;
json.series = series;
json.drilldown = drilldown;
json.legend = legend;
json.credits = credits;
json.exporting = exporting;
json.responsive = responsive;
json.highchartsOptions = highchartsOptions;
json.colors = colors;
$('#2019_07_Krankenversicherungskosten_Brutto_2017').highcharts(json);
});

Answer 1

There is an error in IE developer tools console - you need to change JS line 230 from this:
drillup(){
into this:
drillup: function() {
and then it works fine in IE11