Pages

Monday, October 15, 2012

GWT - Getting Started with Chart Tools

For using chart tools in your GWT web application project you need to download the gwt-visualization API(gwt-visualization.jar) from the web page of the Official Google Api Libraries for Google Web Toolkit:
http://code.google.com/p/gwt-google-apis/downloads/list

In the next step, inherit com.google.gwt.visualizatio in the module XML definition file, of your gwt web project.
<inherits name='com.google.gwt.visualization.Visualization'/>


You may try a sample code, using the chart libraries:

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.visualizations.*;
import com.google.gwt.visualization.client.visualizations.PieChart.Options;

/**
 * Main entry point.
 *
 * @author  Lehel Sipos
 */
public class gwtchartEntryPoint implements EntryPoint {

  public void onModuleLoad() {     
    // Create a callback to be called when the visualization API
    // has been loaded.
    Runnable onLoadCallback = new Runnable() {
      public void run() {
        Panel panel = RootPanel.get();
        // Create a pie chart visualization.
        PieChart pie = new PieChart(createDataTable(), createOptions());       
        panel.add(pie);
      }
    };
    // Load the visualization api, passing the onLoadCallback to be called
    // when loading is done.
    VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
  }

  private DataTable createDataTable() {
    /* create a datatable */
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Prog. Language");
    data.addColumn(ColumnType.NUMBER, "Popularity");
    data.addRows(5);
    data.setValue(0, 0, "C");
    data.setValue(0, 1, 11);   
    data.setValue(1, 0, "Visual Basic");
    data.setValue(1, 1, 2);   
    data.setValue(2, 0, "Delphi");
    data.setValue(2, 1, 2);  
    data.setValue(3, 0, "PHP");
    data.setValue(3, 1, 2);   
    data.setValue(4, 0, "Java");
    data.setValue(4, 1, 10);
    return data;
  }   
 
  private Options createOptions() {
    /* create pie chart */  
    Options options = Options.create();
    options.setWidth(450);
    options.setHeight(300);
    options.set3D(true);
    options.setTitle("Programming Languages");
    return options; 
  } 
 }


This java code will be translated by the GWT compiler to html and javascript code, runnable in your browser:



 

No comments:

Post a Comment