Package  Class  Use  Tree  Deprecated  Index  Help 
 PREV PACKAGE   NEXT PACKAGE FRAMES    NO FRAMES    

Package com.googlecode.gchart.client

GWT charts without JSNI, browser add-ins, or server round-trips.

See:
          Description

Class Summary
GChart A GChart can represent and display a line chart, a bar chart, a pie chart, an area chart, or a chart that contains arbitrary combinations of line, bar, pie, and/or area based curves.
GChart.AnnotationLocation Defines the location of a data point's annotation (text label) relative to the location of that point's symbol.
GChart.Point Represents a single point on one of the chart's curves.
GChart.SymbolType Specifies the type of symbol used by a curve.
 

Package com.googlecode.gchart.client Description

GWT charts without JSNI, browser add-ins, or server round-trips. The Chart Gallery below provides example code and screen shots to help get you started.

GChart is implemented as the GWT module com.googlecode.gchart.GChart, packaged into the file gchart.jar. For detailed installation instructions see Installing GChart

For a quasi-serious discussion of the fundamental principles behind GChart's design see The GChart Manifest.

Chart Gallery

Only the GChartExample11 chart in this gallery is available as a live demo.

To see the others live, you will have to wait 30 seconds or so for the (around 50 or so) charts in the GChart paint test to pop up. If you see a test chart that's not in the chart gallery that piques your interest on this page, you may want to visit the svn repository for this test set to look at its code.

CodeChart
package com.googlecode.gchart.gcharttestapp.client;
import com.googlecode.gchart.client.GChart;
/**
 * Defines a scatter-plot of x*x vs. x.
 */
public class GChartExample00 extends GChart {
  GChartExample00() {
     setChartTitle("<b>x<sup>2</sup> vs x</b>");
     setChartSize(150, 150);
     addCurve();
     for (int i = 0; i < 10; i++) 
       getCurve().addPoint(i,i*i);
     getCurve().setLegendLabel("x<sup>2</sup>");
     getXAxis().setAxisLabel("x");
     getYAxis().setAxisLabel("x<sup>2</sup>");
     update();
  }
}

package com.googlecode.gchart.gcharttestapp.client;
import com.googlecode.gchart.client.GChart;
/**
 * Defines a line-plot of x*x vs. x, with dotted connecting lines.
 */
public class GChartExample00a extends GChart {
  GChartExample00a() {
     setChartTitle("<b>x<sup>2</sup> vs x</b>");
     setChartSize(150, 150);
     addCurve();
// 2 pixel square connecting dots, spaced 5 pixels apart:
     getCurve().getSymbol().setFillThickness(2);
     getCurve().getSymbol().setFillSpacing(5);
     for (int i = 0; i < 10; i++) 
       getCurve().addPoint(i,i*i);
     getCurve().setLegendLabel("x<sup>2</sup>");
     getXAxis().setAxisLabel("x");
     getYAxis().setAxisLabel("x<sup>2</sup>");
     update();
  }
}

package com.googlecode.gchart.gcharttestapp.client;
import com.googlecode.gchart.client.GChart;
/**
 * Defines a bar-chart of x*x vs. x, with gridlines.
 */
public class GChartExample01 extends GChart {
  GChartExample01() {
     setChartTitle("<b>x<sup>2</sup> vs x</b>");
     setChartSize(150, 150);
     addCurve();
     for (int i = 0; i < 10; i++) 
       getCurve().addPoint(i,i*i);
     getCurve().setLegendLabel("x<sup>2</sup>");
     getCurve().getSymbol().setSymbolType(SymbolType.VBAR_SOUTH);
     getCurve().getSymbol().setBackgroundColor("red");
     getCurve().getSymbol().setBorderColor("black");
     getCurve().getSymbol().setModelWidth(1.0);
     getXAxis().setAxisLabel("<b>x</b>");
     getXAxis().setHasGridlines(true);
     getYAxis().setAxisLabel("<b>x<sup>2</sup></b>");
     getYAxis().setHasGridlines(true);
     update();     
  }
}

package com.googlecode.gchart.gcharttestapp.client;
import com.googlecode.gchart.client.GChart;
/**
 * Defines an area-chart of x*x vs. x, with gridlines.
 */
public class GChartExample01a extends GChart {
  GChartExample01a() {
     setChartTitle("<b>x<sup>2</sup> vs x</b>");
     setChartSize(150, 150);
     addCurve();
     for (int i = 0; i < 10; i++) 
       getCurve().addPoint(i,i*i);
     getCurve().setLegendLabel("x<sup>2</sup>");
     getCurve().getSymbol().setSymbolType(SymbolType.VBAR_SOUTH);
     getCurve().getSymbol().setBackgroundColor("red");
     getCurve().getSymbol().setBorderColor("red");
// 3px is a little jaggy, but it uses 3 times less elements than 1px 
     getCurve().getSymbol().setWidth(3);
     getCurve().getSymbol().setFillThickness(3);
     getCurve().getSymbol().setFillSpacing(3);
     getXAxis().setAxisLabel("<b>x</b>");
     getXAxis().setHasGridlines(true);
     getYAxis().setAxisLabel("<b>x<sup>2</sup></b>");
     getYAxis().setHasGridlines(true);
     update();     
  }
}

