Google Annotated Time Line

[Josh Chappelle]

Hi,

 

I'm trying to get the google annotated time line to work in a wicket page.
When I created a page with just the html and javascript it works. However,
when I try to create a behavior that renders the javascript to the head it
doesn't work. Here is a link to the google html and javascript:

 

http://code.google.com/apis/ajax/playground/?type=visualization#annotated_ti
me_line

 

Here is my behavior class. I'm adding the behavior to a div and I just have
the ids hard coded for now:

 

public class AnnotatedTimeLineBehavior extends AbstractBehavior

{

 

            @Override

            public void renderHead(IHeaderResponse response)

            {

 
response.renderJavascriptReference("http://www.google.com/jsapi";);

                        response.renderOnLoadJavascript(makeJavascript());

            }

 

            private String makeJavascript()

            {

                        StringBuilder result = new StringBuilder();

                result.append("google.load('visualization', '1', {packages:
['annotatedtimeline']});");

                result.append("\r\n");

                result.append("function drawVisualization() {");

                result.append("\r\n");

                result.append("var data = new
google.visualization.DataTable();");

                result.append("\r\n");

                result.append("data.addColumn('date', 'Date');");

                result.append("\r\n");

                result.append("data.addColumn('number', 'Sold Pencils');");

                result.append("\r\n");

                result.append("data.addColumn('string', 'title1');");

                result.append("\r\n");

                result.append("data.addColumn('string', 'text1');");

                result.append("\r\n");

                result.append("data.addColumn('number', 'Sold Pens');");

                result.append("\r\n");

                result.append("data.addColumn('string', 'title2');");

                result.append("\r\n");

                result.append("data.addColumn('string', 'text2');");

                result.append("\r\n");

                result.append("data.addRows(6);");

                result.append("\r\n");

                result.append("data.setValue(0, 0, new Date(2008, 1 ,1));");

                result.append("\r\n");

                result.append("data.setValue(0, 1, 30000);");

                result.append("\r\n");

                result.append("data.setValue(0, 4, 40645);");

                result.append("\r\n");

                result.append("data.setValue(1, 0, new Date(2008, 1 ,2));");

                result.append("\r\n");

                result.append("data.setValue(1, 1, 14045);");

                result.append("\r\n");

                result.append("data.setValue(1, 4, 20374);");

                result.append("\r\n");

                result.append("data.setValue(2, 0, new Date(2008, 1 ,3));");

                result.append("\r\n");

                result.append("data.setValue(2, 1, 55022);");

                result.append("\r\n");

                result.append("data.setValue(2, 4, 50766);");

                result.append("\r\n");

                result.append("data.setValue(3, 0, new Date(2008, 1 ,4));");

                result.append("\r\n");

                result.append("data.setValue(3, 1, 75284);");

                result.append("\r\n");

                result.append("data.setValue(3, 4, 14334);");

                result.append("\r\n");

                result.append("data.setValue(3, 5, 'Out of Stock');");

                result.append("\r\n");

                result.append("data.setValue(3, 6, 'Ran out of stock on pens
at 4pm');");

                result.append("\r\n");

                result.append("data.setValue(4, 0, new Date(2008, 1 ,5));");

                result.append("\r\n");

                result.append("data.setValue(4, 1, 41476);");

                result.append("\r\n");

                result.append("data.setValue(4, 2, 'Bought Pens');");

                result.append("\r\n");

                result.append("data.setValue(4, 3, 'Bought 200k pens');");

                result.append("\r\n");

                result.append("data.setValue(4, 4, 66467);");

                result.append("\r\n");

                result.append("data.setValue(5, 0, new Date(2008, 1 ,6));");

                result.append("\r\n");

                result.append("data.setValue(5, 1, 33322);");

                result.append("\r\n");

                result.append("data.setValue(5, 4, 39463);");

                result.append("\r\n");

                  

                result.append("var annotatedtimeline = new
google.visualization.AnnotatedTimeLine(document.getElementById('visualizatio
n'));");

                result.append("\r\n");

                result.append("annotatedtimeline.draw(data,
{'displayAnnotations': true});");

                result.append("}");

                result.append("\r\n");

 
result.append("google.setOnLoadCallback(drawVisualization);");

                result.append("\r\n");

                System.out.println(result.toString());

                        return result.toString();

            }

            

}

 

Can someone point me in the right direction?

 

Thanks,

 

Josh