Alright, instead of delving straight into explaining the problem I'm experiencing with Annotation Charts, I included a page I put together to debug as well as illustrate it below. The idea of this test program is to fill an Annotation Chart with random data that is regenerated and displayed whenever the "Go!" button is clicked.
<html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>Annotation Chart</title> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['annotationchart','table','corechart']}]}"> </script> <script type='text/javascript'> google.setOnLoadCallback(loadChart); var aChart, chartData, chartOptions; function loadChart() { var container = document.getElementById('annotation'); var validData = false; if (aChart === undefined) { //Instantiate the chart object aChart = new google.visualization.AnnotationChart(container); } else { //If the chart object already exists, clear it aChart.clearChart(); //container.innerHTML = ''; //aChart = new google.visualization.AnnotationChart(container); } //Create a chart data object to store the data. chartData = new google.visualization.DataTable(); chartData.addColumn('date', 'Date'); chartData.addColumn('number', 'Value'); var currentDate = new Date(); for (i = 0; i < 50; i++) { chartData.addRow([new Date((new Date()).setDate(currentDate. getDate() + i)), Math.random()*i]); } //Customize the chart options chartOptions = { displayAnnotations: true, scaleType: 'fixed', legend: {position: 'bottom'} }; aChart.draw(chartData, chartOptions); } </script> </head> <body> <form> <label> Generate a random data set: <input type="button" value="Go!" onclick="loadChart()"/> </label> </form> <div class="container" id="annotation" style="width: 800px; height: 300; "></div> </body> </html> If you load this page onto your server and navigate to it, you'll notice that it displays a random set of increasing data over a 50-day time period on an Annotation Chart. However, if you click the "Go!" button to generate and print another random set of data, nothing happens. This is because the clearChart() method throws the following error message: "Uncaught TypeError: undefined is not a function" when called for an AnnotationChart object. To demonstrate the validity of my code, you can change the constructor on line 20 to LineChart instead of AnnotationChart, and and the page will load up a fully-functional Line Chart that reloads when the "Go!" button is clicked. Please correct me if I'm wrong, but I believe that the clearChart() method is completely inoperable for Annotation Charts. I did search these forums and spent a bit of time Googling as well before deciding to post this here, and hope that I haven't just reiterated an already-known bug in the API. For those who are wondering, I did come up with a workaround - comment aChart.clearChart() on line 23 and uncomment the 2 lines below it. Basically this just trashes the entire chart object from the HTML end and re-instantiates it. Voila! The Annotation Chart starts reloading with the "Go!" button, but it's not the least bit graceful and gives the page a little seizure each time. In addition, and this is my primary concern, the page's memory usage does climb a little bit with each iteration, meaning that unnecessary data is being stored, but if left alone it does seem to decrease back to its original value. Please help me out here. If I'm plain wrong about this issue, or if there's something I could do to improve my workaround, show me a solution! Thanks guys. -- 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 google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.