I noticed on your site that you force IE7 standards mode in IE: <meta http-equiv="X-UA-Compatible" content="IE=7" />
It is possible that this could be causing issues; the Visualization API doesn't always work well in IE7. On Thursday, June 5, 2014 8:18:00 AM UTC-4, Paul Duer wrote: > > > Yeah that's the OLD chart, the one I am replacing. You'd be surprised how > much people complain about not being able to see charts on their Ipads... > Doesn't seem to matter much when I tell them we built the charts in early > 2010 before iPads existed! :) > > > On Wednesday, June 4, 2014 8:21:57 PM UTC-4, Andrew Gallant wrote: >> >> If you are not going to use the annotations or range filter features of >> the AnnotationChart, you may be better served with a plain LineChart. The >> AnnotationChart is new and somewhat unpolished around the edges, whereas >> the LineChart has most of the kinks worked out. >> >> Is that link to the new chart or the old one? All I see there is a flash >> object embedded in an iframe, which should not be the case for the new >> AnnotationChart. >> >> On Wednesday, June 4, 2014 7:59:52 AM UTC-4, Paul Duer wrote: >>> >>> >>> Unfortunately, not yet. There's an existing page that has this chart >>> that does face the public, but it doesn't yet support the JSON query type. >>> >>> Now, I saved off JUST the HTML from the window on JSFiddle and tested it >>> with both real IE8 and the IE8 standards mode in IE10 and neither of them >>> showed up the chart, both show an empty area. >>> >>> I'm going to try and embed it into our SharePoint site like it will be >>> when it goes where it belongs: >>> >>> >>> https://www.misoenergy.org/MarketsOperations/RealTimeMarketData/Pages/ACEChart.aspx >>> >>> >>> On Tuesday, June 3, 2014 11:34:46 PM UTC-4, Andrew Gallant wrote: >>>> >>>> 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.
