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

Configuration Guide (1.1.x)

Prerequisites

Project creation

Instantiate a Google Web Application Project:

File->New->Project...->Google->Web Application Project

The dialog of Figure 1 will appear

Figure 1. GWT Project Creation Wizard

Install the required libraries

The structure of your project must be as shown in Figure 2

Figure 2. GWT Project structure

In particular you note that inside the war folder we have:

  • gxt folder containing all the javascript, css and images coming with the Ext-GWT (GXT) distribution
  • an highcharts folder with the javascript files provided by Highcharts-JS distribution
  • the file gxt-adapter.js located inside the highcharts folder (this file will come with the HighCharts-GXT adapters distribution
  • org.gxt.adapters.highcharts-xxx.jar file inside the WEB-INF/lib (this must be copied from the HighCharts-GXT adapters distribution

Project configuration

Configure the html file

The following block of code must be inserted inside the head part of your html file (e.g. in figure war/highchartstest.html)

This is for supporting GXT:

<!-- Adds support for GXT -->
<inherits name='com.extjs.gxt.ui.GXT' />
<inherits name='com.extjs.gxt.themes.Themes' />

This is for supporting HighCharts-JS:

<!-- For HighCharts support -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="highcharts/js/highcharts.js"></script>

<!-- 1a) Optional: add a theme file -->
<!-- <script type="text/javascript" src="highcharts/js/themes/gray.js"></script> -->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="highcharts/js/modules/exporting.js"></script>
<!-- ENDOF For HighCharts support -->

This is for supporting HighCharts-GXT:

<!-- Adapter for integration with gxt -->
<script type="text/javascript" src="highcharts/js/gxt-adapter.js"></script>

Configure the .gwt.xml file

The file having extension .gwt.xml located inside your source dir (see highchartstest.gwt.xml in Figure 2) must contain:

<!-- Adds support for HighCharts-GXT adapter -->
<inherits name='org.gxt.adapters.highcharts.gxthighcharts' />