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 [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.
