Creating a line chart with Flot

Flot is a JavaScript library for building charts. In this recipe, we will show how to integrate the Java server-side Vaadin code with the Flot JavaScript library.

We will make a line chart, which can be seen in the following screenshot:

More information about Flot can be found at http://www.flotcharts.org.

How to do it...

Carry out the following steps in order to create a line chart with the Flot library:

1. Create a FlotChartState class that extends JavaScriptComponentState. This class will be used as a transport box between Java and JavaScript. Therefore, we set data in our Java server-code and we get it in JavaScript later on.

   package com.packtpub.vaadin; 
   import com.vaadin.shared.ui.JavaScriptComponentState;
   import org.json.JSONArray; 
   
   public class FlotChartState extends JavaScriptComponentState {
   
     private JSONArray data;
   
     public JSONArray getData() {
       return data;
     }
   
     public void setData(JSONArray data) {
       this.data = data;
     }
   }

2. Create a FlotChart...