package com.googlecode.gchart.gcharttestapp.client;

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Widget;
import com.googlecode.gchart.client.GChart;

/**
 * Defines a traditional "quarterly revenues" grouped bar-chart.
 */
public class GChartExample02 extends GChart {
  final String[] groupLabels = {
     "2007", "2008", "2009"};
  final String[] barLabels = {
     "Q1", "Q2", "Q3", "Q4"};
  final String[] barColors = {
     "red", "blue", "green", "silver"};
  final int MAX_REVENUE = 1000; 
  final int WIDTH = 300;
  final int HEIGHT = 200;
  Button updateButton = new Button(
    "<b><big>Generate New Simulated Revenues</big></b>");
   
  public GChartExample02() { 
    setChartSize(WIDTH, HEIGHT);
    setChartTitle("<b><big><big>" +
                  "Simulated Quarterly Revenues" + 
                  "</big></big><br>&nbsp;</b>");
    updateButton.addClickListener(new ClickListener() {
      public void onClick(Widget w) {
        for (int iCurve=0; iCurve < getNCurves(); iCurve++) {
          for (int iPoint=0;
               iPoint < getCurve(iCurve).getNPoints();
               iPoint++) {
            getCurve(iCurve).getPoint(iPoint).setY(
              Math.random()*MAX_REVENUE);
          }
        }
        update();
        updateButton.setFocus(true);
      }
    });
    setChartFootnotes(updateButton);
    for (int iCurve=0; iCurve < barLabels.length; iCurve++) { 
      addCurve();     // one curve per quarter
      getCurve().getSymbol().setSymbolType(
         SymbolType.VBAR_SOUTHWEST);
      getCurve().getSymbol().setBackgroundColor(barColors[iCurve]);
      getCurve().setLegendLabel(barLabels[iCurve]);
      getCurve().getSymbol().setHovertextTemplate(
         barLabels[iCurve] + " revenue=${y}");
      getCurve().getSymbol().setModelWidth(1.02);
      getCurve().getSymbol().setBorderColor("black");
      getCurve().getSymbol().setBorderWidth(1);
      for (int jGroup=0; jGroup < groupLabels.length; jGroup++) { 
        // the '+1' creates a bar-sized gap between groups 
        getCurve().addPoint(1+iCurve+jGroup*(barLabels.length+1),
                            Math.random()*MAX_REVENUE);
        getCurve().getPoint().setAnnotationText(barLabels[iCurve]);
        getCurve().getPoint().setAnnotationLocation(
           AnnotationLocation.NORTH);
      }
    }
    
    for (int i = 0; i < groupLabels.length; i++) {
      // formula centers tick-label horizontally on each group 
      getXAxis().addTick(
         barLabels.length/2. + i*(barLabels.length+1), 
         groupLabels[i]); 
      getXAxis().setTickLabelFontSize(20);
    }
    getXAxis().setTickLength(6);    // small tick-like gap... 
    getXAxis().setTickThickness(0); // but with invisible ticks
    getXAxis().setAxisMin(0);       // keeps first bar on chart

    getYAxis().setAxisMin(0);           // Based on sim revenue range
    getYAxis().setAxisMax(MAX_REVENUE); // of 0 to MAX_REVENUE.
    getYAxis().setTickCount(11);
    getYAxis().setHasGridlines(true);
    getYAxis().setTickLabelFormat("$#,###");

    update();
  }
}

package com.googlecode.gchart.gcharttestapp.client;

import com.googlecode.gchart.client.GChart;

/**
 * Defines a chart with a scatterplot on one y-axis, and a
 *  barchart on the other.
 */
