working visualizations api annotated timeline example?

Flow
1

I can’t get Visualizations API add-on AnnotatedTimeline to work.
Anyone has a basic example of this visualization working?

This doesn’t work:


 Window mainWindow = new Window("Mytimelinedemo Application");
		 setMainWindow(mainWindow);
		
		AnnotatedTimeLine timeLine = new AnnotatedTimeLine();
		
		timeLine.setWidth(300, Sizeable.UNITS_PIXELS);
		timeLine.setHeight(300, Sizeable.UNITS_PIXELS);

		timeLine.addColumn("date", "Date");
		timeLine.addColumn("number", "Sold Pencils");
		timeLine.addColumn("string", "title1");
		timeLine.addColumn("string", "text1");
		timeLine.addColumn("number", "Sold Pens");
		timeLine.addColumn("string", "title2");
		timeLine.addColumn("string", "text2");

		String[][]
 ss = new String[][]
 {
				{ new Date(2008, 1, 1).toString(), 30000 + " ", " ", " ",
						40645 + " ", " ", " " },
				{ new Date(2008, 1, 2).toString(), 14045 + " ", " ", " ",
						20374 + " ", " ", " " },
				{ new Date(2008, 1, 3).toString(), 55022 + " ", " ", " ",
						50766 + " ", " ", " " },
				{ new Date(2008, 1, 4).toString(), 75284 + " ", " ", " ",
						14334 + " ", "Out of Stock",
						"Ran out of stock on pens at 4pm" },
				{ new Date(2008, 1, 5).toString(), 41476 + " ", "Bought Pens",
						"Bought 200k pens", 66467 + " ", " ", " " },
				{ new Date(2008, 1, 6).toString(), 33322 + " ", " ", " ",
						39463 + " ", " ", " " } };

		for (String[] s : ss) {
			timeLine.addRow(s);
		}
		
		mainWindow.addComponent(timeLine);
2

Currently the demo doesn’t want to start in FF3.6.13, so I got the example running in IE8:

Window mainWindow = new Window("Mytimelinedemo Application");
		setMainWindow(mainWindow);

		org.vaadin.vaadinvisualizations.AnnotatedTimeLine atl = new org.vaadin.vaadinvisualizations.AnnotatedTimeLine();
		atl.setOption("displayAnnotations", true);
		atl.setOption("wmode", "window");
		atl.addLineLabel("Sold Pencils");
		atl.addLineLabel("Sold Pens");
		/*
		 * a time line can have multiple entries as above 'Sold Pencils' and
		 * 'Sold Pens' for each distinct entry you have to set a value for each
		 * of the above entries
		 */
		ArrayList<AnnotatedTimeLineEntry> timeLineEntries = new ArrayList<AnnotatedTimeLineEntry>();
		timeLineEntries.add(new AnnotatedTimeLineEntry(30000, "", ""));
		// Sold Pencils
		timeLineEntries.add(new AnnotatedTimeLineEntry(40645, "", "")); // Sold
																		// Pens
		atl.add(new GregorianCalendar(2008, 0, 1), timeLineEntries);
		timeLineEntries = new ArrayList<AnnotatedTimeLineEntry>();
		timeLineEntries.add(new AnnotatedTimeLineEntry(14045, "", ""));
		// Sold Pencils
		timeLineEntries.add(new AnnotatedTimeLineEntry(20374, "", "")); // Sold
																		// Pens
		atl.add(new GregorianCalendar(2008, 0, 2), timeLineEntries);
		timeLineEntries = new ArrayList<AnnotatedTimeLineEntry>();
		timeLineEntries.add(new AnnotatedTimeLineEntry(55022, "", ""));
		// Sold Pencils
		timeLineEntries.add(new AnnotatedTimeLineEntry(50766, "", "")); // Sold
																		// Pens
		atl.add(new GregorianCalendar(2008, 0, 3), timeLineEntries);
		timeLineEntries = new ArrayList<AnnotatedTimeLineEntry>();
		timeLineEntries.add(new AnnotatedTimeLineEntry(75284, "", ""));
		// Sold Pencils
		timeLineEntries.add(new AnnotatedTimeLineEntry(14334, "Out of Stock",
				"Ran out of stock at 4pm"));
		// Sold Pens
		atl.add(new GregorianCalendar(2008, 0, 4), timeLineEntries);
		timeLineEntries = new ArrayList<AnnotatedTimeLineEntry>();
		timeLineEntries = new ArrayList<AnnotatedTimeLineEntry>();
		timeLineEntries.add(new AnnotatedTimeLineEntry(41476, "Bought Pens",
				"Bought 200k Pens"));
		// Sold Pencils
		timeLineEntries.add(new AnnotatedTimeLineEntry(66467, "", "")); // Sold
																		// Pens
		atl.add(new GregorianCalendar(2008, 0, 5), timeLineEntries);
		timeLineEntries = new ArrayList<AnnotatedTimeLineEntry>();

		timeLineEntries = new ArrayList<AnnotatedTimeLineEntry>();
		timeLineEntries.add(new AnnotatedTimeLineEntry(33322, "Closed Shop",
				"Had enough of pencils business")); // Sold Pencils
		timeLineEntries.add(new AnnotatedTimeLineEntry(39463, "Pens look good",
				"Swapping to pens wholesale"));
		// Sold Pens
		atl.add(new GregorianCalendar(2008, 0, 6), timeLineEntries);
		atl.setSizeFull();

		mainWindow.addComponent(atl);
		
		Window window = new Window();
		window.setWidth(800, Sizeable.UNITS_PIXELS);
		window.setHeight(600, Sizeable.UNITS_PIXELS);
		
		ComponentContainer  aasdf = window.getContent();
		aasdf.setWidth(800, Sizeable.UNITS_PIXELS);
		aasdf.setHeight(600, Sizeable.UNITS_PIXELS);
		aasdf.addComponent(atl);
		atl.setWidth(800, Sizeable.UNITS_PIXELS);
		atl.setHeight(600, Sizeable.UNITS_PIXELS);
		mainWindow.addWindow(window);