problem displaying chart on IE8

[Rita]

Hi everybody,
I'm developing a web application which use Google Chart Tools. I attach this library with the following instruction:

google.load('visualization', '1.0', {'packages': ['corechart', 'table']});

I don't have problem of rendering on all browser, except IE8 on which charts are not displayed! DataTable are ok but charts are not show. I cannot display them.
Could someone suggest me a solution please?
I've tried to add:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

but nothing change.

Thanks in advance.

Regards
Rita

[asgallant]

Usually when the charts work in other browsers but not IE8, it is due to an errant comma at the end of an array or object, eg:

var myArray = ['foo', 'bar',];
var myObject = {foo: 'bar',};

Check your code to make sure you don't have any commas like that.

[Rita]

Thank you,
I had read about this possible cause in another discussion on this group so I've already checked. The code is OK.
I've changed
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
with
chart = new google.visualization.PieChart($("#chart_div")[0]);

because of IE8 sometimes have problem with method getElementById, but nothing is changed.
Any other suggestion, please?

Rita

[asgallant]

Post your code and I will take a look.

FYI, there are no problems in IE8 with document.getElementById

[Rita]

Thank you for replying.
Maybe the term "bug" is not "correct" but In some case I've found problems in IE8 with document.getElementById and I solved them using jquery. In particular it was in case of assign a particular value to a <a href> tag inside a jdialog open on clicking rows of DataTable.
Using document.getElementById IE8 :

document.getElementById('linkCat').href = value;

it did not apply this special value, instead using this:

$("#linkCat").attr("href", value);

it works.
I saw that other people had found similar problem (so I write my solution in case can help someone).

However my priority is solve the visualization of charts. I use this code:

function getCombo(flag, sel) {
    var value;
    if (flag==0){       
        value = sel.options[sel.selectedIndex].value;
    }else{ 
        value = flag;
    }
  
    if (value == 1) {

     chart = new google.visualization.PieChart(document.getElementById('chart_div'));      

        chart_options = {//'title': jsonData.chart.title + " " + jsonData.chart.info,           
            'is3D': true,
            'fontSize': 12,
            'legend': {position: 'left', alignment: 'center'},
            'pieResidueSliceLabel': 'Altre',
            'chartArea':{height:'100%'}
        };
    } else if (value == 2) {
        chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart_options = {//'title': jsonData.chart.title + " " + jsonData.chart.info,
            'fontSize': 12,
            'height': Math.max(chart_height, (chart_data.getNumberOfRows() * 20))
        };
    } else if (value == 3) {
        chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart_options = {//'title': jsonData.chart.title + " " + jsonData.chart.info,
            'fontSize': 12
        };
    } else if (value == 4) {
        chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart_options = {
            'fontSize': 12
        };
    } else if (value == 5) {
        chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart_options = {
            'fontSize': 12
        };
    }

    function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        if (selectedItem) {
           
            var topping = chart_data.getFormattedValue(selectedItem.row, 0);          
            $("#linkCat").text(topping + " : Visualizza");
            var pv = $("input#pvslice").val();
            var data1 = $("input#data1slice").val();                   
            var data2 = $("input#data2slice").val();          
            $("#linkCat").attr("href", jsonData.chart.link + topping + "&PV=" + pv + "&data1=" + data1 + "&data2=" + data2);
            $("#dialogSlice").dialog("open");           
        }
    }

    google.visualization.events.addListener(chart, 'select', selectHandler);
    chart.draw(chart_data, chart_options);
};


Rita

[asgallant]

The issue you had with IE8 is not the getElementById method, it is that IE8 doesn't propagate some changes in the javascript object back to the HTML element (try, for instance, changing a checkbox to a radio button in IE8).

That said, I don't see anything in your code that would cause the charts to fail in IE8.  The only problem I see is in your selectHandler function, on this line:

var selectedItem = chart.getSelection()[0];

This will throw an error when the user deselects an element in the chart, causing #getSelection to return an empty array, which you cannot access element 0 in.  The proper way to handle this is to get the selection and test its length:

var selection = chart.getSelection();
if (selection.length) {
    var selectedItem = selection[0];
}

or loop over the selection if you have multi-select enabled on your chart (it is disabled by default on most charts).

For fixing your immediate problem, I suggest using IE9's debugger, and enabling IE8 emulation to see if you can catch the problem that way.

[Rita]

Thank you for the suggestion. Unfortunately I cannot resolve the problem on IE8. Could be caused from the library update on last 26 november?

Rita

[Rita]

The behaviour observed on debug mode on IE8 is the following.
It loads the page without displaying chart, then if I use the select to choose a different type of chart to display, it visualizes the chart! But I obtain a RunTime JavaScript error:

SCRIPT70: Permission Denied
format+it,default+it,ui+it,table+it,corechart+it.I.js, Row 82 Char 16

the line is the following:

function Im(a){if(1==a[fd])return Jm(a);var b=ui(a.MSa),c=a;a[Ib]?c=a[Ib][0]:b&&a.mb[Ib]&&(c=a.mb[Ib][0]);return new fl(c[wd],c[xd])}function Km(a,b,c){if(b instanceof kl)c=b[x],b=b[p];else if(void 0==c)throw l("missing height argument");sa(a[w],zm(b,!0));Ra(a[w],zm(c,!0))}function zm(a,b){typeof a==bh&&(a=(b?f[A](a):a)+Q);return a}

so it is very strange, during first load it does not display any chart, then using select (to choose between pie, column,...) it display choosen chart but with JS error.

Do you have any ideas, please?

Thanks.

Rita


Il giorno lunedì 9 dicembre 2013 16:09:11 UTC+1, asgallant ha scritto:

[asgallant]

Do you have a public-facing page I can test?  If not, can you post the full code for the page along with a sample set of data?  If you are using any server-side processing, I need to see the post-rendered code (ie, what the browser sees); to get it, open the page in a browser and view the source.

[Rita]

Thank you. I am sorry but I cannot post code and data sample. I'm loading data from a json file to render chart, using AJAX. The problem on IE8 could depends from AJAX? I think this as I see chart when I don't load file with AJAX but simply rewrite the chart choosen.

In the head of html page I am using
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
without it I cannot display chart also on IE10.

Could you suggest me other tricks to try? Many thanks.

Rita

[asgallant]

You'll have to debug the code to figure out exactly what isn't working in IE8, and there's no easy way to do that.  You might have some luck using DebugBar or IETester.

[Rita]

Thanks for you attention and availability.
With IETester I obtain the following when I choose to change the chart displayed on the web page.




It is the same thing that I saw on debug mode in the console of IE.
If there is someone else which has an idea and will share with me it I will appreciated, by the way for the moment I will leave opened this topic.

Regards
Rita

[asgallant]

Your error message is missing.

[Rita]

Sorry! I attach it.

Rita

[asgallant]

Unfortunately, that error code is completely unhelpful.  You have to trace through your code and figure out what line is causing that error to be thrown.  As a crude guide, you can insert alert statements to narrow down where the error is being thrown.

As an example:

function myFunc () {
    alert('foo');
    // code block
    alert('bar');
    // code block
    alert('baz');
    // code block}
    alert('cad');
}

with this code, IE8 will throw the alerts until it reaches code that throws an error, so if the "foo" alert is called but the "bar" alert is not, then you know there is a problem somewhere in between them