public class GChartExample03 extends GChart {
  public GChartExample03() {
    setChartTitle("<h2>10x and x<sup>2</sup></h2>");
    setChartSize(300, 300);
    addCurve();
    getCurve().setLegendLabel("<i>10x</i>");
    getCurve().setYAxis(Y_AXIS);
    getCurve().getSymbol().setSymbolType(SymbolType.VBAR_SOUTH); 
    getCurve().getSymbol().setBackgroundColor("#DDF");
    getCurve().getSymbol().setBorderColor("red");
    getCurve().getSymbol().setBorderWidth(1);
    getCurve().getSymbol().setModelWidth(0.5);
    for (int i=0; i < 10; i++) {
      getCurve().addPoint(i,i*10);
    }
    addCurve();
    getCurve().setLegendLabel("<i>x<sup>2</sup></i>");
    getCurve().setYAxis(Y2_AXIS);
    getCurve().getSymbol().setSymbolType(SymbolType.BOX_CENTER); 
    getCurve().getSymbol().setWidth(5);
    getCurve().getSymbol().setHeight(5);
    getCurve().getSymbol().setBorderWidth(0);
    getCurve().getSymbol().setBackgroundColor("navy");
    getCurve().getSymbol().setFillThickness(2);
    getCurve().getSymbol().setFillSpacing(5);
    
    for (int i=0; i < getCurve(0).getNPoints(); i++) {
      getCurve().addPoint(i,i*i);
    }
    
    getXAxis().setAxisLabel("<i>x</i>");
    getXAxis().setHasGridlines(true);
    getXAxis().setTickThickness(0); // hide tick marks... 
    getXAxis().setTickLength(3);    // but leave a small gap
    getYAxis().setAxisLabel("<i>10x</i>");
    getYAxis().setAxisMax(100);
    getYAxis().setTickLabelFormat("#.#");
    getYAxis().setTickCount(11);
    getY2Axis().setAxisLabel("<i>x<sup>2</sup></i>");
    getY2Axis().setHasGridlines(true);
    // last bar 'sticks out' over right edge, so extend 'grid' right:
    getY2Axis().setTickLength(15); 
    update();
  }
}

package com.googlecode.gchart.gcharttestapp.client;

import com.googlecode.gchart.client.GChart;

/**
 * Defines a traditional "semi-log" chart by using custom
 * ticks on the y axis, in conjunction with log-transformed
 * y data.
 */
public class GChartExample04 extends GChart {
// GWT 1.4's Math class does not include JDK's
// Math.log10--so emulate it.
  private static double log10(double x) {
    return Math.log(x)/Math.log(10.0);
  }
  public GChartExample04() {
    super(300, 450);
    setChartTitle("<h2>2<sup>x</sup> vs x</h2>");
    addCurve();
    getCurve().getSymbol().setHovertextTemplate("${y}=2^${x}"); 
    getCurve().setLegendLabel("<b>2<sup>x</sup></b>");
    getCurve().getSymbol().setBackgroundColor("red");
    getCurve().getSymbol().setBorderColor("black");
    getCurve().getSymbol().setWidth(9);
    getCurve().getSymbol().setHeight(9);
    
    // add (log10-transformed) powers of 2 from 1/4 to 8
    for (int i=-2; i < 4; i++) 
      getCurve().addPoint(i,log10(Math.pow(2,i)));
    
    // GChart's "=10^" NumberFormat prefix inverts the log10
    // transform
    getYAxis().setTickLabelFormat("=10^#.##"); 
    // add conventional log-scaled ticks from .1 to 10
    getYAxis().addTick(log10(0.1));
    for (double x=0.1; x < 10; x*=10) 
      for (int y = 2; y <= 10; y++) 
         getYAxis().addTick(log10(x*y));

    getXAxis().setAxisLabel("<b>x</b>");
    getXAxis().setHasGridlines(true);
    getXAxis().setTickCount(6);
    
    getYAxis().setAxisLabel("<b>2<sup>x</sup></b>");
    getYAxis().setHasGridlines(true);
    
    update();
  }
}

package com.googlecode.gchart.gcharttestapp.client;

import com.googlecode.gchart.client.GChart;

/**
 * Defines a traditional "semi-log" chart by using custom ticks on the y
 * axis, in conjunction with log-transformed y data.
 */
public class GChartExample04a extends GChart {
// GWT 1.4's Math class does not include JDK's Math.log10--so emulate it.
  private static double log10(double x) {
    return Math.log(x)/Math.log(10.0);
  }
  public GChartExample04a() {
    super(300, 450);
    setChartTitle("<h2>2<sup>x</sup> vs x</h2>");
    addCurve();
    getCurve().getSymbol().setHovertextTemplate("${y}=2^${x}"); 
    getCurve().setLegendLabel("<b>2<sup>x</sup></b>");
    getCurve().getSymbol().setBackgroundColor("red");
    getCurve().getSymbol().setBorderColor("black");
    getCurve().getSymbol().setWidth(9);
    getCurve().getSymbol().setHeight(9);

    // these lines draw a thin line between each point
    getCurve().getSymbol().setFillSpacing(2);
    getCurve().getSymbol().setFillThickness(1);
    
    // add (log10-transformed) powers of 2 from 1/4 to 8
    for (int i=-2; i < 4; i++) 
      getCurve().addPoint(i,log10(Math.pow(2,i)));
    
    // GChart's "=10^" NumberFormat prefix inverts the log10 transform
    getYAxis().setTickLabelFormat("=10^#.##"); 
    // add conventional log-scaled ticks from .1 to 10
    getYAxis().addTick(log10(0.1));
    for (double x=0.1; x < 10; x*=10) 
      for (int y = 2; y <= 10; y++) 
         getYAxis().addTick(log10(x*y));

    getXAxis().setAxisLabel("<b>x</b>");
    getXAxis().setHasGridlines(true);
    getXAxis().setTickCount(6);
    
    getYAxis().setAxisLabel("<b>2<sup>x</sup></b>");
    getYAxis().setHasGridlines(true);
    
    update();
  }
}

