CODEWITHSUNDEEP
javascriptajaxchartsinternet-explorer-8google-visualization
rpandidurai
rpandidurai

Reputation: 307

Google Chart Issue in IE8 - SCRIPT70: Permission denied format+en,default+en,ui+en,corechart+en.I.js, line 86 character 16

i have the following error infinitely while working with Google Charts in IE8

SCRIPT70: Permission denied format+en,default+en,ui+en,corechart+en.I.js, line 86 character 16

from my parent page i have drawChart() and global chartDatas array variable, from this page am calling child Page by ajax call, has chartDatas array input for charts after successful call of child page i called drawChart() function to Draw chart with new array, at that time in IE8 above error occurred continuously when mouseover the page. so it cause many problem in my application. here is sample code for reproduce this issue in IE8 (in latest browser like chrome, firefox, IE10 its working fine)

parentPage.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages: ["corechart"]});
            google.setOnLoadCallback(drawChart);
            var year = 2008;
            var chartDatas = [
                ['Year', 'Sales', 'Expenses'],
                ['2004', 1000, 400],
                ['2005', 1170, 460],
                ['2006', 660, 1120],
                ['2007', 1030, 540]
            ];
            function drawChart() {
                var data = google.visualization.arrayToDataTable(chartDatas);

                var options = {
                    title: 'Company Performance',
                    vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                };

                var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }
            function callChild() {
                $.ajax({
                    url: "childJsp.jsp",
                    complete: function(res, textStatus) {
                        $('#childPage').html(res.responseText);                        
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
        <br>
        <input type="button" onclick="callChild();" value="call child page">
        <div id="childPage"> </div>
    </body>
</html>

childJsp.jsp

<script>       
    chartDatas.push([''+(year++), 900, 400]);
    drawChart();
</script>

enter image description here

after loading child page via ajax call, printing error in console

enter image description here

Upvotes: 2

Views: 1834

Answers (1)

asgallant
asgallant

Reputation: 26330

I suspect that you need to rearrange your code a bit so you reuse the same chart object instead of creating new ones over and over.

This might work:

Change your javascript to this:

function drawChart() {
    var data = google.visualization.arrayToDataTable(chartDatas);

    var options = {
        title: 'Company Performance',
        vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    function callChild() {
        $.ajax({
            url: "childJsp.jsp",
            complete: function(res, textStatus) {
                $('#childPage').html(res.responseText);
                var data = google.visualization.arrayToDataTable(chartDatas);
                chart.draw(data, options);
            }
        });
    }

    var button = document.querySelector('#callChild');
    if (document.addEventListener) {
        el.addEventListener('click', callChild);
    }
    else {
        el.attachEvent('onclick', callChild);
    }
}

In your response, remove the callChild function call. In your HTML, change the button to this:

<input type="button" id="callChild" value="call child page">

(or use a different ID, just make sure that the button element in the javascript matches the one in your HTML).

There could be timing issues with that, so the better solution would be to change the output of your childData.jsp page to be a JSON string in the format ["<year>",<sales>,<expenses>], and change the callChild function in drawChart to this:

function callChild() {
    $.ajax({
        url: "childJsp.jsp",
        dataType: 'json',
        complete: function(res, textStatus) {
            data.addRow(res);
            chart.draw(data, options);
        }
    });
}

Upvotes: 1

Related Questions