Creating a line chart with Flot_Vaadin 7 Cookbook-QQ阅读男生轻小说网

书名：Vaadin 7 Cookbook
作者名：Jaroslav Holaň Ond?ej Kvasnovsk?
本章字数：733字
更新时间：2021-07-23 14:19:36

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:

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

Create a FlotChart class that will represent the Vaadin component that is able to communicate with the Flot JavaScript. We also need to link this component with JavaScript files. Therefore, we add the @JavaScript annotation to the FlotChart class. The files inside the @JavaScript annotation will be loaded by the client together with this component.

package com.packtpub.vaadin; 
import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;
import org.json.JSONArray;
import org.json.JSONException; 

@JavaScript({"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js","jquery.flot.js", "flot_connector.js" })
public class FlotChart extends AbstractJavaScriptComponent {

  @Override
  public FlotChartState getState() {
    return (FlotChartState) super.getState();
  }

  public void setData(String source) {
    JSONArray data;
    try {
      data = new JSONArray(source);
      getState().setData(data);
    } catch (JSONException e) {
      e.printStackTrace();
    }
  }
}

We are referring to the jquery.flot.js file that should be located in our project, as in the following screenshot. Let's create a new source folder called resources with directory com. Place the jquery.flot.js file into this folder. The jquery.flot.js file can be downloaded from the Flot home page at http://www.flotcharts.org.

Now we will implement the content of the init method in the UI class as follows:

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

  FlotChart flot = new FlotChart();
  flot.setWidth("300px");
  flot.setHeight("300px");

  String data =
  "[" +
      "[" +
          "[0, 5]," +
          "[2, 7]," +
          "[4, 8]," +
          "[10, 5]" +
      "]" +
  "]";

  flot.setData(data);
  layout.addComponent(flot);
}

We are about to send JSON data to the JavaScript chart. Therefore, we need to make a connection between Java and JavaScript. Create a new file named flot_connector.js and put the following code into it:
```
window.com_packtpub_vaadin_FlotChart = function() {
  var element = $(this.getElement());
  
  this.onStateChange = function() {
    $.plot(element, this.getState().data);
  }
}
```

Run the project and the line chart appears in the browser.

How it works...

Inside the @JavaScript annotation, we have referenced three JavaScript files:

jquery.min.js: This is a jQuery library, which is required by the Flot library, because Flot is built with jQuery
jquery.flot.js: This is the chart Flot library
flot_connector.js: This is the connector between Vaadin server-side Java code and the JavaScript client-side Flot library

The FlotChart class represents the chart at the server side. This chart uses the FlotChartState class for exchanging the data between Java server-side code and JavaScript client-side code. The data format for values that are shown in the chart is JSON (JavaScript Object Notation).

We have made a simple JSON array and passed it to FlotChart. The JSON data was passed to the JavaScript connector flot_connector.js and rendered to the Vaadin element.

There's more...

We can add chart options to the line chart we have made. We could simply enhance the FlotChartState class as follows:

Add a new field options into the FlotChartState class, together with getter and setter.
```
private JSONObject options;
```

Then add a new method named setOptions in the FlotChart class as follows:

public void setOptions(String options) {
  try {
    JSONObject root = new JSONObject(options);
      getState().setOptions(root);
  } catch (JSONException e) {
    e.printStackTrace();
  }
}

The new method simply takes the JSON string, parses it to JSONObject, and sets it to the chart state.

The configuration of the chart could be the following. Let's change the background of the line chart.

String options =
        "{" +
            "grid:{"         +
                "backgroundColor:{" +
                    "colors:["+
                      "\"#fef\"," +
                      "\"#eee\""+
                    "]"+
                "}"+
            "}"+
        "}";
flot.setOptions(options);

The last step is to change flot_connector.js so it handles the options field from the state.

this.onStateChange = function() {
  var state = this.getState();
  var options = state.options;
  var data = state.data;
  $.plot(element, data, options);
}

Now let's have a look what we have made. Start up the application and open it in the Internet browser.