package com.googlecode.gchart.gcharttestapp.client;
import com.googlecode.gchart.client.GChart;
/**
 * Defines a "square pie chart", that is, a
 * fat, axes-free, stacked bar chart that is
 * often an acceptable alternative to a pie-chart.
 * <p>
 * 
 * Even though, as of version 2.0, GChart also supports
 * round pie charts, square pie charts are still
 * much more efficient.
 * 
 */
public class GChartExample06 extends GChart {
  GChartExample06() {
     setChartTitle("<b><i>Market Share by Region</i></b>");
     final int SIZE = 200;   
     setChartSize(SIZE, SIZE);
     final String[] region =
       {"USA", "Canada", "Mexico", "India", "France", "Iceland"};
     // elements in this array must sum to 100.
     final double[] percent = {35, 25, 15, 10, 10, 5};
     final String[] colors =
       {"red", "green", "yellow", "fuchsia", "silver", "aqua"};
     double sum = 0;     
     for (int i = percent.length-1; i >= 0; i--) {
       addCurve();
       getCurve().getSymbol().setSymbolType(
          SymbolType.BOX_SOUTHEAST);
       getCurve().getSymbol().setModelHeight(percent[i]);
       getCurve().getSymbol().setBackgroundColor(colors[i]);
       getCurve().getSymbol().setBorderColor(colors[i]);
       getCurve().getSymbol().setWidth(SIZE);
       getCurve().getSymbol().setHovertextTemplate(
          region[i] + ", " + percent[i] + "%");
       getCurve().setLegendLabel(region[i]);
       getCurve().addPoint(0, 100-sum);
       getCurve().getPoint().setAnnotationText(region[i]);
       getCurve().getPoint().setAnnotationLocation(
         AnnotationLocation.CENTER);
       sum += percent[i];
     }

     getXAxis().setTickCount(0);
     getXAxis().setTickThickness(0);
     getXAxis().setAxisMin(0);
     getXAxis().setAxisMax(SIZE);
     getYAxis().setTickCount(0);
     getYAxis().setTickThickness(0);
     getYAxis().setAxisMin(0);
     getYAxis().setAxisMax(100); 
     
     update();     
  }
}

package com.googlecode.gchart.gcharttestapp.client;


import com.googlecode.gchart.client.GChart;

/** Basic pie chart */
public class GChartExample07 extends GChart {
   GChartExample07() {
     double[] pieMarketShare = {0.65,0.20,0.10,0.05};
     String[] pieTypes = {"Apple", "Cherry", "Pecan", "Bannana"};
     String[] pieColors = {"green", "red", "maroon", "yellow"};
       
     this.setChartSize(300, 200);
     setChartTitle("<h3>2008 Sales by Pie Flavor" + 
                   "<br>(Puny Pies, Inc.) </h3>");
     this.setLegendVisible(false);
     getXAxis().setAxisVisible(false);
     getYAxis().setAxisVisible(false);
     getXAxis().setAxisMin(0);
     getXAxis().setAxisMax(10);
     getXAxis().setTickCount(0);
     getYAxis().setAxisMin(0);
     getYAxis().setAxisMax(10);
     getYAxis().setTickCount(0);
// this line orients the center of the first slice (apple) due east
     setInitialPieSliceOrientation(0.75 - pieMarketShare[0]/2);
     for (int i=0; i < pieMarketShare.length; i++) {
       addCurve();
       getCurve().addPoint(5,5);
       getCurve().getSymbol().setSymbolType(
         SymbolType.PIE_SLICE_OPTIMAL_SHADING);
       getCurve().getSymbol().setBorderColor("white");
       getCurve().getSymbol().setBackgroundColor(pieColors[i]);
       // next two lines define pie diameter as 6 x-axis model units
       getCurve().getSymbol().setModelWidth(6);
       getCurve().getSymbol().setHeight(0);
       getCurve().getSymbol().setFillSpacing(3);
       getCurve().getSymbol().setFillThickness(3);
       getCurve().getSymbol().setHovertextTemplate(pieTypes[i] + ", " + 
         Math.round(100*pieMarketShare[i])+"%");
       getCurve().getSymbol().setPieSliceSize(pieMarketShare[i]);
       getCurve().getPoint().setAnnotationText(
         getCurve().getSymbol().getHovertextTemplate());
       getCurve().getPoint().setAnnotationLocation(
         AnnotationLocation.OUTSIDE_PIE_ARC);
     }
     update();
   }
   
}

