New version of
, you can now use setColors on PieChart, AreaChart, BarChart, ColumnChart, LineChart and ScatterChart.

Patch kindly submitted by Craig Conboy.


Hi Phil,

Great job.
But for example, if I add a “LineChart” directly into a VerticalLayout, the “LineChart” does not appear into the layout?
Like your sample code:
LineChart lc = new LineChart();
lc.setOption(“legend”, “bottom”);
lc.setOption(“title”, “Company Performance”);

            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});

anotherside, when I add the “LineChart” into a VerticalLayout of an accordion tab, it works?

any ideas?

tks Christophe

Probably not related to VisualizationForVaadin but how sizehandling is done in Vaadin. With only that code I can’t really say if you have put some parameters on the VerticalLayout (VL) or not, but I am going to go with the assumption that you haven’t. In that case the default size of VL is 100% width and undefined height. Undefined height means that it will adjust its size accordingly to its content. As an example, if you have two components in it with heights 200px and 300px, then the VL will automagically get 500px height.

The problem here is that you have put setSizeFull on LineChart (LC). VL is shifting the size responsibility over to LC but LC has just a
height of 100%. As it is not a defined height VL will assume that LC needs 0px and LC gets 100% out of 0px = 0px.

Going forward, after a lengthy blabbering, the way to fix it to either have a defined size for you component (lc.setHeight(“500px”):wink: or then also put everything above the component to relative sizes too. That includes setting setSizeFull() to the VL, Window and everything between.

Notice however that the graphs of this add-on has two sets of sizes. Doing a setSizeFull will make the component size big, but not the graph itself. For modifying the graph itself you would have to pass size values with lc.setOption(“height”,“500px”); etc.

P.S. putting ?debug into your browsers URL and then hitting analyze layouts would probably tip you about the same thing.

Phil, great addition and much appreciated!

Excellent addition! Unfortunately, I can’t seem to get it (and others) to work. Here is my code:

    ColumnChart cc = new ColumnChart();
    cc.setOption("is3D", true);   //Can't get to work
    cc.setOption("isStacked", true);
    cc.setOption("width", 720);
    cc.setOption("height", 300);
    cc.setOption("legend", "none");
    cc.setOption("title", "Alerts");
    cc.setOption("logScale", true);
    cc.setColors("red","yellow","black","orange"); //Can't get to work
    cc.add("2002", new double[]{32,234, 75,5});
    cc.add("2003", new double[]{25,253,4,15});
    cc.add("2004", new double[]{343,12,260,23});
    cc.add("2005", new double[]{75,100, 250,18});
    cc.add("2006", new double[]{32,234, 75,50});
    cc.add("2007", new double[]{25,253,4,3});
    cc.add("2008", new double[]{343,12,260,32});
    VerticalLayout vl = new VerticalLayout();

The respective column colors shown are: blue, red, orange, green. There are other options that I can’t get to work correctly either and are noted in the above code. Any ideas?

Also, this is more of a vaadin layout question, but when setting the options for height and width, is there a way to get the relative size of the container its in and pass a relative size to the chart?


you need to add a button with a requestRepaintAll() onto the main window to get it to work ?!

addComponent(new Button(“Refresh”, new Button.ClickListener() {
public void buttonClick(ClickEvent event) {

Great jens!

It require this to work:


The example looks great, I have been using ofcvaadin plugin but would like to switch to Visualizations. I just downloaded the plugin, but have not been able to get it to work. I am new to GWT development. So this surely is a newbie question. Here it goes.

I am using NetBeans as IDE and Tomcat Server.

I included in my project the following jars:

Here is my code:

import com.vaadin.ui.Button;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import org.vaadin.vaadinvisualizations.ColumnChart;

public class GWTChartWindow extends Window {
	private static final long serialVersionUID = -5162503344338525054L;
        private ColumnChart cc = new ColumnChart();

	public GWTChartWindow(String title) {

        // Add a Stacked columnChart

	cc.setOption("is3D", true);
	cc.setOption("isStacked", true);

	// Values in double are Expenses, Sales, Stock
	cc.add("2004", new double[]{100,200,320});
	cc.add("2005", new double[]{75,100, 250});
	cc.add("2006", new double[]{32,234, 75});
	cc.add("2007", new double[]{25,253,4});
	cc.add("2008", new double[]{343,12,260});


        Button refresh = new Button("Refresh Chart");
		refresh.addListener(new ClickListener(){
			private static final long serialVersionUID = -89669779516839869L;

			public void buttonClick(ClickEvent event) {

I get the following error:

Widgetset does not contain implementation for org.vaadin.vaadinvisualizations.ColumnChart. Check its @ClientWidget mapping, widgetsets GWT module descrioption file and re-compile your widgetset. Unrendered UIDL:
org.vaadin.vaadinvisualizations.ColumnChart(NO CLIENT IMPLEMENTATION FOUND) id=PID11 width=100.0% colNames={0:Year,1:Expenses,2:Sales,3:Stock,} colTypes={0:string,1:number,2:number,3:number,} opt_is3D=true opt_isStacked=true optionNames={0:is3D,1:isStacked,} optionTypes={0:boolean,1:boolean,} rowCount=5 row-0={0:2004,1:100.0,2:200.0,3:320.0,} row-1={0:2005,1:75.0,2:100.0,3:250.0,} row-2={0:2006,1:32.0,2:234.0,3:75.0,} row-3={0:2007,1:25.0,2:253.0,3:4.0,} row-4={0:2008,1:343.0,2:12.0,3:260.0,}

Any clues?

Thank you,

It was indeed a newbie issue. I had not compiled the GWT widgets… found the procedure to do so on this webpage in case somebody else runs into the same issue:


I apologize for the confusion regarding my earlier post. I have no issue getting the chart to work. My issue is the colors aren’t working.


gives me a columnchart with the colors: blue, red, orange, green.

Hopefully this clarifies the issue I am still having.


Hi all,

I need to deploy an application using the “org.vaadin.vaadinvisualizations.Map” component.
A valid Maps API key is required for a hostname/port but I have not see anything about that.
How I can provide it?

thanks for your help.


Hi Christophe, where do you get that message? I havent seen it when I have deployed the maps and I cant find anything about it in the documentation for the maps
Maps api

Regards Phil

Hi Phil

To be able to use the FREE maps API, you must agree to the Google Maps Terms of Use and the Google Maps API terms of Use which can be found here at:-

When you have to use the Google Maps API for an application with non public access, you have to take the Premier map service and you will need to apply for your own Google Maps API key to deploy to a website.
The key can be specified either as a script tag query string, or as a parameter to the Maps.loadMapsApi() method as shown below.

Have a look at:

Thanks for your help.

Regards Christophe

Hi Christophe, there is no place in the api to set a key and no options as far as I can see. From this google example
Google Maps Example
they set a key in their gwt xml file. It might be that if you just add this setting it would work (I havent tried it and wont be able to till tonight). Regards Phil

Hi Phil,

You’re right!
I put my key into the gwt xml file and that works fine.
If I corrupt the key, I have an error message when the application start.

Thanks a lot Phil.

Regards Christophe

hi christoph
plz let me know that after getting API key for google map,where i have to declare it in vaadin and it be in web.xml

The key can be specified either as a script tag query string, or as a parameter to the Maps.loadMapsApi() method as

where i have to call this function or if i want to add as script then where and how this script would call

Love the component! I’m using the Organization Chart in an application and it’s just what I need.

I’m having some difficulty getting it to size itself, however. With this particular kind of chart, you’d like to be able to insert the data, have rendering take place, then view the results, within a scrolling panel, if needed. In other words, since it doesn’t scale itself to the supplied size, it only draws itself based on the hints you give it (“small”, “medium”, “large”), and doesn’t try to fit itself into your dimensions.

That’s fine, but to properly handle charts like that, the component hierarchy needs to know the final size that resulted. The org. chart widget doesn’t “report” that size so the the enclosing VerticalLayout (for example) can properly deal with it. Using Firebug, you can see that the implementation uses an html table, and an examination of each element therein shows correct sizes for each.

I’d like to size the enclosing VerticalLayout as “undefined”, meaning it will adjust its size based on what it contains. That won’t work with this widget.

If anyone has any suggestions, I’d be grateful to hear them.


I’m having some trouble in getting some of the strings to work specified in the gwt visualization api.

I currently have a scatter chart representing around a hundred data entries. These entries change often and in order for the chart to be informative the minimum and the maximum value possible for the set should always be the ones limiting the chart area.

I have understood that by using scatterChart.setOption("vAxis.minValue", someIntegerValue); this could be accomplished. Though this has no effect in the presentation and it always limits itself according to the minimum and maximum values in the current set. Is there something I’m not understanding or noticing here or should I use something instead of “vAxis”?

Thanks in advance, Johannes

Edit: sorry replied to the wrong post, this is meant as a general question

Hi guys,

Is there any option to set colors on the stacked columns chart. (
this is the chart
Default comes as Red, Yellow, Green. But when your legend is “On Time” and it shows red, it sends wrong message to the customers.
Any help is appriciated.