Synaps21: How to make your chart communicate with your servlet

Steps:

Create your chart
Create your servlet
Make the connection

Technologies:

Javascript
Google API
XML
HTML

Document:

How to build your chart

Downloads:

Code:

1. Chart code

<!DOCTYPE html>
<html>
<head>
  <title>All Examples</title>
  <!--Load the AJAX API-->
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
  // Load the Visualization API and the ready-made Google table visualization.
  google.load('visualization', '1', {'packages':['table,piechart,orgchart,barchart']});

  // Set a callback to run when the API is loaded.
  google.setOnLoadCallback(init);

  // Send the queries to the data sources.
  function init() {

    var query = new google.visualization.Query('myservlet?tq=select name,population');
    query.send(handleSimpleDsResponse);

 
  }

  // Handle the simple data source query response
  function handleSimpleDsResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    var chart = new google.visualization.PieChart(document.getElementById('simple_div'));
    chart.draw(data, {width: 600, height: 150, is3D: true});
  }


  </script>
</head>
<body>
  <h1> Hello! Data Source! </h1>
  A pie chart to show the population of a group of animals.
  The data is taken from the simple data source.
  <div id="simple_div"></div>
 
</body>
</html>

2. Servlet code

import com.google.visualization.datasource.DataSourceHelper;
import com.google.visualization.datasource.DataSourceRequest;
import com.google.visualization.datasource.base.DataSourceException;
import com.google.visualization.datasource.base.ReasonType;
import com.google.visualization.datasource.base.ResponseStatus;
import com.google.visualization.datasource.base.StatusType;
import com.google.visualization.datasource.base.TypeMismatchException;
import com.google.visualization.datasource.datatable.ColumnDescription;
import com.google.visualization.datasource.datatable.DataTable;
import com.google.visualization.datasource.datatable.value.ValueType;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* A demo servlet for serving a simple, constant data-table.
*
* For the sake of a complete example this servlet extends HttpServlet.
* DataSourceServlet is an abstract class that provides a template behavior for
* serving data source requests. Consider extending DataSourceServlet for
* easier implementation.
*
* @see com.google.visualization.datasource.DataSourceServlet
* @see com.google.visualization.datasource.example.SimpleExampleServlet
*/
public class DataServlet extends HttpServlet {

/**
   * The log used throughout the data source library.
   */
private static final Log log = LogFactory.getLog(SimpleExampleServlet2.class.getName());

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
      throws IOException {
    DataTable data = generateMyDataTable();
    DataSourceRequest dsRequest = null;

    try {
      // Extract the datasource request parameters.
      dsRequest = new DataSourceRequest(req);

      // NOTE: If you want to work in restricted mode, which means that only
      // requests from the same domain can access the data source, uncomment the following call.
      //
      // DataSourceHelper.verifyAccessApproved(dsRequest);

      // Apply the query to the data table.
      DataTable newData = DataSourceHelper.applyQuery(dsRequest.getQuery(), data,
          dsRequest.getUserLocale());

      // Set the response.
      DataSourceHelper.setServletResponse(newData, dsRequest, resp);
    } catch (RuntimeException rte) {
      log.error("A runtime exception has occured", rte);
      ResponseStatus status = new ResponseStatus(StatusType.ERROR, ReasonType.INTERNAL_ERROR,
          rte.getMessage());
      if (dsRequest == null) {
        dsRequest = DataSourceRequest.getDefaultDataSourceRequest(req);
      }
      DataSourceHelper.setServletErrorResponse(status, dsRequest, resp);
    } catch (DataSourceException e) {
      if (dsRequest != null) {
        DataSourceHelper.setServletErrorResponse(e, dsRequest, resp);
      } else {
        DataSourceHelper.setServletErrorResponse(e, req, resp);
      }
    }
}

private DataTable generateMyDataTable() {
    // Create a data table
    DataTable data = new DataTable();
    ArrayList<ColumnDescription> cd = new ArrayList<ColumnDescription>();
    cd.add(new ColumnDescription("name", ValueType.TEXT, "Animal name"));
    cd.add(new ColumnDescription("link", ValueType.TEXT, "Link to wikipedia"));
    cd.add(new ColumnDescription("population", ValueType.NUMBER, "Population size"));
    cd.add(new ColumnDescription("vegeterian", ValueType.BOOLEAN, "Vegetarian?"));

    data.addColumns(cd);

    // Fill the data table.
    try {
      data.addRowFromValues("Aye-aye", "http://en.wikipedia.org/wiki/Aye-aye", 100, true);
      data.addRowFromValues("Sloth", "http://en.wikipedia.org/wiki/Sloth", 300, true);
      data.addRowFromValues("Leopard", "http://en.wikipedia.org/wiki/Leopard", 50, false);
      data.addRowFromValues("Tiger", "http://en.wikipedia.org/wiki/Tiger", 80, false);
    } catch (TypeMismatchException e) {
      System.out.println("Invalid type!");
    }
    return data;

}
}

3. XML code

   <servlet>
        <servlet-name>myservlet</servlet-name>
        <servlet-class>mypackage.DataServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>myservlet</servlet-name>
        <url-pattern>/myservlet</url-pattern>
    </servlet-mapping>

Keywords:

Google chart visualization

Synaps21

27 juillet 2014

How to make your chart communicate with your servlet