官术网_书友最值得收藏!

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:

Creating a line chart with Flot

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 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();
        }
      }
    }
  3. 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.
    How to do it...
  4. 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);
    }
  5. 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:

  1. Add a new field options into the FlotChartState class, together with getter and setter.
    private JSONObject options;
  2. 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);
  3. 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);
    }
  4. Now let's have a look what we have made. Start up the application and open it in the Internet browser.
    There's more...
主站蜘蛛池模板: 淮安市| 广南县| 永兴县| 丘北县| 庐江县| 白水县| 祁门县| 皋兰县| 阿拉善左旗| 天长市| 南丰县| 浦县| 托克逊县| 乾安县| 奉贤区| 洛浦县| 东城区| 修水县| 琼结县| 彩票| 宽城| 松阳县| 灯塔市| 三原县| 永康市| 太白县| 仪征市| 格尔木市| 安阳市| 调兵山市| 广灵县| 扬州市| 贵溪市| 汕头市| 新化县| 平顶山市| 肥乡县| 黄骅市| 达孜县| 苏尼特左旗| 湄潭县|