package com.googlecode.gchart.gcharttestapp.client;


import com.googlecode.gchart.client.GChart;

/** "Exploded pie" example*/
public class GChartExample08 extends GChart {
   GChartExample08() {
     double[] pieMarketShare = {0.65,0.20,0.05,0.10};
     String[] pieTypes = {"Apple", "Cherry", "Bannana", "Pecan"};
     String[] pieColors = {"green", "red", "yellow", "maroon"};
       
     this.setChartSize(300, 200);
     setChartTitle(
       "<b><big>Exploding Puny Pies, Inc. 2008 Sales</b></big>");
     setPadding("10px 0px 0px 0px");
     getXAxis().setHasGridlines(false);
     this.setLegendVisible(false);
     getXAxis().setAxisVisible(false);
     getXAxis().setAxisMin(0);
     getXAxis().setAxisMax(10);
     getXAxis().setTickCount(0);
     getYAxis().setAxisMin(0);
     getYAxis().setAxisMax(10);
     getYAxis().setTickCount(0);
     getYAxis().setAxisVisible(false);
     
     double orientation = 0;     
     for (int i=0; i < pieMarketShare.length; i++) {
       addCurve();
       // adjust slice center to create "exploding" slices
       final double explodingXRadius = 0.48;
       final double explodingYRadius = 0.32;
       double theta = 3*Math.PI/2 
         - 2*Math.PI*(orientation + pieMarketShare[i]/2.0);
       getCurve().addPoint(5+explodingXRadius*Math.cos(theta),
                           5+explodingYRadius*Math.sin(theta));
       getCurve().getSymbol().setSymbolType(
          SymbolType.PIE_SLICE_OPTIMAL_SHADING);
       getCurve().getSymbol().setBorderColor("white");
       getCurve().getSymbol().setBackgroundColor(pieColors[i]);
       // next two lines define pie diameter as 6 x-axis model units
       getCurve().getSymbol().setModelWidth(6);
       getCurve().getSymbol().setHeight(0);
       getCurve().getSymbol().setFillSpacing(3);
       getCurve().getSymbol().setFillThickness(3);
       getCurve().getSymbol().setHovertextTemplate(
         pieTypes[i] + ", " + Math.round(100*pieMarketShare[i])+"%");
       getCurve().getSymbol().setPieSliceOrientation(orientation);
       getCurve().getSymbol().setPieSliceSize(pieMarketShare[i]);
       getCurve().getPoint().setAnnotationText(pieTypes[i]);
       getCurve().getPoint().setAnnotationLocation(
         AnnotationLocation.OUTSIDE_PIE_ARC);
       // add a 5px gap between label and pie slice
       getCurve().getPoint().setAnnotationXShift(5);
       orientation = (orientation + pieMarketShare[i]) % 1.0;
     }
     update();
   }
   
}

package com.googlecode.gchart.gchartdemoapp.client;

import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Widget;
import com.googlecode.gchart.client.GChart;

