Google Charts error with IE11 emulator for IE8

Question

I am aware of an issue the IE8 emulator in IE11 causing Permission Denied errors when using Google Visualization API to add charts to a webpage.

However I have a number of pages that use charts on the website I am developing and I noticed this error was only occurring with certain pages. On further investigation I found that the error only occurs when calling a function to render graphs using a for loop (code example below). It also came to my attention that this caused the tooltips to stop working in Google Chrome.

I am able to work around this by manually calling each function sequentially outside of the for loop which is fine when I only need to render a small number of graphs (5 in the example below), but is not practical for larger numbers of charts.

Can someone please shed some light on why the issue is arising when a for loop is used and is there a work around that means I don't have to call the same function multiple times manually.

Many thanks in advance for any help.

    // This code does not work at all in IE11 emulator mode for IE8 
// and tool tips only work for the last rendered graph in Chrome Version 33.0.1750.117 m

for ( i = 0; i < fibreCounts.length; i++ ) {    
    var divName = fibreCounts[i] + '_forecast_order_graph';
    var containerDiv = document.getElementById('forecast_order_graphs').innerHTML;
    document.getElementById('forecast_order_graphs').innerHTML = containerDiv + '<div id="' + divName + '" class="bar_chart_div" ></div>';
    createLineGraph( fibreOrderData[i], divName, fibreCounts[i], maxDates[i], poCover[fibreCounts[i]] );
}





     // This code where the call to the function that renders the graph is outside 
        // the for loop works fine in both cases

        for ( i = 0; i < fibreCounts.length; i++ ) {
            var divName = fibreCounts[i] + '_forecast_order_graph';
            var containerDiv = document.getElementById('forecast_order_graphs').innerHTML;
            document.getElementById('forecast_order_graphs').innerHTML = containerDiv + '<div id="' + divName + '" class="bar_chart_div" ></div>';
        }
        createLineGraph( fibreOrderData[0], '8f_forecast_order_graph', '8f', maxDates[0], poCover['8f'] );
        createLineGraph( fibreOrderData[1], '24f_forecast_order_graph', '24f', maxDates[1], poCover['24f'] );
        createLineGraph( fibreOrderData[2], '48f_forecast_order_graph', '48f', maxDates[2], poCover['48f'] );
        createLineGraph( fibreOrderData[3], '96f_forecast_order_graph', '96f', maxDates[3], poCover['96f'] );
        createLineGraph( fibreOrderData[4], '240f_forecast_order_graph', '240f', maxDates[4], poCover['240f'] );





      // Function that renders the graphs

        function createLineGraph( valuesArray, targetDiv, fCount, endDate, budgetAmount )
        {
            console.log( 'Start chart ' + fCount );
            var chartData = new google.visualization.DataTable();
            chartData.addColumn('string', 'Date');
            chartData.addColumn('number', 'Budget');
            chartData.addColumn('number', 'Order Requirement');
            chartData.addColumn('number', 'Build Requirement');

            var rowDate = Date.parse( 'January 1, 2013' );
            var lastRowDate = endDate + ( 7 * 86400000 );

            console.log( 'Budget : ' + budgetAmount );

            while ( rowDate < lastRowDate ) {

                var orderReq = 0;
                var buildReq = 0;

                var i;
                for( i = 0; i < valuesArray.length; i++ ) {
                    if ( valuesArray[i][1] <= rowDate ) {
                        buildReq += valuesArray[i][0]
                    }
                    if ( valuesArray[i][2] <= rowDate ) {
                        orderReq += valuesArray[i][0]
                    }
                }

                var dateString = buildDateString( rowDate );
                chartData.addRow( [dateString, budgetAmount, orderReq, buildReq] );
                rowDate += 86400000;
            }

            var options = {
                fontName: 'Arial',
                fontSize: 12,
                title : fCount + ' Forecast Order Report',
                hAxis: {title: 'Date'},
                vAxis: {title: 'Cable Length (m)', textStyle: {color: '#676767', fontName: 'Arial', fontSize: 12}},
            }
            var chart = new google.visualization.LineChart( document.getElementById( targetDiv ) );
            chart.draw( chartData, options );
            console.log( 'End chart ' + fCount );
        }

Data example below, most of the data is pulled from SharePoint lists and as a result there is a load of processing that happens to it to produce these arrays. These example arrays should be enough to test the code.

var poCover = { '8f' : 22000, '24f' : 80100, '48f' : 34400, '96f' : 64600, '240f' : 61300 };
var fibreCounts = [ '8f', '24f', '48f', '96f', '240f' ];
var maxDates = [ 1395014400000, 1395014400000, 1393545600000, 1392768000000, 1393545600000 ];

var fibreOrderData = [ 
    [
        [3374, 1395014400000, 1390176000000],
        [70, 1376002800000, 1371164400000],
        [80, 1376002800000, 1371164400000],
        [3374, 1395014400000, 1390176000000],
        [70, 1376002800000, 1371164400000],
        [80, 1376002800000, 1371164400000]
    ], 
    [
        [2313, 1395014400000, 1390176000000],
        [1164, 1384387200000, 1379548800000],
        [442, 1384387200000, 1379548800000],
        [2313, 1395014400000, 1390176000000],
        [1164, 1384387200000, 1379548800000],
        [442, 1384387200000, 1379548800000]
    ], 
    [
        [2900, 1393545600000, 1388707200000],
        [1700, 1366153200000, 1361314800000],
        [0, 1360886400000, 1356048000000],
        [2900, 1393545600000, 1388707200000],
        [1700, 1366153200000, 1361314800000],
        [0, 1360886400000, 1356048000000]
    ], 
    [
        [2700, 1392768000000, 1387929600000],
        [8921, 1381791600000, 1376953200000],
        [300, 1376953200000, 1372114800000]
        [2700, 1392768000000, 1387929600000],
        [8921, 1381791600000, 1376953200000],
        [300, 1376953200000, 1372114800000]
    ], 
    [
        [23020, 1393545600000, 1388707200000],
        [23630, 1393545600000, 1388707200000],
        [5800, 1393545600000, 1388707200000],
        [23020, 1393545600000, 1388707200000],
        [23630, 1393545600000, 1388707200000],
        [5800, 1393545600000, 1388707200000]
    ] 
];

Answer 1

The problem with your for loop is this:

document.getElementById('forecast_order_graphs').innerHTML = containerDiv + '<div id="' + divName + '" class="bar_chart_div" ></div>';
createLineGraph(fibreOrderData[i], divName, fibreCounts[i], maxDates[i], poCover[fibreCounts[i]]);

Every time through the loop, you take the HTML contents of the container as a string, append a new div string, replace the HTML contents of the container with the new string, and draw a chart in the new div. This copies the SVG from the previously drawn charts, but the event handlers to the charts are lost, thus the tooltips won't spawn.

The proper approach here is to create new divs using the document.createElement method and append them to the container div:

var containerDiv = document.getElementById('forecast_order_graphs');
for ( i = 0; i < fibreCounts.length; i++ ) {    
    var divName = fibreCounts[i] + '_forecast_order_graph';
    var newDiv = document.createElement('div');
    newDiv.id = divName;
    containerDiv.appendChild(newDiv);
    createLineGraph(fibreOrderData[i], divName, fibreCounts[i], maxDates[i], poCover[fibreCounts[i]]);
}