Google Visualization For GWT

Getting Started with Visualizations

Assumptions

• You are familiar with Google Web Toolkit.
• You know how to create a new GWT project.
• You are familiar with Google Visualization API.
• You are using the Visualization API Library for GWT version 1.0.2 or later.
• You are using GWT 1.6 or later.
• You have installed Eclipse and/or Apache Ant.

下载 Google Visualization http://code.google.com/p/gwt-google-apis/downloads/

1：Calling the Ajax Loader

提供一个Java Runnable 对象，在API加载完成后执行。由常量PACKAGE加载。

Runnable onLoadCallback = new Runnable() {
      public void run() {
        Panel panel = RootPanel.get();
 
        // Create a pie chart visualization.
        PieChart pie = new PieChart(createTable(), createOptions());

        pie.addSelectHandler(createSelectHandler(pie));
        panel.add(pie);
      }
    };

    // Load the visualization api, passing the onLoadCallback to be called
    // when loading is done.
    VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);

2.Creating Draw Options

    Options 是JavaScriptObject的子类，不能用new实例化。用Options.create();

3.Creating a DataTable

    所有的Visualization的数据都是由DataTable或 DataView 提供。DataTable是一个2维的表。同样，DataTable不能用new，而用 DataTable.create()来实例化。每一列由枚举DataTable.ColumnType来定义数据类型。

4.Creating a DataView

可以用把一个DataView绑定到DataTable，可以显示一个DataTable不同列的数据。

DataView result = DataView.create(data);
    result.setColumns(new int[]{0, 2});//绑定DataTable的第一列和第二列

5.Issuing a Query

class  Query 可以让你请求一个数据源（例如 Google Docs里的文件），用 Query.send() 发出请求，用 Query.Callback来指定请求完成后的函数。如果请求没有错误可以用QueryResponse.getDataTable() 来获取DataTable来创建一个Visualization。

private SelectHandler createSelectHandler(final PieChart chart) {
    return new SelectHandler() {
      @Override
      public void onSelect(SelectEvent event) {
        String message = "";
        
        // May be multiple selections.
        JsArray<Selection> selections = chart.getSelections();

        for (int i = 0; i < selections.length(); i++) {
          // add a new line for each selection
          message += i == 0 ? "" : "\n";
          
          Selection selection = selections.get(i);

          if (selection.isCell()) {
            // isCell() returns true if a cell has been selected.
            
            // getRow() returns the row number of the selected cell.
            int row = selection.getRow();
            // getColumn() returns the column number of the selected cell.
            int column = selection.getColumn();
            message += "cell " + row + ":" + column + " selected";
          } else if (selection.isRow()) {
            // isRow() returns true if an entire row has been selected.
            
            // getRow() returns the row number of the selected row.
            int row = selection.getRow();
            message += "row " + row + " selected";
          } else {
            // unreachable
            message += "Pie chart selections should be either row selections or cell selections.";
            message += "  Other visualizations support column selections as well.";
          }
        }
        
        Window.;
      }
    };
  }

5.Creating a SelectHandler

很多Visualition支持SelectHandler 和 SelectEvent

private SelectHandler createSelectHandler(final PieChart chart) {
    return new SelectHandler() {
      @Override
      public void onSelect(SelectEvent event) {
        String message = "";
        
        // May be multiple selections.
        JsArray<Selection> selections = chart.getSelections();

        for (int i = 0; i < selections.length(); i++) {
          // add a new line for each selection
          message += i == 0 ? "" : "\n";
          
          Selection selection = selections.get(i);

          if (selection.isCell()) {
            // isCell() returns true if a cell has been selected.
            
            // getRow() returns the row number of the selected cell.
            int row = selection.getRow();
            // getColumn() returns the column number of the selected cell.
            int column = selection.getColumn();
            message += "cell " + row + ":" + column + " selected";
          } else if (selection.isRow()) {
            // isRow() returns true if an entire row has been selected.
            
            // getRow() returns the row number of the selected row.
            int row = selection.getRow();
            message += "row " + row + " selected";
          } else {
            // unreachable
            message += "Pie chart selections should be either row selections or cell selections.";
            message += "  Other visualizations support column selections as well.";
          }
        }
        
        Window.;
      }
    };
  }