visualizations

Flow
1

Hi,

I would like to have nice charts in my vaadin project, so I decided to use the visualizations addon.
Since my project uses maven, I just added maven dependency for the addon and one to the google charts plugin.

I use vaadin 6.5.2, gwt-maven-plugin 2.1.0, and vaadin-maven-plugin 1.0.2-SNAPSHOT.

My pom.xml looks like this:


<dependency>
  <groupId>org.vaadin.addons</groupId>
  <artifactId>visualizationsforvaadin</artifactId>
  <version>1.1.2</version>
</dependency>
<dependency>
  <groupId>com.google.gwt.google-apis</groupId>
  <artifactId>gwt-visualization</artifactId>
  <version>1.1.1</version>
  <type>jar</type>
  <scope>compile</scope>
</dependency>

The code that should put piechart is this:


VerticalLayout mainLayout = new VerticalLayout();

pieChart = new PieChart();
pieChart.setSizeFull();

pieChart.add("alma",123);
pieChart.add("korte",444);
pieChart.add("szilva",50);

pieChart.setOption("height", 400);
pieChart.setOption("width", 400);
pieChart.setOption("is3D", true);

mainLayout.addComponent(pieChart);
setCompositionRoot(mainLayout);

I managed to compile widgetset, and it does not give me errors about it when trying to display, but I still cannot see the piechart.
The divs are there, but nothing is displayed:

Can you help me with this? Where am I wrong?

2

Have the same issue, solve it by adding charts component into vaadin layout. And layout should have set height & width.


public TableAnalyzingChart(Collection<InfoBean>TableData) {
		setSizeFull();

		VerticalLayout layout = new VerticalLayout();
		layout.setHeight("400px");
		layout.setWidth("500px");
		layout.addComponent(createAnalyzingChart());

		addComponent(layout);
	}

	private AreaChart createAnalyzingChart(){
		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});
		// Needed to set width & height for chart
		ac.setOption("height", "400");
		ac.setOption("width", "500");
		return ac;
	}

I think that setSizeFull() method simple works wrong.

PS. Hope this will help you. Good luck.

3

Hi,

Set width and height to your mainLayout (layout where pieChart is added)

4

Thanks Yury
Setting the size works for me.

Stuggled with this for ages