Visualizations: 3D/resizing not working

I just started using the addon, come from using ofcvaadin and like Visualizations’ syntax much more.

So far I have been able to get the example graphics to display, but am having some issues:

  1. The graph does not paint initially, have to resize the windows window or click a button to see the graph
  2. Cannot change the size of the graph, I’ve set the graph to full size, but the change is still the same
  3. The 3D option does not work, setting Is3D to true or false has no effect on the displayed graph

Here is my code:


import com.vaadin.Application;
import com.vaadin.ui.Window;
import org.vaadin.vaadinvisualizations.BarChart;
import org.vaadin.vaadinvisualizations.ColumnChart;

public class MyApplication extends Application {

    @Override
    public void init() {
        Window mainWindow = new Window();

        setMainWindow(mainWindow);

                ColumnChart cc = new ColumnChart();
                cc.setOption("is3D", true);
                cc.setOption("isStacked", 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.setImmediate(true);
                cc.setSizeFull();

                mainWindow.addComponent(cc);

                	// 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();

        mainWindow.addComponent(bc);

    }
}

I hope some one can help, I’d really like to start using Visualizations with Vaadin.

Thanks!
Benicio

Doing cc.setSizeFull() is not enough to resize it. this will resize the component, but not the actual size of the graph inside the component. you have to pass in the options cc.setOption(“width”,“700px”); cc.setOption(“height”,“700px”); to also resize the graph.

is3D is only available for certain charts, PieChart springs to mind, its not available on Bar or Column chart. All the options are listed against each visualization
here

Regards Phil

Thanks Jens, got resizing working.

Had to do some looking around and the actual code I had to use to resize the graph is:

cc.setOption("width",700);
cc.setOption("height",700);

Both options take a number representing the width and height in pixels

Thanks again!
Benicio

Thanks Phil!

Any ideas on why the chart does not display initially?
Could it have something to do with the ready event? How do I listen for it?

Thanks again!
Benicio

Sorry for the wrong API (string instead of int for the pixels) - I remembered it wrong. Good thing that it is working now.
In my experiences you shouldn’t have to do anything extra than what you’ve done to get it initially displayed.

This is just a longshot but could you test different versions of the add-on? I guess you’re on 1.1 right now? Older versions can be found on
http://vaadin.com/directory#addon/visualizationsforvaadin
when you open the “Version” dropdown.

I had to place the chart on a VerticalLayout and add a setImmediate(true) command to VerticalLayout… I am new to Vaadin but am wondering why components are not immediate by default… am I doing something wrong?

I am not sure if I am going the optimal way, but I’ve got the addon working…

Thanks for all the help!

Immediateness on layouts are not something that really makes any sense, and you shouldn’t have to do that. I thought layouts didn’t even have the API to make that possible.

Immediateness basically means that the component should send an event to the server when the value of it has changed. The event is there so that the server can alter the view after such an event. As an example, a form can have 10 fields. If all would be immediate you would have 11 roundtrips (10 components + 1 save) to the server for filling in all the data. By having them “not immediate” you only need one roundtrip to do the same (save). Immediateness should only be on components where their value affects how the view looks.

Getting back to the topic, I don’t see any reason why you should have to define it and it is even more weird that it actually affects something.

It must be a mix of things and it is messy as I do not really know any longer why it works, as it stops working for some reason. I started using debug and found out I had some layout issues. But now I am getting a “draw delayed until API init” error message on the debugger and the chart is not shown.

I created a class *extends VerticalLayout) that recieves a configuration bean and a data bean, and place the VL on a window. And it is giving me this error. I am thinking of starting anew…

I am glad you explained Immediateness… I would have set everything immediate resulting in very poor performance had I not understood it.

Thanks for all the help. I will post anything related to the above message here.