/** Combination chart containing pie, line, and bar-based curves */
public class GChartExample11 extends GChart {
  final double INITIAL_PRICE = 100;
  final double MAX_MONTHLY_RELATIVE_CHANGE = 0.2;
  final int N_FORCASTED_MONTHS = 13;
  double[] prices = new double[N_FORCASTED_MONTHS];
  double minPrice = INITIAL_PRICE;
  double maxPrice = INITIAL_PRICE;

// updates the chart with results of a new oil price simulation  
  private void updateChart() {
    minPrice = INITIAL_PRICE;
    maxPrice = INITIAL_PRICE;
    prices[0] = INITIAL_PRICE;
    for (int i=1; i < N_FORCASTED_MONTHS; i++) {
       prices[i] = prices[i-1] *
         (1 + MAX_MONTHLY_RELATIVE_CHANGE*(2*Math.random()-1));
       minPrice = Math.min(minPrice, prices[i]);
       maxPrice = Math.max(maxPrice, prices[i]);
    }

    // update pie slice sizes to reflect new min and max
    getCurve(0).getSymbol().setPieSliceSize(
    		minPrice/(minPrice+maxPrice));
    getCurve(0).getSymbol().setHovertextTemplate(
      "Minimum price (per barrel): "+
      getYAxis().formatNumberAsTickLabel(minPrice));
    getCurve(1).getSymbol().setPieSliceSize(
    		maxPrice/(minPrice+maxPrice));
    getCurve(1).getSymbol().setHovertextTemplate(
      "Maximum price (per barrel): " +
      getYAxis().formatNumberAsTickLabel(maxPrice));


// update backward-price-difference and price curves    
    getCurve(2).clearPoints();
    getCurve(3).clearPoints();
    for (int i = 0; i < N_FORCASTED_MONTHS; i++) {
      getCurve(2).addPoint(i, (i == 0)?0:(prices[i]-prices[i-1]));
      getCurve(3).addPoint(i,prices[i]);
    
      if (prices[i]!=minPrice && prices[i]!=maxPrice) {
        //no min/max;
        getCurve(3).getPoint().setAnnotationText(null); //no label
      }
      else {
        // label point to indicate it's at a min or max price
        getCurve(3).getPoint().setAnnotationFontSize(10);
        getCurve(3).getPoint().setAnnotationFontWeight("bold");
        if (prices[i]==minPrice) {
          getCurve(3).getPoint().setAnnotationLocation(
            AnnotationLocation.SOUTH);
          getCurve(3).getPoint().setAnnotationText("min");
          getCurve(3).getPoint().setAnnotationFontColor("blue");
        }
        else {
          getCurve(3).getPoint().setAnnotationLocation(
            AnnotationLocation.NORTH);
      	  getCurve(3).getPoint().setAnnotationText("max");
      	  getCurve(3).getPoint().setAnnotationFontColor("blue");
        }
      }
    }
    update();  
  }

  
   GChartExample11() {
// misc chart configuration
     setChartSize(300, 300);
     setPlotAreaBackgroundColor("#CCC");
     setLegendBackgroundColor(getPlotAreaBackgroundColor());
     setShowOffChartPoints(true);
     setGridColor("white");
// convenience methods; these properties could also have been defined
// via CSS. See the javadoc comment for GChart.USE_CSS for more info.
     setBackgroundColor("#DDF");
     setBorderColor("black");
     setBorderWidth("1px");
     setBorderStyle("outset");
     setFontFamily("Veranda, Arial, sans-serif");
     setPadding("5px");
// title and footnotes (w. update button)
     setChartTitle(
"<b><big><big>Estimated Future Oil Prices " +
"</big></big><small><small><br> " +
"<i>All results are pseudo-random. " + 
"Randomize fully before you invest." + 
"</i><br>&nbsp;</small></small></b>");
     final Button updateButton = new Button(
"<b><big><big><big>Update Estimates</big></big></big></b>");
     updateButton.setTitle(
"Click for new totally unbiased, totally random, estimates.");
     updateButton.addClickListener(new ClickListener() {
        public void onClick(Widget w) {
          updateChart();
          updateButton.setFocus(true);
        }
     });
     setChartFootnotes(updateButton);

// x-axis config    
     getXAxis().setAxisLabel(
"<small>time (months from now)</small><br>&nbsp;");
     getXAxis().setTickCount(13);
     getXAxis().setTicksPerLabel(2);
     getXAxis().setAxisMin(0);
     getXAxis().setAxisMax(N_FORCASTED_MONTHS-1);
     getXAxis().setHasGridlines(true);
// y-axis config
     getYAxis().setAxisLabel(
"<center><small>p<br>r<br>i<br>c<br>e</small></center>");
     getYAxis().getAxisLabel().setTitle("price");
     getYAxis().setAxisMin(0);
     getYAxis().setAxisMax(200);
     getYAxis().setTickCount(5);
     getYAxis().setTickLabelFormat("$#.##");
     getYAxis().setHasGridlines(true);
     // y2-axis config
     
/* Because the tick labels contain the narrower-than-average
 * characters "($50)", GChart's heuristic leaves too much space
 * for the axis labels. So we set the space to 0, and then use
 * the old HTML trick of &nbsp; in the axis label to add the
 * space we need explicitly (could also have used CSS to pad
 * the widget representing the axis label appropriately).
 */
     getY2Axis().setTickLabelThickness(0);
     getY2Axis().setAxisLabel(
"<center><small>&Delta;<br>p<br>r<br>i<br>c<br>" + 
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
"e&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
"</small></center>");
     getY2Axis().setAxisMin(-50);
     getY2Axis().setAxisMax(50);
     getY2Axis().setTickCount(5);
     getY2Axis().setTickLabelFormat("$#.##;($#.##)");

// pie shows the relative size of smallest and largest prices

     final double X_AT_PIE_CENTER = 15.5; // in chart-model
     final double Y_AT_PIE_CENTER = 175;  // coordinates
     final int PIE_DIAMETER = 80;         // in pixels
     addCurve(); // slice representing largest price over simulation
     getCurve().getSymbol().setSymbolType(
       SymbolType.PIE_SLICE_OPTIMAL_SHADING);
     getCurve().getSymbol().setFillSpacing(3);
     getCurve().getSymbol().setFillThickness(3);
     getCurve().getSymbol().setBorderWidth(1);
     getCurve().getSymbol().setBorderColor("#E78");
     getCurve().getSymbol().setBackgroundColor("#F00");
     getCurve().getSymbol().setHeight(PIE_DIAMETER); 
     getCurve().getSymbol().setWidth(0);
     getCurve().addPoint(X_AT_PIE_CENTER,Y_AT_PIE_CENTER); 
     getCurve().getPoint().setAnnotationText("min");
     getCurve().getPoint().setAnnotationLocation(
       AnnotationLocation.ON_PIE_ARC);
     getCurve().getPoint().setAnnotationFontSize(12);
     getCurve().getPoint().setAnnotationFontWeight("bold");
     getCurve().getPoint().setAnnotationFontColor("blue");
     
     addCurve(); // slice representing smallest price over simulation
     getCurve().getSymbol().setSymbolType(
       SymbolType.PIE_SLICE_OPTIMAL_SHADING);
     getCurve().getSymbol().setFillSpacing(3);
     getCurve().getSymbol().setFillThickness(3);
     getCurve().getSymbol().setBorderWidth(1);
     getCurve().getSymbol().setBorderColor("#7E8");
     getCurve().getSymbol().setBackgroundColor("#0F0");
     getCurve().getSymbol().setHeight(PIE_DIAMETER); 
     getCurve().getSymbol().setWidth(0);
     getCurve().addPoint(X_AT_PIE_CENTER,Y_AT_PIE_CENTER); 
     getCurve().getPoint().setAnnotationText("max");
     getCurve().getPoint().setAnnotationLocation(
       AnnotationLocation.ON_PIE_ARC);
     getCurve().getPoint().setAnnotationFontSize(12);
     getCurve().getPoint().setAnnotationFontWeight("bold");
     getCurve().getPoint().setAnnotationFontColor("blue");

     
     // baseline bars (on y2) represent monthly change in prices
     addCurve();
     getCurve().getSymbol().setSymbolType(
       SymbolType.VBAR_BASELINE_CENTER);
     getCurve().getSymbol().setBaseline(0);
     getCurve().getSymbol().setBorderWidth(1);
     getCurve().getSymbol().setBorderColor("black");
     getCurve().getSymbol().setBorderStyle("solid");    
     getCurve().getSymbol().setBackgroundColor("red");
     getCurve().setLegendLabel("&Delta;price");
     getCurve().getSymbol().setWidth(11);
     getCurve().getSymbol().setHovertextTemplate(
       "Month=${x}; Price change=${y}");
     getCurve().setYAxis(Y2_AXIS);

     // line curve (on y) represents actual price
     addCurve();
     getCurve().setLegendLabel("price");
     getCurve().getSymbol().setFillSpacing(10);
     getCurve().getSymbol().setFillThickness(2);
     getCurve().getSymbol().setFillHasHovertext(false);
     getCurve().getSymbol().setBackgroundColor("blue");
     getCurve().getSymbol().setBorderColor("blue");

     // line to extenuate the baseline of the baseline-based bars
     addCurve();
     getCurve().getSymbol().setSymbolType(SymbolType.YGRIDLINE);
     getCurve().getSymbol().setBackgroundColor("black");
     getCurve().getSymbol().setHeight(1);
     getCurve().getSymbol().setBorderWidth(0);
     getCurve().addPoint(0,100);     
     
     updateChart();

// button must be rendered in browser before it can accept focus
     DeferredCommand.addCommand(new Command() {
       public void execute() {
          updateButton.setFocus(true);
       }
     });

   }

}

