Moxie Apps GWT HighCharts

This library provides a means to include Highcharts visualizations within a GWT application.

See:
          Description

Packages
org.moxieapps.gwt.highcharts.client This is the core package of the library, which includes the Chart and StockChart classes which most applications will want to start with when using Highcharts or Highstock visualizations.
org.moxieapps.gwt.highcharts.client.events Provides event handler interfaces and access to the raw data of the events that can be triggered on a chart.
org.moxieapps.gwt.highcharts.client.labels Provides configuration objects that are used to control the display of the axis labels and data labels on the charts.
org.moxieapps.gwt.highcharts.client.plotOptions Provides configuration objects that are used to control how each of the different series types will be rendered.

 

This library provides a means to include Highcharts visualizations within a GWT application. The logical starting point is the Chart class, which provides the primary GWT widget that can be used to create a chart and add it to a GWT container.

To use, first, add the jar file to your project, and include the library in the GWT xml configuration file for your module:


    <inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>
Then, the basic usage of the API is as follows:

  // Create the chart widget and configure it using chainable methods
  Chart chart = new Chart()
    .setType(Series.Type.SPLINE)
    .setChartTitleText("Nice Chart")
    .setMarginRight(10);

  // Add data series to the chart
  Series series = chart.createSeries()
    .setPoints(new Number[] { 163, 203, 276, 408, 547, 729, 628 });
  chart.addSeries(series);

  // Add the chart to any GWT container as a normal widget
  RootPanel.get().add(chart);

Note that in order for this widget to function you must have included the Highcharts javascript library and any of its dependencies in the page that the widget will run inside of. E.g.:


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/highcharts.js"></script>

  <!-- Optionally, add a highcharts theme file -->
  <script type="text/javascript" src="js/themes/gray.js"></script>

  <!-- Optionally, include the highcharts exporting module -->
  <script type="text/javascript" src="js/modules/exporting.js"></script>
Important note: if you're using the StockChart visualization, you'll want to include the "highstock.js" file in your page instead of the "highcharts.js" file. The highstock.js file includes all of the capabilities of the core "highcharts.js" file, so including it in your page allows you to use both Chart and StockChart visualization simultaneously.

Please see the GWT Highcharts project page for more details on how to use this library, and in particular the showcase application which provides a collection of code examples that show various usage patterns.



Copyright © 2015. All Rights Reserved.