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.