Hi VizKid, Thanks for your response. About the suggestions you made below:
1) No, it doesn't work properly if the div is defined in advance (i.e., window.open an existing html file that includes the div) 2) I put the draw function in a timeout function to add some wait time, but that doesn't help 3) I style the div so it has a matching size to the dimension specified in the chart options, but that doesn't help either Here's some code that illustrates this problem with IE9 (it works on Chrome, FF, Safari, etc.). Please let me know what fix is needed to make it work on IE9. Thanks. <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi";></ script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addRows([ ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { width: 400, height: 240, title: 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }; var win = window.open(); win.document.write('<div id="chart_div"></div>'); win.document.close(); var chart = new google.visualization.BarChart(win.document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> </body> </html> On Feb 20, 2:40 am, Viz Kid <[email protected]> wrote: > We were now aware of this issue. > Does it work properly for you if the div was there in advanced and not > created on the fly as you do? > Maybe waiting a couple milliseconds before calling the chart's draw on this > div will solve the issue? > Also, you might want to give the div a size or/and specify the size > explicitly in the options. > > Viz Kid > > > > > > > > On Fri, Feb 17, 2012 at 1:26 AM, MJ <[email protected]> wrote: > > Hi, > > > I've been researching this for days and still couldn't find a way to > > make it work: > > > function drawChart(index) { > > var win = window.open(); > > win.document.write('<div id="chart_div"></div>'); > > win.document.close(); > > var data = new google.visualization.DataTable(); > > var chart = new > > google.visualization.BarChart(win.document.getElementById('chart_div')); > > > [some code to populate the data table] > > > chart.draw(data, options); > > > This code would display a bar chart in a new window on all major > > browsers (Chrome, FF7, FF10, Safari, Opera, IE7, IE8, IE9 in the > > compatibility mode). However, no graph is shown in IE9 in the > > standard mode. Instead, the data sent back by Google Visualization > > API will flash across the screen. When I view the HTML code of the > > page, I'll see the iframe inserted by the Visualization API which > > includes an empty <div chart_area>. > > > Could someone on the Google Visualization API team please shed some > > light on what's going on and how to get the graph to show? > > > By the way, I did experiment with all sorts of DOCTYPE and meta flags > > and none of them helped. > > > Thanks. > > > -- > > You received this message because you are subscribed to the Google Groups > > "Google Visualization API" group. > > To post to this group, send email to > > [email protected]. > > To unsubscribe from this group, send email to > > [email protected]. > > For more options, visit this group at > >http://groups.google.com/group/google-visualization-api?hl=en. -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
