GXT 3.0 Line chart with tooltip test case

GXT3_ChartWithTooltip.java

import java.util.ArrayList;
import java.util.List;

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.editor.client.Editor.Path;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.chart.client.chart.Chart;
import com.sencha.gxt.chart.client.chart.Chart.Position;
import com.sencha.gxt.chart.client.chart.Legend;
import com.sencha.gxt.chart.client.chart.axis.CategoryAxis;
import com.sencha.gxt.chart.client.chart.axis.NumericAxis;
import com.sencha.gxt.chart.client.chart.series.LineSeries;
import com.sencha.gxt.chart.client.chart.series.Primitives;
import com.sencha.gxt.chart.client.chart.series.SeriesToolTipConfig;
import com.sencha.gxt.chart.client.draw.Color;
import com.sencha.gxt.chart.client.draw.RGB;
import com.sencha.gxt.chart.client.draw.path.PathSprite;
import com.sencha.gxt.chart.client.draw.sprite.Sprite;
import com.sencha.gxt.chart.client.draw.sprite.TextSprite;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.data.shared.LabelProvider;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.data.shared.PropertyAccess;
import com.sencha.gxt.fx.client.Draggable;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.FramedPanel;
import com.sencha.gxt.widget.core.client.Resizable;
import com.sencha.gxt.widget.core.client.Resizable.Dir;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.button.ToggleButton;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.container.Viewport;
import com.sencha.gxt.widget.core.client.event.CollapseEvent;
import com.sencha.gxt.widget.core.client.event.CollapseEvent.CollapseHandler;
import com.sencha.gxt.widget.core.client.event.ExpandEvent;
import com.sencha.gxt.widget.core.client.event.ExpandEvent.ExpandHandler;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.tips.ToolTip;
import com.sencha.gxt.widget.core.client.toolbar.ToolBar;

public class GXT3_ChartWithTooltip {

  public GXT3_ChartWithTooltip() {
    Viewport vp = new Viewport();
    vp.add(asWidget());

    RootPanel.get().add(vp);
  }

  public interface DataPropertyAccess extends PropertyAccess<Data> {
    ValueProvider<Data, Double> data1();

    ValueProvider<Data, Double> data2();

    ValueProvider<Data, Double> data3();

    ValueProvider<Data, String> name();

    @Path("id")
    ModelKeyProvider<Data> nameKey();
  }

  private static final DataPropertyAccess dataAccess = GWT.create(DataPropertyAccess.class);

