Creating a pie chart with Highcharts

We will make a pie chart in this recipe. We will create Java server-side code that interacts with the Highcharts JavaScript library. More information about Highcharts can be found at http://www.highcharts.com.

The pie chart will display three answers for the question "Why Don't I Have a Girlfriend?".

Getting ready

Download the Highcharts JavaScript library from http://www.highcharts.com/download.

How to do it...

Carry out the following steps to create a pie chart using Highcharts:

1. Create a class named HighchartsState that extends JavaScriptComponentState. This class will be used as a transport box between Java and JavaScript.

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

2. Create a...