package com.googlecode.gchart.gcharttestapp.client;

import java.util.Date;

import com.googlecode.gchart.client.GChart;

/** Simple time sequence example with date-time x-axis labels */
public class GChartExample12 extends GChart {

   static class DateStampedValue {
     Date date;
     double value;
     public DateStampedValue(String dateTimeString, double value) {
       this.date = new Date(dateTimeString);
       this.value = value;
     }
   }
// Data from Malcolm Gorman's GWT forum post:
// http://groups.google.com/group/Google-Web-Toolkit/msg/6125ce39fd2339ac
   DateStampedValue[] dateSequence = {
    new DateStampedValue("1/28/2008 03:00", 13.0),
    new DateStampedValue("1/28/2008 03:30", 12.9),
    new DateStampedValue("1/28/2008 03:51", 12.9),
    new DateStampedValue("1/28/2008 04:11", 12.9),
    new DateStampedValue("1/28/2008 04:24", 13.0),
    new DateStampedValue("1/28/2008 04:46", 12.5),
    new DateStampedValue("1/28/2008 05:00", 12.2),
    new DateStampedValue("1/28/2008 05:30", 12.8),
    new DateStampedValue("1/28/2008 06:00", 11.6),
    new DateStampedValue("1/28/2008 06:30", 12.5),
    new DateStampedValue("1/28/2008 07:00", 11.4),
    new DateStampedValue("1/28/2008 07:30", 12.9),
    new DateStampedValue("1/28/2008 08:00", 12.9),
    new DateStampedValue("1/28/2008 08:30", 11.2),
    new DateStampedValue("1/28/2008 09:00", 11.7),
    new DateStampedValue("1/28/2008 09:30", 12.4),
    new DateStampedValue("1/28/2008 10:00", 14.4),
    new DateStampedValue("1/28/2008 10:12", 13.7),
    new DateStampedValue("1/28/2008 10:30", 11.9),
    new DateStampedValue("1/28/2008 11:00", 14.3),
    new DateStampedValue("1/28/2008 11:30", 14.0),
    new DateStampedValue("1/28/2008 12:00", 14.7),
    new DateStampedValue("1/28/2008 12:30", 15.4),
    new DateStampedValue("1/28/2008 13:00", 15.5),
   };
   