  public Widget asWidget() {
    final ListStore<Data> store = new ListStore<Data>(dataAccess.nameKey());
    store.addAll(getData(8, 20, 100));

    final Chart<Data> chart = new Chart<Data>();
    chart.setStore(store);
    chart.setShadowChart(true);

    NumericAxis<Data> axis = new NumericAxis<Data>();
    axis.setPosition(Position.LEFT);
    axis.addField(dataAccess.data1());
    axis.addField(dataAccess.data2());
    axis.addField(dataAccess.data3());
    TextSprite title = new TextSprite("Number of Hits");
    title.setFontSize(18);
    axis.setTitleConfig(title);
    axis.setMinorTickSteps(1);
    axis.setDisplayGrid(true);
    PathSprite odd = new PathSprite();
    odd.setOpacity(1);
    odd.setFill(new Color("#ddd"));
    odd.setStroke(new Color("#bbb"));
    odd.setStrokeWidth(0.5);
    axis.setGridOddConfig(odd);
    axis.setMinimum(0);
    axis.setMaximum(100);
    chart.addAxis(axis);

    CategoryAxis<Data, String> catAxis = new CategoryAxis<Data, String>();
    catAxis.setPosition(Position.BOTTOM);
    catAxis.setField(dataAccess.name());
    title = new TextSprite("Month of the Year");
    title.setFontSize(18);
    catAxis.setTitleConfig(title);
    catAxis.setLabelProvider(new LabelProvider<String>() {
      @Override
      public String getLabel(String item) {
        return item.substring(0, 3);
      }
    });
    chart.addAxis(catAxis);

    SeriesToolTipConfig<Data> config = new SeriesToolTipConfig<Data>();
    config.setDismissDelay(5000);
    config.setHideDelay(200);

    final ToolTip newToolTip = new ToolTip(null);

    final LineSeries<Data> series = new LineSeries<Data>() {
      {
        toolTip = newToolTip;
      }
    };
    series.setToolTipConfig(config);
    series.setYAxisPosition(Position.LEFT);
    series.setYField(dataAccess.data1());
    series.setStroke(new RGB(194, 0, 36));
    series.setShowMarkers(true);
    Sprite marker = Primitives.square(0, 0, 6);
    marker.setFill(new RGB(194, 0, 36));
    series.setMarkerConfig(marker);
    series.setHighlighting(true);
    chart.addSeries(series);

    final LineSeries<Data> series2 = new LineSeries<Data>() {
      {
        toolTip = newToolTip;
      }
    };
    series2.setToolTipConfig(config);
    series2.setYAxisPosition(Position.LEFT);
    series2.setYField(dataAccess.data2());
    series2.setStroke(new RGB(240, 165, 10));
    series2.setShowMarkers(true);
    series2.setSmooth(true);
    marker = Primitives.circle(0, 0, 6);
    marker.setFill(new RGB(240, 165, 10));
    series2.setMarkerConfig(marker);
    series2.setHighlighting(true);
    chart.addSeries(series2);

    final LineSeries<Data> series3 = new LineSeries<Data>() {
      {
        toolTip = newToolTip;
      }
    };
    series3.setToolTipConfig(config);
    series3.setYAxisPosition(Position.LEFT);
    series3.setYField(dataAccess.data3());
    series3.setStroke(new RGB(32, 68, 186));
    series3.setShowMarkers(true);
    series3.setSmooth(true);
    series3.setFill(new RGB(32, 68, 186));
    marker = Primitives.diamond(0, 0, 6);
    marker.setFill(new RGB(32, 68, 186));
    series3.setMarkerConfig(marker);
    series3.setHighlighting(true);
    chart.addSeries(series3);

    final Legend<Data> legend = new Legend<Data>();
    legend.setPosition(Position.RIGHT);
    legend.setItemHighlighting(true);
    legend.setItemHiding(true);
    chart.setLegend(legend);

    TextButton regenerate = new TextButton("Reload Data");
    regenerate.addSelectHandler(new SelectHandler() {
      @Override
      public void onSelect(SelectEvent event) {
        store.clear();
        store.addAll(getData(8, 20, 100));
        chart.redrawChart();
      }
    });
    ToggleButton animation = new ToggleButton("Animate");
    animation.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
      @Override
      public void onValueChange(ValueChangeEvent<Boolean> event) {
        chart.setAnimated(event.getValue());
      }
    });
    animation.setValue(true, true);
    ToggleButton shadow = new ToggleButton("Shadow");
    shadow.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
      @Override
      public void onValueChange(ValueChangeEvent<Boolean> event) {
        chart.setShadowChart(event.getValue());
        chart.redrawChart();
      }
    });
    shadow.setValue(true);

    ToolBar toolBar = new ToolBar();
    toolBar.add(regenerate);
    toolBar.add(animation);
    toolBar.add(shadow);

    ContentPanel panel = new FramedPanel();
    panel.getElement().getStyle().setMargin(10, Unit.PX);
    panel.setCollapsible(true);
    panel.setHeadingText("Line Chart");
    panel.setPixelSize(620, 500);
    panel.setBodyBorder(true);

    VerticalLayoutContainer layout = new VerticalLayoutContainer();
    panel.add(layout);

    final Resizable resize = new Resizable(panel, Dir.E, Dir.SE, Dir.S);
    resize.setMinHeight(400);
    resize.setMinWidth(400);

    panel.addExpandHandler(new ExpandHandler() {
      @Override
      public void onExpand(ExpandEvent event) {
        resize.setEnabled(true);
      }
    });
    panel.addCollapseHandler(new CollapseHandler() {
      @Override
      public void onCollapse(CollapseEvent event) {
        resize.setEnabled(false);
      }
    });

    new Draggable(panel, panel.getHeader()).setUseProxy(false);

    toolBar.setLayoutData(new VerticalLayoutData(1, -1));
    layout.add(toolBar);

    chart.setLayoutData(new VerticalLayoutData(1, 1));
    layout.add(chart);

    return panel;
  }

  public List<Data> getData(int size, double min, double scale) {
    List<Data> data = new ArrayList<Data>();
    for (int i = 0; i < size; i++) {
      data.add(new Data(monthsFull[i % monthsFull.length], Math.floor(Math.max(Math.random() * scale, min)),
          Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min)),
          Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min)),
          Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min)),
          Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min))));
    }
    return data;
  }

  private static final String[] monthsFull = new String[] {
      "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November",
      "December"};

  private static int lastId = 0;
  
  public class Data {
   
    private String id = "" + lastId++;

    private String name;
    private double data1;
    private double data2;
    private double data3;
    private double data4;
    private double data5;
    private double data6;
    private double data7;
    private double data8;
    private double data9;

    public Data(String name, double data1, double data2, double data3, double data4, double data5, double data6,
        double data7, double data8, double data9) {
      super();
      this.name = name;
      this.data1 = data1;
      this.data2 = data2;
      this.data3 = data3;
      this.data4 = data4;
      this.data5 = data5;
      this.data6 = data6;
      this.data7 = data7;
      this.data8 = data8;
      this.data9 = data9;
    }

    public double getData1() {
      return data1;
    }

    public double getData2() {
      return data2;
    }

    public double getData3() {
      return data3;
    }

    public double getData4() {
      return data4;
    }

    public double getData5() {
      return data5;
    }

    public double getData6() {
      return data6;
    }

    public double getData7() {
      return data7;
    }

    public double getData8() {
      return data8;
    }

    public double getData9() {
      return data9;
    }

    public String getName() {
      return name;
    }

    public void setData1(double data1) {
      this.data1 = data1;
    }

    public void setData2(double data2) {
      this.data2 = data2;
    }

    public void setData3(double data3) {
      this.data3 = data3;
    }

    public void setData4(double data4) {
      this.data4 = data4;
    }

    public void setData5(double data5) {
      this.data5 = data5;
    }

    public void setData6(double data6) {
      this.data6 = data6;
    }

    public void setData7(double data7) {
      this.data7 = data7;
    }

    public void setData8(double data8) {
      this.data8 = data8;
    }

    public void setData9(double data9) {
      this.data9 = data9;
    }

    public void setName(String name) {
      this.name = name;
    }

    public String getId() {
      return id;
    }
  }
}