I''m working on an application using AnnotationCharts that has been running very well for some time now in Chrome, Edge, Firefox, Internet Explorer, and Opera browsers. Yesterday it worked as expected in all browsers.
Today, it no longer works in the Internet Explorer, but still works correctly in the other 4 browsers. It does not render at all in IE. The intended chart area is blank. I generate a program in my code, write it out, and execute
it in an iframe. The code I'm writing out that works in the 4 browsers, but not IE follows.
<HTML>
<HEAD>
<SCRIPT TYPE='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'State');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addRows([ [new Date(1997,0,1), 61.0, undefined, undefined],
[new Date(1999,0,1), 67.1, undefined, undefined],
[new Date(2001,0,1), 64.5, undefined, undefined],
[new Date(2003,0,1), 67.5,'Funding Approved','The Universal Coverage Act funding is allocated.'],
[new Date(2003,0,15), 67.5,'Insurance For All','The Universal Coverage Act of 2003 is proposed.'],
[new Date(2003,2,15), 67.5,'Insurance Finally','The Universal Coverage Act of 2003 passes.'],
[new Date(2004,1,1), 67.5,'Funding Begins','The Universal Coverage Act funding of 2003 begins with a bang.'],
[new Date(2005,0,1), 69.2, undefined, undefined] ]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true, displayZoomButtons: false, allValuesSuffix: "'%", fill: 40, thickness: 1, colors:['#809FFF'], displayRangeSelector: false});
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID='chart_div' STYLE='WIDTH:800px;HEIGHT:380px;POSITION:relative;LEFT:1.5%;OVERFLOW:HIDDEN;'>
</DIV>
</BODY>
</HTML>