|
||||||||||
PREV NEXT | FRAMES NO FRAMES |
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.
<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.
|
||||||||||
PREV NEXT | FRAMES NO FRAMES |