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

ChartFrame (only in Gxt mode)

Motivations

While the HighChart itself consists of a normal widget (i.e. Component of GXT) with no other features than rendering and managing Highcharts-JS inside GXT widgets (so handling its serialization in javascript, its resizing and so on), a further higher level component has been added to give more power to your charts.

ChartFrame overview

ChartFrame Sample

As you can see in Figure, this component comes with a pre-built menubar.
In particular:

  • ChangeType: allows to dynamically change the type of the whole chart (the menu will show a sub menu with entries lines, area, spline, etc.)
  • Refresh: to force the refresh of the chart in case of its automatic resize, rendering or javascript generation fails.

Customizing the ChartFrame

HighChart hc = ...
ChartFrame cframe = new ChartFrame(hc);
// Customize the toolbar
try {
  // Clears the default toolbar
  cframe.clearToolbar();

  // The menu CHANGE TYPE
  // Supported types
  // Change Type is the category in which to put the plugin
  // PlgSetChartType is a prebuilt plugin that you can find in
  // org.gxt.adapters.highcharts.widgets.ext.plugins.impl package (from version 1.1.2).
  cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("line")));
  cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("area")));
  cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("spline")));
  cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("areaspline")));
  cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("column")));

  // The menu VIEW
  cframe.addPlugin("View", new PlgRefreshChart());
  cframe.addPlugin("View", new PlgShowHideMarker(true));

  // The menu OPTIONS
  cframe.addPlugin("Options", new PlgInvertAxis());
  cframe.addPlugin("Options", new PlgSharedTooltip());
  cframe.addPlugin("Options", new PlgRotateDataLabels(false));
  cframe.addPlugin("Options", new PlgStacking());

  // The menu INTERVALS
  cframe.addPlugin("Intervals", new PlgIncreaseInterval(5));
  cframe.addPlugin("Intervals", new PlgDecreaseInterval(5));

  // The menu ZOOM
  cframe.addPlugin("Zoom", new PlgSetZoomType(ZoomType.ZOOM_X));
  cframe.addPlugin("Zoom", new PlgSetZoomType(ZoomType.ZOOM_Y));
  cframe.addPlugin("Zoom", new PlgSetZoomType(ZoomType.ZOOM_XY));
  cframe.addPlugin("Zoom", new PlgSetZoomType(ZoomType.ZOOM_NONE));
} catch (Exception e) {
  // handle the exception
}

Plugin based customization

Now I'll show you how to create an about dialog that is attached to the ChartFrame

Create your plugin
public class PlgAbout extends ChartFramePlugin {
	private static final String LABEL = "About";

	public PlgAbout() {
		super(LABEL);
	}

	@Override
	protected void doTask(final ComponentEvent be) {
		Dialog dlg = new Dialog();
		dlg.setHeading("About - My Project");
		dlg.addText("This is my first project, so don't expect too much from me :P ");
		dlg.setClosable(true);
		dlg.setModal(true);
		dlg.setHideOnButtonClick(true);
		dlg.show();
	}
}
Attach to the ChartFrame
   // ... continues from before
   cframe.addPlugin("About", new PlgAbout());

And that's all!

 

More complex samples?

Add donut pie support to chartFrame

Step1) Create a customization of SetChartType plugin

public class PlgSetChartType extends ChartFramePlugin {
  private ChartType type = null;

  public PlgSetChartType(final ChartType type) {
    super(type.toString());
    this.type = type;
  }

  @Override
  protected final void doTask(final ComponentEvent be) {
    boolean isPie = false;
    if (type != null && type.toString().equals("pie")) {
      isPie = true;
    }

    List<SeriesType> seriesList = getChart().getSeriesList();
    int cirles = seriesList.size();
    int pos = 1;
    for (SeriesType series : seriesList) {
      try {
        if (isPie) {
          series.setRawOption("innerSize", ((90 / cirles) * pos++) + "%");
        } else {
          series.removeRawOption("innerSize");
        }
      } catch (Exception e) {
        ClientConsole.err("Rendering pie", e);
      }
    }

    if (isPie) {
      try {
        getChart().setOption(new OptionPath("/tooltip/formatter"),
            new RawStringType("function() { " +
                " return '<b>'+ this.point.name + '</b>: ' + " +
                "this.y + ' [' + Math.round(this.percentage) + '%' + ']'; " +
            "}"));

        getChart().setOption(new OptionPath("/plotOptions/pie/allowPointSelect"),
                                        true);
        getChart().setOption(new OptionPath("/plotOptions/pie/cursor"), "pointer");
        getChart().setOption(new OptionPath("/plotOptions/pie/dataLabels/enabled"),
                                        false);

        getChart().setOption(new OptionPath("/legend/enabled"), true);
        getChart().setOption(new OptionPath("/legend/labelFormatter"),
            new RawStringType("function() { return this.name }"));
      } catch (Exception e) {
        ClientConsole.err("Rendering pie", e);
      }
    }

    getChart().setType(type.toString());
  }
}

Step2)  use this plugin in the chartFrame for setting the type (so overriding the default one).

// ChartFrame cframe = ...;
cframe.clearToolbar();
// Supported types
cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("line")));
cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("area")));
cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("spline")));
cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("areaspline")));
cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("column")));
cframe.addPlugin("Change Type", new PlgSetChartType(new ChartType("pie"))); // the magical donut