M - the data type to be used by this Chartpublic class Chart<M> extends DrawComponent
ListStore, and
automatically updates its display whenever data in the Store changes.
## Creating a Simple Chart
Every Chart has three key parts - a ListStore that contains the data,
multiple Axis types which define the boundaries of the Chart, and one
or more Series to handle the visual rendering of the data points.
### 1. Creating a Store
The first step is to create a model that represents the type of data that
will be displayed in the Chart. Here is an example of a simple class with a
field for the name key and a single data value:
public class Data {
private String name;
private double data1;
public Data(String name, double data1) {
this.name = name;
this.data1 = data1;
}
public double getData1() {
return data1;
}
public String getName() {
return name;
}
public void setData1(double data1) {
this.data1 = data1;
}
public void setName(String name) {
this.name = name;
}
}
Next create the ValueProvider interface for the model fields:
public interface DataPropertyAccess extends PropertyAccess<Data> {
ValueProvider<Data, Double> data1();
ValueProvider<Data, Double> data2();
ValueProvider<Data, Double> data3();
ValueProvider<Data, String> name();
@Path("name")
ModelKeyProvider<Data> nameKey();
}
private static final DataPropertyAccess dataAccess = GWT.create(DataPropertyAccess.class);
Finally create the store itself. The data could be loaded dynamically, but
for sake of ease this example uses in line data:
ListStore<Data> store = new ListStore<Data>(dataAccess.nameKey());
store.add(new Data("A", 50);
store.add(new Data("B", 60);
store.add(new Data("C", 70);
store.add(new Data("D", 80);
store.add(new Data("E", 60);
### 2. Creating the Chart object
Now that a Store has been created it can be used in a Chart:
Chart<Data> chart = new Chart<Data>(600, 500);
chart.setStore(store);
chart.setAnimated(true);
chart.setShadowChart(true);
That's all it takes to create a Chart instance that is backed by a Store.
However, if the above code is run in a browser, a blank screen will be
displayed. This is because the two pieces that are responsible for the visual
display, the Chart's axes and series, have not yet been defined.
### 3. Configuring the Axes
Axes are the lines that define the boundaries of the data points that a Chart
can display. This example uses one of the most common Axes configurations - a
horizontal "x" axis, and a vertical "y" axis:
NumericAxis<Data> verticalAxis = new NumericAxis<Data>();
verticalAxis.setPosition(Position.LEFT);
verticalAxis.addField(dataAccess.data1());
verticalAxis.setMinimum(0);
verticalAxis.setMaximum(100);
chart.addAxis(verticalAxis);
CategoryAxis<Data, String> horizontalAxis = new CategoryAxis<Data, String>();
horizontalAxis.setPosition(Position.BOTTOM);
horizontalAxis.setField(dataAccess.name());
chart.addAxis(horizontalAxis);
The vertical axis is a NumericAxis and is positioned on the left edge
of the Chart. It represents the bounds of the data contained in the "data1"
field that was defined above. The minimum value for this axis is "0", and the
maximum is "100".
The horizontal axis is a CategoryAxis and is positioned on the bottom
edge of the Chart. It represents the "name" of each item in the store.
### 4. Configuring the Series
The final step in creating a simple Chart is to configure one or more Series.
Series are responsible for the visual representation of the data points
contained in the Store. This example only has one Series:
LineSeries<Data> series = new LineSeries<Data>();
series.setYAxisPosition(Position.LEFT);
series.setYField(dataAccess.data1());
series.setStroke(new RGB(32, 68, 186));
series.setStrokeWidth(3);
series.setSmooth(true);
chart.addSeries(series);
This Series is a LineSeries, and it uses the "data1" field from the
Store to plot its data points.| Modifier and Type | Class and Description |
|---|---|
static class |
Chart.Position
Enumeration used for items positioned on the chart.
|
UIObject.DebugIdImpl, UIObject.DebugIdImplEnabledDEBUG_ID_PREFIX| Constructor and Description |
|---|
Chart()
Creates a chart with default width and height.
|
Chart(int width,
int height)
Creates a chart with the given width and height.
|
| Modifier and Type | Method and Description |
|---|---|
void |
addAxis(Axis<M,?> axis)
Adds an axis to the chart.
|
void |
addSeries(Series<M> series)
Adds a
Series to the chart. |
void |
bindStore(ListStore<M> store)
Binds the store to the chart so that any store events will automatically
redraw the chart.
|
void |
calculateMaximumGutter()
Calculates the maximum gutter of the chart's series.
|
int |
getAnimationDuration()
Returns the duration of animations on the chart.
|
EasingFunction |
getAnimationEasing()
Returns the
EasingFunction used by animations on the chart. |
Map<Chart.Position,Axis<M,?>> |
getAxes()
Returns the map of axes currently added to the chart.
|
Axis<M,?> |
getAxis(Chart.Position position)
Returns the
Axis at the given Chart.Position. |
PreciseRectangle |
getBBox()
Returns the bounding box of the chart.
|
ListStore<M> |
getCurrentStore()
Returns the store currently being used by the chart.
|
Region |
getDefaultInsets()
Returns the initial insets of the chart.
|
Legend<M> |
getLegend()
Returns the legend of the chart.
|
double[] |
getMaxGutter()
Returns maximum gutter of the series in the chart.
|
List<Series<M>> |
getSeries()
Returns all of the series attached to the chart.
|
Series<M> |
getSeries(int index)
Returns the series attached to the chart at the given index.
|
ListStore<M> |
getStore()
Returns the data store bound to the chart.
|
boolean |
hasShadows()
Returns whether or not the chart has shadows.
|
boolean |
isAnimated()
Returns whether or not the chart is animated.
|
boolean |
isResizing()
Returns whether or not the chart is resizing.
|
void |
onMouseDown(Event event)
Method used when the chart is clicked.
|
void |
onMouseMove(Event event)
Method used when the mouse moves over the chart.
|
void |
onMouseOut(Event event)
Method used when the mouse leaves the chart.
|
void |
onMouseUp(Event event)
Method used when the mouse is released over the chart.
|
void |
onResize(int width,
int height) |
void |
redrawChart()
Redraws all elements of the chart.
|
void |
redrawChartForced()
Redraws all elements of the chart immediately.
|
Axis<M,?> |
removeAxis(Axis<M,?> axis)
Removes the
Axis from the chart. |
Axis<M,?> |
removeAxis(Chart.Position position)
Removes the
Axis at the given Chart.Position from the chart. |
void |
removeLegend()
Removes the
Legend currently attached legend from the chart. |
boolean |
removeSeries(int index)
Removes the given
Series from the chart. |
boolean |
removeSeries(Series<M> series)
Removes the given
Series from the chart. |
void |
setAnimated(boolean animated)
Sets whether or not the chart is animated.
|
void |
setAnimationDuration(int animationDuration)
Sets the duration of animations on the chart.
|
void |
setAnimationEasing(EasingFunction animationEasing)
Sets the
EasingFunction used by animations on the chart. |
void |
setDefaultInsets(int defaultInsets)
Sets the initial insets of the chart.
|
void |
setDefaultInsets(Region defaultInsets)
Sets the initial insets of the chart.
|
void |
setLegend(Legend<M> legend)
Sets the legend of the chart.
|
void |
setPixelSize(int width,
int height) |
void |
setShadowChart(boolean shadow)
Sets whether or not the chart has shadows.
|
void |
setStore(ListStore<M> store)
Sets the data store bound to the chart.
|
void |
setSubstore(ListStore<M> substore)
Sets a temporary substore for the chart.
|
addGradient, addSprite, addSpriteHandler, addSpriteOutHandler, addSpriteOverHandler, addSpriteSelectionHandler, addSpriteUpHandler, clearSurface, getBackground, getSurface, isViewBox, onBrowserEvent, redrawSurface, redrawSurfaceForced, remove, renderSprite, setBackground, setViewBoxaddBeforeHideHandler, addBeforeShowContextMenuHandler, addBeforeShowHandler, addBlurHandler, addDisableHandler, addEnableHandler, addFocusHandler, addHideHandler, addMoveHandler, addResizeHandler, addShowContextMenuHandler, addShowHandler, addStyleOnOver, clearSizeCache, disable, disableEvents, enable, enableEvents, fireEvent, focus, getData, getElement, getFocusSupport, getHideMode, getId, getItemId, getOffsetHeight, getOffsetWidth, getShadow, getShadowPosition, getStateId, getTabIndex, getToolTip, hide, hideToolTip, isAllowTextSelection, isAutoHeight, isAutoWidth, isDeferHeight, isEnabled, isRendered, isStateful, isVisible, isVisible, mask, mask, removeToolTip, setAllowTextSelection, setBorders, setBounds, setBounds, setContextMenu, setData, setDeferHeight, setEnabled, setHeight, setHeight, setHideMode, setId, setItemId, setPagePosition, setPosition, setShadow, setShadowPosition, setSize, setStateful, setStateId, setTabIndex, setToolTip, setToolTipConfig, setVisible, setWidth, setWidth, show, sync, syncSize, unmaskaddAttachHandler, addBitlessDomHandler, addDomHandler, addHandler, asWidget, asWidgetOrNull, getLayoutData, getParent, isAttached, removeFromParent, setLayoutData, sinkEvents, unsinkEventsaddStyleDependentName, addStyleName, ensureDebugId, ensureDebugId, getAbsoluteLeft, getAbsoluteTop, getOffsetHeight, getOffsetWidth, getStyleName, getStylePrimaryName, getTitle, isVisible, removeStyleDependentName, removeStyleName, setStyleDependentName, setStyleName, setStyleName, setStylePrimaryName, setTitle, setVisible, sinkBitlessEvent, toStringpublic Chart()
public Chart(int width,
int height)
width - the width of the chartheight - the height of the chartpublic void addAxis(Axis<M,?> axis)
Chart.Position can be
added.axis - the axis to be addedpublic void addSeries(Series<M> series)
Series to the chart.series - the series to be addedpublic void bindStore(ListStore<M> store)
store - the store to be boundpublic void calculateMaximumGutter()
public int getAnimationDuration()
public EasingFunction getAnimationEasing()
EasingFunction used by animations on the chart.public Map<Chart.Position,Axis<M,?>> getAxes()
public Axis<M,?> getAxis(Chart.Position position)
Axis at the given Chart.Position.position - the position of the axispublic PreciseRectangle getBBox()
public ListStore<M> getCurrentStore()
public Region getDefaultInsets()
public Legend<M> getLegend()
public double[] getMaxGutter()
public List<Series<M>> getSeries()
public Series<M> getSeries(int index)
index - the index of the seriespublic ListStore<M> getStore()
public boolean hasShadows()
public boolean isAnimated()
public boolean isResizing()
public void onMouseDown(Event event)
onMouseDown in class DrawComponentevent - the mouse eventpublic void onMouseMove(Event event)
onMouseMove in class DrawComponentevent - the mouse eventpublic void onMouseOut(Event event)
onMouseOut in class DrawComponentevent - the mouse eventpublic void onMouseUp(Event event)
onMouseUp in class DrawComponentevent - the mouse eventpublic void onResize(int width,
int height)
public void redrawChart()
public void redrawChartForced()
public Axis<M,?> removeAxis(Axis<M,?> axis)
Axis from the chart.axis - the axis to removepublic Axis<M,?> removeAxis(Chart.Position position)
Axis at the given Chart.Position from the chart.position - the position of the axis to removepublic void removeLegend()
Legend currently attached legend from the chart.public boolean removeSeries(int index)
Series from the chart.index - the index of the series to be removedpublic boolean removeSeries(Series<M> series)
Series from the chart.series - the series to be removedpublic void setAnimated(boolean animated)
animated - true if animatedpublic void setAnimationDuration(int animationDuration)
animationDuration - the duration of animations on the chartpublic void setAnimationEasing(EasingFunction animationEasing)
EasingFunction used by animations on the chart.animationEasing - the easing function used by animations on the chartpublic void setDefaultInsets(int defaultInsets)
defaultInsets - the initial insets of the chartpublic void setDefaultInsets(Region defaultInsets)
defaultInsets - the initial insets of the chartpublic void setLegend(Legend<M> legend)
legend - the legend of the chartpublic void setPixelSize(int width,
int height)
setPixelSize in class DrawComponentpublic void setShadowChart(boolean shadow)
shadow - true if shadowspublic void setStore(ListStore<M> store)
store - the data storeCopyright © 2014. All Rights Reserved.