VisualizationsForVaadin
Chart Tools / Interactive Charts (aka Visualization API) for Vaadin.. Unsupported and unlikely to work anymore.
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
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2011-02-28
- Maturity
- EXPERIMENTAL
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 6.0+
- Browser
- N/A