    GChartExample12() {
     super(400,200); 
     setChartTitle("<b><i><big>Temperature vs Time</big></i></b>");
     setPadding("5px");
     
     getXAxis().setAxisLabel("<small><b><i>Time</i></b></small>");
     getXAxis().setHasGridlines(true);
     getXAxis().setTickCount(6);
     // Except for "=(Date)", a standard GWT DateTimeFormat string
     getXAxis().setTickLabelFormat("=(Date)dd/h:mm a");
     
     getYAxis().setAxisLabel("<small><b><i>&deg;C</i></b></small>");
     getYAxis().setHasGridlines(true);
     getYAxis().setTickCount(11);
     getYAxis().setAxisMin(11);
     getYAxis().setAxisMax(16);
     
     addCurve();
     getCurve().setLegendLabel("<i>T (&deg;C)</i>");
     getCurve().getSymbol().setBorderColor("blue");
     getCurve().getSymbol().setBackgroundColor("blue");
     getCurve().getSymbol().setFillSpacing(10);
     getCurve().getSymbol().setFillThickness(3);

     for (int i = 0; i < dateSequence.length; i++)
       // Note that getTime() returns milliseconds since
       // 1/1/70--required whenever "date cast" tick label
       // formats (those beginning with "=(Date)") are used.
       getCurve().addPoint(dateSequence[i].date.getTime(),
                           dateSequence[i].value);
     update();
   }
}

Installing GChart

The instructions below were tested using The Eclipse Platform Version 3.3.0, and GWT version 1.4.61.

These steps assume you already have a working Eclipse-based GWT project, into which you want to add a few GChart charts. To create a new working GWT project within Eclipse, simply follow the Eclipse-specific instructions in the Getting Started section of the GWT Developer Guide.

  1. Download the latest gchart-x.x.zip from the GChart Project Home Page

  2. Unzip this file, which contains gchart.jar and the GChart javadocs, into a folder you can easily locate.

  3. Tell Eclipse where to find gchart.jar

    Just as for a normal Java JAR, you need to tell Eclipse where to find gchart.jar. One way to do this is to right click on your GWT project's name in the Eclipse Project Explorer, select Build Path, then Add External Archives, and then navigate to the folder you unzipped GChart into and click on the gchart.jar it contains.

  4. Add the following line to your project's GWT module file (that's the one beginning with your own application's module name, and ending in .gwt.xml): 

            <inherits name='com.googlecode.gchart.GChart'/>

That's it. You can now add classes to your project such as those shown in the Chart Gallery, and then make those charts appear in the browser via typical GWT code such as: 

 RootPanel.get().add(new GChartExample00());

The above steps are all that you need to do to add GChart if you are doing everything interactively within Eclipse. However, as Ian Petersen and Isaac Truett explained in response to my question on the GWT forum (thanks!), additional steps (that involve editing your project's *-compile.cmd and *-shell.cmd scripts to add appropriate references to gchart.jar) are required if you are planning to invoke these scripts within, say, an ant-based automated build. Fortunately, if you are already using an automated ant-based build for your GWT projects, you likely don't need any of these instructions.

Version:
2.02 (tested with GWT 1.4.61 in Firefox 2.0, IE 7 and IE 6)
Author:
John C. Gunther, May B. Yew
Package  Class  Use  Tree  Deprecated  Index  Help 
 PREV PACKAGE   NEXT PACKAGE FRAMES    NO FRAMES    
Copyright © 2007 John C. Gunther. All Rights Reserved.