The column chart renders fine on all browsers except IE8. This is such a strange error. I can't replicate it in jsfiddle (yes I tried with the Jquery version I am using-1.9.1 as well)but I put the code on it in hopes someone has faced the same problem before. http://jsfiddle.net/danushkab/kp5es/6/
$('#monthlychart').highcharts({ chart: { type: 'column', events: { click: function(event) { location = '/GVEMS_2.0/cvh/monthConsumption?date=08/2013&building=cvhcampus'; } } }, title: { text: 'August Consumption' }, xAxis: { type: 'datetime', tickInterval : 3*24 * 3600 * 1000, dateTimeLabelFormats: { day: '%e', }, labels: { rotation: 0, align: 'right', style: { fontSize: '9px', fontFamily: 'Verdana, sans-serif' } }
},
yAxis: {
title: {
text: 'kWh'
},
min: 0
},
tooltip: {
enabled:false
},
exporting: {
enabled:false
},
credits: {
enabled:false
},
legend:{
enabled:false
},
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
events: {
click: function(event) {
// do something
alert('Message goes here');
}
}
}
},
series: [{
name: 'Expected',
color: '#FFA500',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(2013, 7, 01),600 ],
[Date.UTC(2013, 7, 02), 600 ],
[Date.UTC(2013, 7, 03), 600 ],
[Date.UTC(2013, 7, 04), 600 ],
[Date.UTC(2013, 7, 05), 600 ],
[Date.UTC(2013, 7, 06), 200 ],
[Date.UTC(2013, 7, 07), 200 ],
[Date.UTC(2013, 7, 08), 600 ],
[Date.UTC(2013, 7, 09), 600 ],
[Date.UTC(2013, 7, 10), 600 ],
[Date.UTC(2013, 7, 11),600 ],
[Date.UTC(2013, 7, 12), 600 ],
[Date.UTC(2013, 7, 13), 200 ],
[Date.UTC(2013, 7, 14), 200 ],
[Date.UTC(2013, 7, 15), 600 ],
[Date.UTC(2013, 7, 16), 600 ],
[Date.UTC(2013, 7, 17), 600 ],
[Date.UTC(2013, 7, 18), 600 ],
[Date.UTC(2013, 7, 19), 600 ],
[Date.UTC(2013, 7, 20), 200 ],
[Date.UTC(2013, 7, 21), 200 ],
[Date.UTC(2013, 7, 22), 600 ],
[Date.UTC(2013, 7, 23), 600 ],
[Date.UTC(2013, 7, 24), 600 ],
[Date.UTC(2013, 7, 25), 600 ],
[Date.UTC(2013, 7, 26), 600 ],
[Date.UTC(2013, 7, 27), 200 ],
[Date.UTC(2013, 7, 28), 200 ],
[Date.UTC(2013, 7, 29), 600 ],
[Date.UTC(2013, 7, 30), 600 ],
[Date.UTC(2013, 7, 31), 600 ]
]
}, {
name: 'Actual',
color: '#008000',
data: [
[Date.UTC(2013,7,1,0,0),26924.8725],[Date.UTC(2013,7,2,0,0),27782.64],[Date.UTC(2013,7,3,0,0),24195.7125],[Date.UTC(2013,7,4,0,0),21953.483288574],[Date.UTC(2013,7,5,0,0),22638.2603125],[Date.UTC(2013,7,6,0,0),23730.837127685],[Date.UTC(2013,7,7,0,0),24663.125631104],[Date.UTC(2013,7,8,0,0),28356.6825],[Date.UTC(2013,7,9,0,0),29145.711612549],[Date.UTC(2013,7,10,0,0),25810.3125],[Date.UTC(2013,7,11,0,0),22475.425946045],[Date.UTC(2013,7,12,0,0),26638.29],[Date.UTC(2013,7,13,0,0),27391.2075],[Date.UTC(2013,7,14,0,0),24108.060698242],[Date.UTC(2013,7,15,0,0),23461.750699463],[Date.UTC(2013,7,16,0,0),23477.921824951],[Date.UTC(2013,7,17,0,0),22509.527792969],[Date.UTC(2013,7,18,0,0),22666.365],[Date.UTC(2013,7,19,0,0),25029.497049561],[Date.UTC(2013,7,20,0,0),27556.8975],[Date.UTC(2013,7,21,0,0),28670.6025],[Date.UTC(2013,7,22,0,0),29151.765],[Date.UTC(2013,7,23,0,0),26790.615],[Date.UTC(2013,7,24,0,0),22380.954549561],[Date.UTC(2013,7,25,0,0),22478.057036133],[Date.UTC(2013,7,26,0,0),25803.405],[Date.UTC(2013,7,27,0,0),29242.4175],[Date.UTC(2013,7,28,0,0),27244.129099121],[Date.UTC(2013,7,29,0,0),0],[Date.UTC(2013,7,30,0,0),0],
]
}]
});
I tried zooming in IE8 and on one zoom level I can see the columns faintly.