I made a fiddle based on your code and data (http://jsfiddle.net/asgallant/KMpRb/) and I can't duplicate the problem in IE8. Do you have a public-facing page I could test?
On Monday, June 2, 2014 9:40:06 AM UTC-4, Paul Duer wrote: > > > Thanks Andrew, that is working well now with the updates for our dataset. > > BUT, unfortunely now I am having the dreaded IE 8 issues. > > I have checked all the standard things, errant commas and doctype headers, > but none of that fixes it. > > What I do know is that these same HTML headers/doctype work fine in IE8 on > another Pie Char that I am running. > > But, for this annotatedchart, I get 2 white boxes one on top of the other. > The bottom box allows for rollover and you see the values, but it's all > messed. up. > > When I debug with F12 tools in IE10 and set it to IE8 standards, I get the > access denied message alot. > > I hate attached all of the HTML because I think it might be neccesary: > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " > http://www.w3.org/TR/html4/strict.dtd";> > <html> > <head > <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> > > <script type="text/javascript" src="//www.google.com/jsapi"></script> > <script src="// > ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> > > <title></title> > <script type="text/javascript"> > google.load('visualization', '1.1', { 'packages': > ['annotationchart'] }); > google.setOnLoadCallback(drawChart); > > function drawChart() { > > var chart = new > google.visualization.AnnotationChart(document.querySelector('#chart_div')); > > function updateChart() { > > var jsonData = $.ajax({ > url: "/ria/aceResponse.aspx?format=json", > dataType: "json", > async: false, > cache: false > }).responseText; > var interval = $.ajax({ > url: "/ria/aceResponse.aspx?format=headerinterval", > dataType: "text", > async: false, > cache: false > }).responseText; > > $("#interval").text(interval); > var data = new google.visualization.DataTable(jsonData); > > chart.draw(data, { > is3D: true, > colors: ['red'], > displayZoomButtons: false, > displayRangeSelector: false, > dateFormat: 'HH:mm:ss' > }); > > var range = data.getColumnRange(0); > console.dir(range); > chart.setVisibleChartRange(range.min, range.max); > } > updateChart(); > setInterval(updateChart, 60000); > } > </script> > </head> > <body> > <div id="TimerOutput"></div> > <span style="font-weight: bold" id="interval"></span> > <div id="chart_div" style="width: 600px; height: 550px;"/> > </body> > </html> > > > On Saturday, May 31, 2014 7:19:02 PM UTC-4, Andrew Gallant wrote: >> >> Here's an example with a potential fix (set the visible range on every >> draw): http://jsfiddle.net/asgallant/sqgrp/ >> >> On Saturday, May 31, 2014 7:16:48 PM UTC-4, Andrew Gallant wrote: >>> >>> Just out of curiosity, comment enable the range selector. Even with the >>> selector disabled, the chart still maintains a range filter internally, and >>> it doesn't reset to the full data range every time the chart draws, so if >>> you update your data by adding a new row, the new row won't appear because >>> it is outside the range of the filter. >>> >>> On Friday, May 30, 2014 3:00:38 PM UTC-4, Paul Duer wrote: >>>> >>>> >>>> Well... I found a solution, but I don't like it! >>>> >>>> If I create the Chart object each time in the update timer loop, but >>>> before that clear the DIV, it all happens so quick that it looks right on >>>> the screen >>>> >>>> I hate wasting all that initing of the code, but I just couldn't get >>>> the Chart to update correctly. >>>> >>>> <script type="text/javascript"> >>>> google.load('visualization', '1.1', { 'packages': >>>> ['annotationchart'] }); >>>> google.setOnLoadCallback(drawChart); >>>> >>>> function drawChart() { >>>> >>>> var chart = new >>>> google.visualization.AnnotationChart(document.getElementById('chart_div')); >>>> >>>> function updateChart() { >>>> >>>> var jsonData = $.ajax({ >>>> url: "/ria/aceResponse.aspx?format=json", >>>> dataType: "json", >>>> async: false, >>>> cache: false >>>> }).responseText; >>>> var interval = $.ajax({ >>>> url: >>>> "/ria/aceResponse.aspx?format=headerinterval", >>>> dataType: "text", >>>> async: false, >>>> cache: false >>>> }).responseText; >>>> >>>> $("#interval").text(interval); >>>> var data = new >>>> google.visualization.DataTable(jsonData); >>>> >>>> $('#chart_div').empty(); >>>> >>>> >>>> var chart = new >>>> google.visualization.AnnotationChart(document.getElementById('chart_div')); >>>> chart.draw(data, { >>>> is3D: true, >>>> colors: ['red'], >>>> displayZoomButtons: false, >>>> displayRangeSelector: false, >>>> dateFormat: 'HH:mm:ss' >>>> }); >>>> } >>>> >>>> updateChart(); >>>> setInterval(updateChart, 60000); >>>> } >>>> </script> >>>> >>>> On Friday, May 30, 2014 1:25:06 PM UTC-4, Paul Duer wrote: >>>>> >>>>> Unfortunately no, nothing. The chart just never updates past the >>>>> initial data set. >>>>> >>>>> I will attach a data file if anyone wants to try. >>>>> >>>>> >>>>> On Friday, May 30, 2014 11:41:31 AM UTC-4, Andrew Gallant wrote: >>>>>> >>>>>> If you open the page in Chrome and view the developer's console, are >>>>>> there any errors reported when the update runs? >>>>>> >>>>>> On Friday, May 30, 2014 10:15:46 AM UTC-4, Paul Duer wrote: >>>>>>> >>>>>>> >>>>>>> Hey All, >>>>>>> >>>>>>> I have the code below that someone already helped me write from >>>>>>> here. >>>>>>> >>>>>>> It's not refreshing/updating the table on the webpage like it >>>>>>> should. I have validated that the data DOES update. Meaning it is a new >>>>>>> and >>>>>>> updated DataTable object that is being passed to the DRAW method, but >>>>>>> the >>>>>>> chart on the screen. >>>>>>> >>>>>>> But, it never updates. It stays the same as the first load. And >>>>>>> sometimes it even crashes or shows an empty chart. My datasource can >>>>>>> take >>>>>>> 10 to 20 seconds to load sometime as this is a test rig, but I don't >>>>>>> know >>>>>>> why the chart is plain crashing. >>>>>>> >>>>>>> What have I done wrong? >>>>>>> >>>>>>> <script type="text/javascript" src="//www.google.com/jsapi >>>>>>> "></script> >>>>>>> <script src="// >>>>>>> ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> >>>>>>> >>>>>>> <title></title> >>>>>>> <script type="text/javascript"> >>>>>>> google.load('visualization', '1.1', { 'packages': >>>>>>> ['annotationchart'] }); >>>>>>> google.setOnLoadCallback(drawChart); >>>>>>> >>>>>>> function drawChart() { >>>>>>> >>>>>>> var chart = new >>>>>>> google.visualization.AnnotationChart(document.getElementById('chart_div')); >>>>>>> >>>>>>> function updateChart() { >>>>>>> >>>>>>> var jsonData = $.ajax({ >>>>>>> url: "/ria/aceResponse.aspx?format=json", >>>>>>> dataType: "json", >>>>>>> async: false, >>>>>>> cache: false >>>>>>> }).responseText; >>>>>>> var interval = $.ajax({ >>>>>>> url: >>>>>>> "/ria/aceResponse.aspx?format=headerinterval", >>>>>>> dataType: "text", >>>>>>> async: false, >>>>>>> cache: false >>>>>>> }).responseText; >>>>>>> >>>>>>> $("#interval").text(interval); >>>>>>> var data = new >>>>>>> google.visualization.DataTable(jsonData); >>>>>>> >>>>>>> chart.draw(data, { >>>>>>> is3D: true, >>>>>>> colors: ['red'], >>>>>>> displayZoomButtons: false, >>>>>>> displayRangeSelector: false, >>>>>>> dateFormat: 'HH:mm:ss' >>>>>>> }); >>>>>>> } >>>>>>> >>>>>>> updateChart(); >>>>>>> setInterval(updateChart, 60000); >>>>>>> } >>>>>>> </script> >>>>>>> >>>>>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
