IE 7/8 Rendering Issue

[Michael]

Hi:

I have two visualizations:

• ScatterChart
• AnnotatedTimeLine

3rd party

• Dygraph

None of the above want to render inside IE 7/8, works fine in IE 9. Looking for any suggestions to correct this.

Thanks in advance,

Michael

[asgallant]

Can you post your code or a link to the page?

[Michael]

Snippet Attached.


Thanks in advance :)

Michael

[asgallant]

I noticed one thing that could be throwing IE off: you call google.load() twice; try it as a single call:

google.load("visualization", "1", {packages: ['corechart', 'annotatedtimeline']});

If that doesn't work, reduce the problem to the simplest level (ie, draw each chart on it's own, without any of the extraneous javascript (maps, etc) running).  If they each run individually, try running them together.  Keep adding functionality back in until it fails.

[Michael]

Hi:

I have tried to troubleshoot this by removing all charts: scatter, annotated timeline, and dygraph and having 1 chart displayed at one given time. I get no data displayed. Annotated timeline prompts me with the message: "no data available". I am not sure how Google scatter and annotated timeline treat IE 7/8, whether excanvas is loaded in place of the html 5 canvas tag. I have narrowed down the issue in dygraph to the following error message:

SCRIPT87: Invalid argument.
dygraph-range-selector.js, line 580 character 5

I have noted that this.leftZoomHandle_.style.left is being assigned NAN possible causing the dygraph not to load, not sure about the other two charts.

I am sort of dumbfounded by this, not sure how best to fix.

As usual, any suggestions are greatly appreciated.

Thanks in advance,

Michael

[asgallant]

Hmm...I wonder if it has to do with how you are fetching your data; IE7/8 may have some wonky behavior that is messing up the data structure.  Try switching the AJAX call to a Viz API Query, along the lines of this: http://jsfiddle.net/9fBfd/

[Michael]

Hi:

It seems like it doesn't like the query. I now get a parse error.

"NetworkError: 400 Parse error near 'j... (line 1, position 54). - http://fusiontables.googleusercontent.com/fusiontables/api/query?sql=SELECT+%27Date%27,%27Level%27+FROM+2750433+WHERE+%27PID%27%3D121081%26jsonCallback%3D?&tqx=reqId:1"

sql	SELECT 'Date','Level' FROM 2750433 WHERE 'PID'=121081&jsonCallback=?
tqx	reqId:1

I will try to debug this. Thanks again for your help.

Michael

[asgallant]

You may need to use this instead:

var query = new google.visualization.Query('http://www.google.com/fusiontables/api/query');
query.setQuery("SELECT 'Date', 'Level' FROM 2750433 WHERE 'PID' =" + PID); 

[Michael]

Hello:

I noticed something different now, I have &tqx=reqId:1 appended to the query string. I now get the following error message:


NetworkError: 400 Missing sql parameter. - http://fusiontables.googleusercontent.com/fusiontables/api/query?tq=SELECT+%27Date%27,+%27Level%27+FROM+2750433+WHERE+%27PID%27+%3D35264%26jsonCallback%3D?&tqx=reqId:1
I would imagine that the sql parameter is the PID that is passed or is it referring to the &tqx=reqId:1?

Thanks again.

Michael

[asgallant]

Reading the error code again:

SELECT 'Date','Level' FROM 2750433 WHERE 'PID'=121081&jsonCallback=? 

it looks like it is trying to match PID to '121081&jsonCallback=?' rather than 121081.  Remove the '&jsonCallback=?' part of the string, as it is not necessary anyway.

[Michael]

Hi asgallant:


This query is being stubborn, it now prompts me with the following message:

NetworkError: 400 Missing sql parameter. - http://fusiontables.googleusercontent.com/fusiontables/api/query?tq=SELECT+%27Date%27,+%27Level%27+FROM+2750433+WHERE+%27PID%27%3D41442&tqx=reqId:1"


Michael

[asgallant]

I looked into querying fusiontables, and we have the URL wrong; it should be:

var query = new google.visualization.Query('http://www.google.com/fusiontables/DataSource?dsrcid=2750433');
query.setQuery("SELECT 'Date', 'Level' WHERE 'PID' =" + PID);
query.send(processData);

dsrcid is the table id.

[Michael]

Thanks asgallant for your patience, it is appreciated.

I am using the HTML 5 doctype declaration:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   <!--[if lt IE 9]>
        <script type="text/javascript" src="js/dygraph/strftime/strftime.js"></script>
        <script type="text/javascript" src="js/dygraph/excanvas.js"></script>
        <![endif]-->
       
    <title>test</title>
  </head> 

and I am getting a fusion table syntax error of:

syntax error

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM...d><title>Google Fusion Tables</title>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Google Fusion Tables</title>

Michael

[Michael]

IE Reports the following error:

SEC7112: Script from http://www.google.com/fusiontables/DataSource?dsrcid=2750433&tq=SELECT%20'Date'%2C%20'Level'%20WHERE%20'PID'%20%3D122051&tqx=reqId%3A1 was blocked due to mime type mismatch

Michael

[asgallant]

Sorry, I screwed it up again.  Try it with the data source url 'http://www.google.com/fusiontables/gvizdata?tq=' and put the 'FROM 2750433' back in the query, like this: http://jsfiddle.net/rsQvL/ 

[Michael]

Thanks asgallant. For the most part it now works with the exception of I.E 8 - even works in I.E 7! However, my understanding of using:

http://www.google.com/fusiontables/gvizdata?tq=

opposed to

http://www.google.com/fusiontables/api/query?sql=

 is that I am limited to returning only the last 500 points. I need a solution that returns all data spanning more than the previous 2 years (last 500 points). I was able to achieve this using  http://www.google.com/fusiontables/api/query?sql=

but for some reason, the results weren't being displayed in I.E. 7/8.

Michael

[asgallant]

In that case, if we go back to the original idea, I suspect the problem is that IE is not reading the data structure returned by the AJAX call correctly.  IIRC, your code had a comment to the effect that the results were returned as a CSV that was then translated into JSON, correct?  If so, IE may not be making that translation properly.  Inspect the data structure returned and find out what IE is (or is not) doing with it.