Quick Start

Add a chart to your GWT app in 5 minutes.

Here's how to get started:

Download the GWT Highcharts release jar file, and add it to your project's class path. E.g.:
lib/org.moxieapps.gwt.highcharts-1.7.0.jar
Download the Highcharts Library zip file, unzip it, and copy the contents of its "js" directory into your own projects Javascript source directory. If you're using jQuery in your project, then the only file you really need is the following (see the docs if you're using an alternate framework):
js/highcharts.js
Update your page that includes your GWT module to include the Highcharts library as well as jQuery (or whatever other required JS framework you're using):
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="js/highcharts.js"></script>
Update your GWT module XML configuration file to import the GWT Highcharts module:
<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>
Within your GWT application, create a "Chart" widget, and set some configuration options using method chaining:
Chart chart = new Chart()
   .setType(Series.Type.SPLINE)
   .setChartTitleText("Lawn Tunnels")
   .setMarginRight(10);
Create a series, configure it, set the raw data, and add the series to the chart:
Series series = chart.createSeries()
.setName("Moles per Yard")
.setPoints(new Number[] { 163, 203, 276, 408, 547, 729, 628 });
chart.addSeries(series);
Add the chart widget to any GWT layout container:
RootPanel.get().add(chart);
Run the application, and enjoy your new chart! Then, go checkout the showcase examples and use the "View Source" button to get ideas on how to use the API further.