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.
|
surface
adjustSize, allowTextSelection, cacheSizes, disableContextMenu, disabled, disabledStyle, ensureVisibilityOnSizing, height, hidden, lastSize, layer, left, mask, maskMessage, monitorWindowResize, pageX, pageY, resizeHandler, shim, tabIndex, toolTip, toolTipConfig, top, width, windowResizeDelay, windowResizeTask
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)
Called after the widget is resized, this method is empty by default but can be implemented by any subclass that
needs to perform custom logic after a resize occurs.
|
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 |
setHeight(int height)
Sets the widget's height.
|
void |
setLegend(Legend<M> legend)
Sets the legend of the chart.
|
void |
setPixelSize(int width,
int height)
Sets the component's size.
|
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.
|
void |
setWidth(int width)
Sets the width of the widget.
|
addGradient, addSprite, addSpriteHandler, addSpriteOutHandler, addSpriteOverHandler, addSpriteSelectionHandler, addSpriteUpHandler, clearSurface, ensureHandler, getBackground, getEventXY, getSurface, isViewBox, onAttach, onBrowserEvent, onTap, redrawSurface, redrawSurfaceForced, remove, renderSprite, setBackground, setViewBox
addBeforeHideHandler, addBeforeShowContextMenuHandler, addBeforeShowHandler, addBlurHandler, addDisableHandler, addEnableHandler, addFocusHandler, addGestureRecognizer, addHideHandler, addMoveHandler, addResizeHandler, addShowContextMenuHandler, addShowHandler, addStyleDependentName, addStyleOnOver, adjustPosition, adjustSize, applyState, assertAfterRender, assertPreRender, blur, clearSizeCache, disable, disableContextMenu, disableEvents, enable, enableEvents, fireCancellableEvent, fireEvent, focus, getData, getElement, getFocusEl, getFocusSupport, getGestureRecognizer, getGestureRecognizerCount, getHideMode, getId, getItemId, getOffsetHeight, getOffsetWidth, getPositionEl, getShadow, getShadowPosition, getStateId, getTabIndex, getToolTip, hide, hideShadow, hideToolTip, isAllowTextSelection, isAutoHeight, isAutoWidth, isDeferHeight, isEnabled, isMonitorWindowResize, isRendered, isStateful, isVisible, isVisible, mask, mask, notifyHide, notifyShow, onAfterFirstAttach, onBlur, onDetach, onDisable, onEnable, onFocus, onHide, onHideContextMenu, onLoad, onPosition, onRightClick, onShow, onShowContextMenu, onTouch, onUnload, onWindowResize, removeStyleDependentName, removeStyleOnOver, removeToolTip, setAllowTextSelection, setBorders, setBounds, setBounds, setContextMenu, setData, setDeferHeight, setEnabled, setHeight, setHideMode, setId, setItemId, setMonitorWindowResize, setPagePosition, setPosition, setShadow, setShadowPosition, setSize, setStateful, setStateId, setStyleDependentName, setTabIndex, setToolTip, setToolTipConfig, setVisible, setWidth, show, sync, syncSize, unmask
public 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 DrawComponent
event
- the mouse eventpublic void onMouseMove(Event event)
onMouseMove
in class DrawComponent
event
- the mouse eventpublic void onMouseOut(Event event)
onMouseOut
in class DrawComponent
event
- the mouse eventpublic void onMouseUp(Event event)
onMouseUp
in class DrawComponent
event
- the mouse eventpublic void onResize(int width, int height)
Component
onResize
in class DrawComponent
width
- the widthheight
- the heightpublic 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 setHeight(int height)
Component
public void setLegend(Legend<M> legend)
legend
- the legend of the chartpublic void setPixelSize(int width, int height)
Component
setPixelSize
in class DrawComponent
width
- new width, in pixelsheight
- height, in pixelspublic void setShadowChart(boolean shadow)
shadow
- true if shadowspublic void setStore(ListStore<M> store)
store
- the data storepublic void setSubstore(ListStore<M> substore)
TimeAxis
.substore
- substore for the chartCopyright © 2018. All rights reserved.