Vaadin Chart with Server Push

Hi everybody, Today I’m going to show you a little tutorial regarding Vaadin server push and also Vaadin charting. I found this two feature are amazing. Server push is a new feature that Vaadin added to the line since version 7.00. Server push is a capability to push update in the internal server to the web browser by keeping the connection alive between server and web browser. There are few ways to enable this functionality in vaadin, one of the way is to add push annotation on your view (@Push).

The second great feature that is now available is Vaadin Chart. Vaadin has working to integrate this functionality in very beautiful. Without further a do, Lets code!!!!

1. Prepare your Vaadin maven project.

2. Add Vaadin chart library to your pom

<dependency>
 <groupId>com.vaadin.addon</groupId>
 <artifactId>vaadin-charts</artifactId>
 <version>1.1.4</version>
</dependency>

<repository>
 <id>vaadin-addons</id>
 <url>http://maven.vaadin.com/vaadin-addons</url>
</repository>

2. Now to enable the server push capability is to just add @Push on your class. Simple right …


@Theme("mytheme")
@SuppressWarnings("serial")
@Push
public class MyVaadinUI extends UI {

@Override
 protected void init(VaadinRequest request) {
 final VerticalLayout layout = new VerticalLayout();
 layout.setMargin(true);
 setContent(layout);

3. Now let do the charting. In this scenario, I will create a chart with predefined data (Random data) where later on after the page opened in the browser the chart data will be updated by a java timer (threads) to generate the random data. Every update on the data will be pushed to the client side.


@Theme("mytheme")
@SuppressWarnings("serial")
@Push
public class MyVaadinUI extends UI {

@Override
 protected void init(VaadinRequest request) {
 final VerticalLayout layout = new VerticalLayout();
 layout.setMargin(true);
 setContent(layout);

Chart mychart = new Chart();
 Configuration configuration = mychart.getConfiguration();
 configuration.setTitle("Simple Tutorial");

XAxis xAxis = configuration.getxAxis();
 xAxis.setType(AxisType.LINEAR);

final DataSeries listSeries1 = new DataSeries();
 listSeries1.setPlotOptions(new PlotOptionsArea());
 configuration.addSeries(listSeries1);
 layout.addComponent(mychart);
 int i=0;
 for(i=0; i < 100 ; i++){
 DataSeriesItem item = new DataSeriesItem(i, 1 + (Math.random()*100)*3);
 listSeries1.add(item);
 }

final int aa = i;
 new Timer().scheduleAtFixedRate(new TimerTask() {
 int ff = aa;
 public void run() {
 DataSeriesItem item1 = new DataSeriesItem(ff++, 1 + (Math.random()*100)*3);
 listSeries1.add(item1, true, true);
 getUI().push();
 }
 }, new Date(), 1000);
 }

@WebServlet(value = "/*", asyncSupported = true)
 @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "Vaadin9.AppWidgetSet")
 public static class Servlet extends VaadinServlet {
 }

}

5. Yeah finally you can deploy the application to Jboss or Jetty that support push technology.

chart

One comment

  1. Take a look at the Vaadin Charts demo site ( http://demo.vaadin.com/charts/ ) to see example code. They show code for shutting down the Timer when the chart is detached from the UI.

    Also, Timers are not recommended in Servlet/Java EE environments. A ScheduledExecutorService is probably more appropriate, but I’ve not yet applied that to Vaadin Charts.

    Also, FYI, Vaadin Charts 2 was just released in 2014-12. See their announcement on the company blog ( https://vaadin.com/blog/-/blogs/vaadin-charts-2-0-released ). Now has HeatMaps (important) and 3D effects (not so important).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s