HighCharts-GXT/GWT Project The official HighCharts-GWT/GXT adapters blog

A running sample

A complete and running sample

public class HighChartTestApp implements EntryPoint {
 public static final String CONTAINER_DIV = "MyUniqueDIV";
 final String types[] = new String[] {
   "spline",
   "column",
   "areaspline",
   "area",
   "line"
 };

 public void onModuleLoad() {
  Viewport vp = new Viewport();
  vp.setLayout(new FitLayout());

  final Portal portal = new Portal(2);
  portal.setBorders(true);
  portal.setStyleAttribute("backgroundColor", "white");
  portal.setColumnWidth(0, .50);
  portal.setColumnWidth(1, .50);

  for (int chartNum = 0; chartNum < 2; chartNum++) {
   addChart(200, chartNum, portal, false);
  }

  // add a chartframe
  addChart(200, 2, portal, true);

  addRawChart(200, 3, portal); 

  // insert the whole portal container
  vp.add(portal);

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

 private void addRawChart(final int delay,
     final int position,
     final Portal portal){
   Timer timer = new Timer() {
   public void run() {
    final HighChart hc = new HighChart(null, "spline");
    List<Map<String, Object>> series = 
       new Vector<Map<String,Object>>();

    Map<String, Object> series1 = new HashMap<String, Object>();
    series1.put("type", "area");
    series1.put("data", new int[] {4,5,2,10});

    Map<String, Object> series2 = new HashMap<String, Object>();
    series2.put("type", "line");
    series2.put("data", new int[] {14,53,0,7});

    series.add(series1);
    series.add(series2);

    try {
     hc.setOption(new OptionPath("/series"), series);
    } catch (Exception e) {
     e.printStackTrace();
    }

    try {
     hc.setOption(new OptionPath("/credits/text"),
         "Sample of HighChart-GXT");
     hc.setOption(new OptionPath("/credits/href"),
         "http://sourceforge.net/projects/highcharts-gxt/");
    } catch (Exception e) {
    }

    Portlet portlet = new Portlet();
    portlet.setHeight(400);
    portlet.setHeading("Chart with raw creation of series");
    portlet.setLayout(new FitLayout());
    portlet.add(hc);
    portal.add(portlet, position % 2);
   }
  };

  // Execute the timer to expire 2 seconds in the future
  timer.schedule(delay);
 }

 private void addChart(final int delay, final int position,
         final Portal portal, final boolean insideFrame) {
  Timer timer = new Timer() {
   public void run() {
    Portlet portlet = new Portlet();
    portlet.setHeight(400);
    portlet.setHeading("Chart in a Portlet");
    portlet.setLayout(new FitLayout());
    HighChart hc = initHighChart(position);
    try {
     hc.setOption(new OptionPath("/chart/type"),
          types[position % types.length]);
    } catch (Exception e) {}
    if (insideFrame) {
     portlet.setHeading("ChartFrame in a Portlet");
     hc.setAutoResize(true);
     hc.followWindowResize(false);
     ChartFrame cf = new ChartFrame(hc);
     portlet.add(cf);
    } else {
     portlet.add(hc);
    }
    portal.add(portlet, position % 2);
   }
  };
  // Execute the timer to expire 2 seconds in the future
  timer.schedule(delay);
 }

 private HighChart initHighChart(int chartNum) {
  final HighChart hc = new HighChart(null, "spline");
  try {
   hc.setOption(new OptionPath("/title/text"), "My chart #" + chartNum);
   hc.setOption(new OptionPath("/credits/enabled"), false);
   hc.setOption(new OptionPath("/xAxis/allowDecimals"), false);
   hc.setOption(new OptionPath("/xAxis/title/text"), "And the X axis");
   hc.setOption(new OptionPath("/yAxis/title/text"), "And the Y axis");
   hc.setOption(new OptionPath("/yAxis/min"), 0);
   hc.setOption(new OptionPath("/subtitle/text"), "the subtitle");

   hc.setOption(new OptionPath("/plotOptions/spline/marker/enabled"), true);
   hc.setOption(new OptionPath("/plotOptions/spline/marker/radius"), 4);
   hc.setOption(new OptionPath("/plotOptions/spline/marker/lineColor"), "#666666");
   hc.setOption(new OptionPath("/plotOptions/spline/marker/lineWidth"), 1);
  } catch (Exception e) {
   ClientConsole.err("Building options", e);
  }

  for (int i = 0 ; i < 5 ; i++) {
   SeriesType series = new SeriesType("line #" + (i+1));
   series.setType(types[i % types.length]);
   for (int j = 0; j < 5; j++) {
    series.addEntry(new SeriesType.SeriesDataEntry(
         com.google.gwt.user.client.Random.nextInt(500)));
   }
   hc.addSeries(series);
  }

  // no offset in the resize
  hc.setHeightOffset(0);
  // reduces the refresh delay from 1000 to 100 it seems to work
  hc.setResizeDelay(100);

  hc.followWindowResize(false);
  return hc;
 }
}

Modify your .html file

In the body section put the following line. Here the whole Ext-GWT Viewport will be inserted.

<div style="margin-top: 5px; margin-left: 5px;" id="MyUniqueDIV"></div>

What you obtain

As you can see from the image, the components are rendered as portlets inside a GXT portal layout.

Notice that: being the instruction portlet.setHeight(400) is needed to the ChartFrame (the My chart #2 in the Figure) component to automatically resize the enclosed chart.