Directory

VisualizationsForVaadin

Chart Tools / Interactive Charts (aka Visualization API) for Vaadin.. Unsupported and unlikely to work anymore.

View larger

Close

View larger

Close

Definitely not supported, unlikely to work in any scenario due to all the changes in Vaadin. Download at your own risk. Has been unlikely to work for a good few years now. All source is available, so don't whine with some snarky review, modify it yourself...

Google Chart Tools / Interactive Charts (aka Visualization API) for Vaadin

Also requires gwt-visualization.. which can be found here http://code.google.com/p/gwt-google-apis/downloads/list Should be included in (Eclipse) WebContent...WEB-INF.. lib..

Includes: AnnotatedTimeLine AreaChart and AreaChartImage BarChart and BarChartImage ColumnChart Gauge GeoMap ImageChart
IntensityMap LineChart and LineChartImage Map (Google Map) MotionChart OrganizationChart PieChart and PieChartImage ScatterChart SparklineImage Table NEW

Image Chart allows you to create charts such as a Radar Chart, see demo for example

Sample code

// Create a geomap
		GeoMap gm = new GeoMap();
		
		gm.setSizeFull();
		
		gm.add("Germany", 200, "Germany");
		gm.add("United States", 700, "USA");
		
		gm.setOption("dataMode", "regions");
		gm.setOption("width", "556px");
		gm.setOption("height", "347px");
		
		w.addWindow(createSubWindow(gm, "GeoMap", "536px","636px"));
		
		// Create an intensity map
		String[] tabs= {"Population", "Area"};
		
		IntensityMap im = new IntensityMap(tabs);
		
		im.setSizeFull();
		double[] nums ={1324,9640821};
		
		im.add("CN", nums);
		
		double[] morenums ={1133,3287263};
		
		im.add("IN", morenums);
		
		
		
		w.addWindow(createSubWindow(im, "IntensityMap", "636px","636px"));
		
		// Create a map
		Map map = new Map();
		
		map.setSizeFull();
		
		map.add(37.4232, -122.0853, "Work");
		map.add(37.4289, -122.1697, "University");
		map.setOption("showTip", true);

		// Add an annotatedTimeLine
		AnnotatedTimeLine atl = new AnnotatedTimeLine();
		atl.setOption("displayAnnotations", true);
		
		
		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();
		//w.addComponent(atl);
		w.addWindow(createSubWindow(atl, "Annotated Time Line", "536px","436px"));
		//
		OrganizationalChart oc = new OrganizationalChart();
		oc.setSizeFull();
		oc.setOption("size", "medium");
		oc.setOption("allowCollapse", false);
		oc.add("CEO", "", "CEO Bert Big");
		oc.add("CIO", "CEO", "CIO Charly IT");
		oc.add("CFO", "CEO", "CFO Funny Muny");
		oc.add("Strategy", "CIO", "Strategy Willy Wonder");
		
		oc.addListener(new OrganizationalChart.SelectionListener() {

			private static final long serialVersionUID = 1L;

			public void selectionChanged(List<String> selectedItems) {
				if (selectedItems.get(0).equalsIgnoreCase("")){
					
				
				   getMainWindow().showNotification("Node : " + selectedNode + " deselected.");
				} else {
					getMainWindow().showNotification("Node : " + selectedItems.get(0) + " selected.");
					selectedNode = selectedItems.get(0);
					
				}
			}

		});
		
		w.addWindow(createSubWindow(oc, "Organizational Chart", "536px","436px"));

		PieChart pc = new PieChart();
				
		pc.setSizeFull();
		
		pc.addListener(new PieChart.SelectionListener() {

			public void selectionChanged(List<String> selectedItems) {
				if (selectedItems.get(0).equalsIgnoreCase("")){
					
				
				   getMainWindow().showNotification("Node : " + selectedNode + " deselected.");
				} else {
					getMainWindow().showNotification("Node : " + selectedItems.get(0) + " selected.");
					selectedNode = selectedItems.get(0);
					
				}
			}

		});
		pc.add("Work", 7);
		pc.add("Play", 3);
		pc.add("Eat", 1);
		pc.add("Sleep", 6);
		pc.add("Do Vaadin", 7);
		pc.setOption("width", 400);
		pc.setOption("height", 400);
		pc.setOption("is3D", true);
		w.addWindow(createSubWindow(pc, "Pie Chart", "536px","436px"));

				
		// Add a barChart
		BarChart bc = new BarChart();
		bc.setOption("is3D", true);
				
		bc.addXAxisLabel("Year");
		bc.addBar("Expenses");
		bc.addBar("Sales");
		bc.add("2004", new double[]{100,200});
		bc.add("2005", new double[]{75,100});
		bc.add("2006", new double[]{32,234});
		bc.add("2007", new double[]{25,2534});
		bc.add("2008", new double[]{2343,12});
		bc.setSizeFull();
		//w.addComponent(bc);
		w.addWindow(createSubWindow(bc, "Bar Chart", "536px","436px"));
		
		// Add a AreaChart
		AreaChart ac = new AreaChart();
		ac.setOption("legend", "bottom");
		
		
		ac.addXAxisLabel("Year");
		ac.addArea("Expenses");
		ac.addArea("Sales");
		ac.add("2004", new double[]{100,200});
		ac.add("2005", new double[]{75,100});
		ac.add("2006", new double[]{32,234});
		ac.add("2007", new double[]{25,2534});
		ac.add("2008", new double[]{2343,12});
		ac.setSizeFull();
		//w.addComponent(ac);
		w.addWindow(createSubWindow(ac, "Area Chart", "536px","436px"));
		
		// Add a columnChart
		ColumnChart cc = new ColumnChart();
		bc.setOption("is3D", true);
		
		
		cc.addXAxisLabel("Year");
		cc.addColumn("Expenses");
		cc.addColumn("Sales");
		cc.add("2004", new double[]{100,200});
		cc.add("2005", new double[]{75,100});
		cc.add("2006", new double[]{32,234});
		cc.add("2007", new double[]{25,2534});
		cc.add("2008", new double[]{2343,12});
		cc.setSizeFull();
		//w.addComponent(cc);
		w.addWindow(createSubWindow(cc, "Column Chart", "536px","436px"));
		
		
		// Add a gauge
		Gauge g = new Gauge();
		g.setOption("redFrom", 90);
		g.setOption("redTo", 100);
		g.setOption("yellowFrom", 75);
		g.setOption("yellowTo", 90);
		g.setOption("minorTicks", 5);
		
		g.add("Memory", 80);
		g.add("CPU", 55);
		g.add("Network", 68);
		
		
		g.setSizeFull();
		//w.addComponent(g);
		w.addWindow(createSubWindow(g, "Gauges", "536px","436px"));
		
		// Add a columnChart
		LineChart lc = new LineChart();
		lc.setOption("legend", "bottom");
		lc.setOption("title", "Company Performance");
		
		
		lc.addXAxisLabel("Year");
		lc.addLine("Expenses");
		lc.addLine("Sales");
		lc.add("2004", new double[]{100,200});
		lc.add("2005", new double[]{75,100});
		lc.add("2006", new double[]{32,234});
		lc.add("2007", new double[]{25,2534});
		lc.add("2008", new double[]{2343,12});
		lc.setSizeFull();
		//w.addComponent(lc);
		w.addWindow(createSubWindow(lc, "Line Chart", "536px","436px"));
		
		// Add a scatterChart
		ScatterChart sc = new ScatterChart();
		sc.setOption("titleX", "Age");
		sc.setOption("titleY", "Weight and Height");
		
		
		sc.addXAxisLabel("Age");
		sc.addPoint("Weight");
		sc.addPoint("Height");
		sc.add(new double[]{6,20,110});
		sc.add(new double[]{7,25, 115});
		sc.add(new double[]{8,30,120});
		sc.add(new double[]{9,35,130});
		sc.add(new double[]{10,40, 138});
		sc.setSizeFull();
		//w.addComponent(sc);
		w.addWindow(createSubWindow(sc, "Scatter Chart", "536px","436px"));

Links

• Source Code
• Online Demo

Compatibility