|
For downloads, demos, and more
visit the Client-side GChart Home Page |
||||||||
| PREV CLASS NEXT CLASS | FRAMES NO FRAMES | ||||||||
| SUMMARY: NESTED | FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD | ||||||||
java.lang.Objectcom.googlecode.gchart.client.GChart.Symbol
public class GChart.Symbol
Defines a chart curve symbol. Each point on a curve is represented on the chart by an appropriate rendering of the curve's symbol.
Curve.getSymbol,
SymbolType| Method Summary | |
|---|---|
java.lang.String |
getBackgroundColor()
Returns the CSS background color of all the rectangular elements used in rendering the symbol. |
double |
getBaseline()
Returns the baseline value for this symbol, previously specified via setBaseline |
java.lang.String |
getBorderColor()
Returns the CSS border color of all the rectangular elements used in rendering the symbol. |
java.lang.String |
getBorderStyle()
Returns the border style of all of the rectangular elements from which this symbol is built. |
int |
getBorderWidth()
Returns the width of the border around each rectangular element used to render this symbol, in pixels. |
int |
getBrushHeight()
Returns the height of the rectangular "brush" that defines how close the mouse cursor must be to a rendered symbol for the symbol to be considered to have been "touched" (which causes the point's hover feedback to pop up). |
GChart.AnnotationLocation |
getBrushLocation()
Returns the location of the rectangular brush relative to the current x,y coordinates of the mouse cursor. |
int |
getBrushWidth()
Returns the width of the rectangular "brush" that defines how close the mouse cursor must be to a rendered symbol for the symbol to be considered to have been "touched" (which causes the point's hover feedback to pop up). |
boolean |
getFillHasHovertext()
Deprecated. Returns the value previously set by setFillHasHovertext. |
double |
getFillSpacing()
Returns the spacing between successive rectangular elements used to emulate any required non-rectangular features of the symbol. |
int |
getFillThickness()
Returns the "thickness" of rectangular elements used to emulate any required non-rectangular features of the symbol. |
int |
getHeight()
Returns this symbol's height, as previously set by setHeight. |
boolean |
getHoverAnnotationEnabled()
Retrieves a boolean that indicates if point-specific annotations popup whenever you hover over a point on the curve associated with this symbol. |
GChart.SymbolType |
getHoverAnnotationSymbolType()
Retrieves the symbol type that will determine how the hover annotations for this symbol gets positioned. |
java.lang.String |
getHoverFontColor()
Retrieves the font color of this symbol's hover annotations. |
int |
getHoverFontSize()
Retrieves the CSS font size used with this symbol's hover annotations, in pixels. |
java.lang.String |
getHoverFontStyle()
Retrieves the CSS font-style used with this symbol's hover annotations. |
java.lang.String |
getHoverFontWeight()
Retrieves the weight of the font that will be used with this symbol's hover annotations. |
GChart.AnnotationLocation |
getHoverLocation()
Retrieves point-relative location of this symbol's hover annotations. |
java.lang.String |
getHoverSelectionBackgroundColor()
Retrieves the background color used to indicate that the mouse is "touching" (hovering over) a point. |
java.lang.String |
getHoverSelectionBorderColor()
Retrieves the border color used to indicate that the mouse is "touching" (hovering over) a point. |
java.lang.String |
getHoverSelectionBorderStyle()
Retrieves the border style used to indicate that the mouse is "touching" (hovering over) a point. |
int |
getHoverSelectionBorderWidth()
Retrieves the width of the border around the perimeter of rectangles used to indicate that the mouse is "touching" (hovering over) a point. |
boolean |
getHoverSelectionEnabled()
Retrieves a boolean that indicates if hover selection feedback will be provided for this curve. |
double |
getHoverSelectionFillSpacing()
Returns the fill spacing that will be used when rendering this curve's hover selection feedback. |
int |
getHoverSelectionFillThickness()
Returns the fill thickness that will be used when rendering this curve's hover selection feedback. |
int |
getHoverSelectionHeight()
Returns the height of the symbol used to indicate when a given point is being "hovered over" with the mouse. |
java.lang.String |
getHoverSelectionImageURL()
Returns the URL that will be used for all of the images used in rendering this symbol's selection feedback. |
GChart.SymbolType |
getHoverSelectionSymbolType()
Returns the symbol type that GChart will use when generating selection feedback. |
int |
getHoverSelectionWidth()
Returns the width of the symbol used to indicate when a given point is being "hovered over" with the mouse. |
java.lang.String |
getHovertextTemplate()
Returns the hovertextTemplate of this symbol. |
HoverUpdateable |
getHoverWidget()
When widget-based hover annotations are being used by the curve associated with this symbol, this method returns the HoverUpdateable widget used within those annotations. |
int |
getHoverXShift()
Retrieves the number of pixels (along the x-axis) that this point's hover-annotation will be moved from its default, setHoverLocation-defined, point-relative location. |
int |
getHoverYShift()
Retrieves the number of pixels (along the y-axis) that this point's hover annotation will be moved from its default, setHoverLocation-defined, point-relative location. |
java.lang.String |
getImageURL()
Returns the URL that will be used for all of the images used in rendering this symbol. |
double |
getModelHeight()
Returns this symbol's height as previously set by setModelHeight. |
double |
getModelWidth()
Returns this symbol's width as previously set by setModelWidth. |
GChart.Curve |
getParent()
Returns the Curve that contains this Symbol. |
double |
getPieSliceOrientation()
Returns the value, previously specified via setPieSliceOrientation, that defines the angular orientation of any pie slices associated with this symbol. |
double |
getPieSliceSize()
Returns the value, previously specified via setPieSliceSize, that defines the size of the angle subtended by any pie slice associated with this symbol. |
GChart.SymbolType |
getSymbolType()
Returns this symbol's type. |
int |
getWidth()
Returns this symbol's width as previously set by setWidth. |
void |
setBackgroundColor(java.lang.String backgroundColor)
Specifies the background or fill color of this symbol. |
void |
setBaseline(double baseline)
Specifies the baseline value for this symbol. |
void |
setBorderColor(java.lang.String borderColor)
Specifies the border color, as a CSS or RGBA color specification string. |
void |
setBorderStyle(java.lang.String borderStyle)
Sets the border style of the rectangular elements used to render this symbol. |
void |
setBorderWidth(int borderWidth)
Sets the width of the border around the graphical element(s) used to render this curve, in pixels. |
void |
setBrushHeight(int height)
Sets the height of the rectangular point-selection "brush". |
void |
setBrushLocation(GChart.AnnotationLocation location)
Sets the location of the brush relative to the mouse x,y coordinates. |
void |
setBrushSize(int width,
int height)
Convenience method equivalent to: |
void |
setBrushWidth(int width)
Sets the width of the rectangular "brush" that defines how close the mouse position must be to a rendered symbol for that symbol to have been "touched". |
void |
setDistanceMetric(double xScaleFactor,
double yScaleFactor)
Allows you to change the x,y scale factors that define the distance between the mouse cursor and each rendered point; these distances determine which point is "closest" to the mouse during hit testing. |
void |
setFillHasHovertext(boolean fillHasHovertext)
Deprecated. As of GChart 2.4, hover feedback has been completely redesigned. Though these changes are mostly positive, one downside is that, to simplify its hit-testing algorithms, GChart only provides hover feedback for the explicitly specified data points on a line chart; it can no longer provide feedback for the "filled in" points connecting successive data points. If you need hover feedback on such interpolated points you will have to explicitly add individual data points to the curve representing the interpolated values. Another difference is that you can no longer turn off hover feedback for a pie slice via this method. If you need to turn hover feedback off for a pie slice (or for any other symbol, for that matter) you can use the (new with 2.4) setHoverAnnotationEnabled and setHoverSelectionEnabled methods. |
void |
setFillSpacing(double fillSpacing)
Specifies the spacing between successive rectangular elements used to render any required non-rectangular features of the symbol. |
void |
setFillThickness(int fillThickness)
Sets the "thickness" of the rectangular elements used to render any required non-rectangular features of this symbol. |
void |
setHeight(int height)
Sets the height of this symbol (including any specified border) in pixels. |
void |
setHoverAnnotationEnabled(boolean hoverAnnotationEnabled)
Sets a boolean that determines if point-specific annotations will popup whenever you hover over a point on the curve associated with this symbol. |
void |
setHoverAnnotationSymbolType(GChart.SymbolType hoverAnnotationSymbolType)
Sets the symbol type that GChart will use when positioning hover annotations. |
void |
setHoverFontColor(java.lang.String cssColor)
Specifies the color of the hover annotations' font. |
void |
setHoverFontSize(int fontSize)
Specifies the CSS font size used in this symbol's hover annotations, in pixels. |
void |
setHoverFontStyle(java.lang.String cssStyle)
Specifies the CSS font-style used by this symbol's hover annotations. |
void |
setHoverFontWeight(java.lang.String cssWeight)
Specifies the weight of the font that will be used to render the text of this point's hover annotations. |
void |
setHoverLocation(GChart.AnnotationLocation hoverLocation)
Specifies the location of this point's hover annotations. |
void |
setHoverSelectionBackgroundColor(java.lang.String hoverSelectionBackgroundColor)
Specifies the background color used to indicate that the mouse is "touching" (hovering over) a point. |
void |
setHoverSelectionBorderColor(java.lang.String hoverSelectionBorderColor)
Specifies the border color used to indicate that the mouse is "touching" (hovering over) a point. |
void |
setHoverSelectionBorderStyle(java.lang.String hoverSelectionBorderStyle)
Specifies the border style used to indicate that the mouse is "touching" (hovering over) a point. |
void |
setHoverSelectionBorderWidth(int borderWidth)
Sets the width of the border around the perimeter of rectangles used to indicate that the mouse is "touching" (hovering over) a point. |
void |
setHoverSelectionEnabled(boolean hoverSelectionEnabled)
Specifies if hover selection feedback will be provided for this curve. |
void |
setHoverSelectionFillSpacing(double selectionFillSpacing)
Specifies the fill spacing that will be used when rendering this curve's hover selection feedback. |
void |
setHoverSelectionFillThickness(int selectionFillThickness)
Specifies the fill thickness that will be used when rendering this curve's hover selection feedback. |
void |
setHoverSelectionHeight(int selectionHeight)
Sets the height of the symbol used to indicate when a given point is being "hovered over" with the mouse. |
void |
setHoverSelectionImageURL(java.lang.String imageURL)
Specifies the URL that will define the image used to render selection feedback for points on the curve associated with this symbol. |
void |
setHoverSelectionSymbolType(GChart.SymbolType hoverSelectionSymbolType)
Sets the symbol type that GChart will use when generating selection feedback. |
void |
setHoverSelectionWidth(int selectionWidth)
Sets the width of the symbol used to indicate when a given point is being "hovered over" with the mouse. |
void |
setHovertextTemplate(java.lang.String hovertextTemplate)
Defines the "hover-text" that appears whenever the user points their mouse at a point on the curve. |
void |
setHoverWidget(HoverUpdateable annotationWidget)
Specifies a HoverUpdateable widget that will be used to display all hover annotations associated with this symbol. |
void |
setHoverWidget(HoverUpdateable hoverWidget,
int widthUpperBound,
int heightUpperBound)
Specifies a HoverUpdateable widget that will be used to display the hover annotations associated with this symbol. |
void |
setHoverXShift(int xShift)
Specifies the number of pixels (along the x-axis) to move this symbol's hover annotations from their default, AnnotationLocation-defined, point-relative locations. |
void |
setHoverYShift(int yShift)
Specifies the number of pixels (along the y-axis) to move this symbol's hover annotations from their default, AnnotationLocation-defined, point-relative locations. |
void |
setImageURL(java.lang.String imageURL)
Specifies the URL that will define the image used to represent the points on this curve. |
void |
setModelHeight(double modelHeight)
Sets the height of this symbol (including any specified border) in model units (arbitrary, user-defined, units). |
void |
setModelWidth(double modelWidth)
Sets the width of this symbol (including any specified border) in model units. |
void |
setPieSliceOrientation(double pieSliceOrientation)
Specifies a value that defines the angular orientation of the first edge of the pie slice associated with this symbol. |
void |
setPieSliceSize(double pieSliceSize)
Specifies a value that defines the angular size of any pie slice associated with this symbol. |
void |
setSymbolType(GChart.SymbolType symbolType)
Sets the type of this symbol. |
void |
setWidth(int width)
Sets the width of this symbol (including any specified border) in pixels. |
| Methods inherited from class java.lang.Object |
|---|
equals, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait |
| Method Detail |
|---|
public java.lang.String getBackgroundColor()
setBackgroundColorpublic double getBaseline()
setBaselinepublic java.lang.String getBorderColor()
setBorderColorpublic java.lang.String getBorderStyle()
setBorderStylepublic int getBorderWidth()
setBorderWidthpublic int getBrushHeight()
setBrushHeightpublic GChart.AnnotationLocation getBrushLocation()
setBrushLocationpublic int getBrushWidth()
setBrushWidthpublic boolean getFillHasHovertext()
setFillHasHovertextpublic double getFillSpacing()
setFillSpacing,
setFillThicknesspublic int getFillThickness()
setFillThickness,
setFillSpacingpublic boolean getHoverAnnotationEnabled()
setHoverAnnotationEnabledpublic java.lang.String getHoverFontWeight()
setHoverFontWeightpublic java.lang.String getHoverFontColor()
setHoverFontColorpublic java.lang.String getHoverFontStyle()
setHoverFontStylepublic int getHoverFontSize()
setHoverFontSizepublic GChart.AnnotationLocation getHoverLocation()
setHoverLocation,
DEFAULT_HOVER_LOCATIONpublic GChart.SymbolType getHoverAnnotationSymbolType()
setHoverAnnotationSymbolTypepublic java.lang.String getHoverSelectionBackgroundColor()
setHoverSelectionBackgroundColorpublic java.lang.String getHoverSelectionBorderColor()
setHoverSelectionBorderColorpublic java.lang.String getHoverSelectionBorderStyle()
setHoverSelectionBorderStylepublic int getHoverSelectionBorderWidth()
setHoverSelectionBorderWidthpublic boolean getHoverSelectionEnabled()
setHoverSelectionEnabledpublic double getHoverSelectionFillSpacing()
setHoverSelectionFillSpacingpublic int getHoverSelectionFillThickness()
setHoverSelectionFillThicknesspublic int getHoverSelectionHeight()
setHoverSelectionHeightpublic java.lang.String getHoverSelectionImageURL()
setHoverSelectionImageURL(java.lang.String)public GChart.SymbolType getHoverSelectionSymbolType()
setHoverSelectionSymbolTypepublic int getHoverSelectionWidth()
setHoverSelectionWidthpublic java.lang.String getHovertextTemplate()
setHovertextTemplatepublic HoverUpdateable getHoverWidget()
setHoverWidgetpublic int getHoverXShift()
getHoverXShiftpublic int getHoverYShift()
setHoverYShiftpublic java.lang.String getImageURL()
setImageURL,
setBlankImageURLpublic GChart.Curve getParent()
public double getPieSliceOrientation()
setPieSliceOrientation,
setPieSliceSizepublic double getPieSliceSize()
setPieSliceOrientation,
setPieSliceSizepublic int getHeight()
setHeightpublic double getModelHeight()
setModelHeight,
setWidth,
setHeight,
setWidthpublic double getModelWidth()
setModelWidth,
setModelHeight,
setWidth,
setHeightpublic GChart.SymbolType getSymbolType()
setSymbolTypepublic int getWidth()
Warning: This method won't return the correct pixel width associated with a setModelWidth setting, as you might have expected. It only returns the pixel width you last explicitly specified via setWidth.
setWidth,
setModelWidthpublic void setBackgroundColor(java.lang.String backgroundColor)
For example, this would define the color of the interior, non-border, part of bars in a bar-chart, the color of the interior of each shading bar in a banded-fill pie slice, or the canvas "fill" color of solid fill, canvas-rendered, pie slices.
You can use one of the 16 standard HTML/CSS color literals, illustrated below, to quickly specify common colors:
For more variety, use a standard CSS RGB (red, green, and blue) color format such as "#FF0000" (same as "red"), "#00FF00" (same as "green"), "#0000FF" (same as "blue"), "#FFFFFF" (same as "white") or "#000000" (same as "black").
If you are using an external canvas library that supports them, feel free to use RGBA color specifications (e.g, rgba(255,255,255,0.5)) for semi-transparent white). GChart will automatically collapse these specifications down to CSS standard RGB (e.g. rgb(255,255,255)) as needed for any non-canvas-rendered parts of the curve.
To maintain GWTCanvas consistency, GChart requires that you use integers in the range 0..255 in the first three comma delimited RGBA slots, and a double in the range 0..1 in the fourth. An runtime exception will be raised if you use any other format.
Why GChart sometimes deliberately drops your alpha-transparency specs (and how to workaround this limitation):
The external GWTCanvas vector graphics library lets you use the RGBA format, which adds a fourth, alpha parameter in addition to the standard red, green and blue. This alpha lets you define the degree of transparency: from 0 (transparent) to 1 (opaque).
Problem is, if you use this rgba(r,g,b,a) syntax to specify, say, the color of an HTML element's border, IE won't display anything but an error. So, whenever GChart uses an HTML element to render a symbol's background or border (instead of your external vector graphics library) it collapses the RGBA into the more widely accepted RGB format, by dropping the fourth, alpha, parameter and changing the leading rgba identifier to rgb.
GChart will render any "continuously filled" (you can use setFillSpacing(0) to request continuous filling) aspects of your symbols using whatever external vector graphics library you specified via setCanvasFactory. So, you can rely on the full RGBA syntax working for these aspects of your curve, provided that, like GWTCanvas, your external graphics library supports the rgba(r,g,b,a) syntax. Specifically, solid fill pie slices and their borders, solid fill area charts and their borders, and solid point-to-point connecting lines on a line chart all support RGBA-specified alpha-transparency.
On the other hand, due to a limitation of GChart's implementation, any rectangular aspects of your symbols, namely bar chart symbols and their borders, rectangular point markers and their borders, and banded-filled pie slices, are rendered via HTML and will collapse your rgba(r,g,b,a) specs into rgb(r,g,b).
But what if you need a semi-transparent bar chart, banded-fill pie slice, or rectangular point marker? Fortunately, there is a simple workaround: just pass the URL of an appropriately-sized semi-transparent image to the setImageURL method of the curve in question.
The default symbol background color is DEFAULT_SYMBOL_BACKGROUND_COLOR
backgroundColor - a standard CSS or canvas-library
supported RGBA background color specification string.getBackgroundColor,
setBorderColor,
DEFAULT_SYMBOL_BACKGROUND_COLOR,
setImageURLpublic void setBaseline(double baseline)
In greater detail:
baseline - the y (or x) that defines the horizontal
(or vertical) line to which any baseline-based vertical
(or horizontal) bars are extended.getBaseline,
HBAR_BASELINE_CENTER,
HBAR_BASELINE_SOUTH,
HBAR_BASELINE_NORTH,
VBAR_BASELINE_CENTER,
VBAR_BASELINE_EAST,
VBAR_BASELINE_WESTpublic void setBorderColor(java.lang.String borderColor)
Both standard CSS and the all-but-IE-supported
RGBA extension (with the fourth paramter defining
alpha-transparency, for example,
rgba(255,255,255,0.5) to define a semi-transparent
white) are allowed. However, GChart may collapse
these extended specifications into ordinary RGB in
some cases. See setBackgroundColor for full details.
For example, for a square symbol, this would set the color of the line that indicates the outter perimeter of that square. For a banded-fill pie slice, this would set the color of the outter perimeter of every shading bar used to fill in the pie slice. For a solid fill pie slice, with an external canvas library such as GWTCanvas plugged into GChart via setCanvasFactory, this method would instead set the color of the canvas-stroked line around the slice's perimeter.
This color also defines the color of the point-to-point connecting lines of a continuously connected line chart.
Using TRANSPARENT_BORDER_COLOR:
Although you can use the special CSS keyword "transparent", due to a well-known bug, IE6 will usually render that as black. Plus, different browsers define the background color that shines through the transparent border differently, and external canvas libraries such as GWTCanvas may not support the use of "transparent". So, GChart provides a browser-independent keyword TRANSPARENT_BORDER_COLOR that you can use instead, that emulates transparency by removing the border entirely, and then shifting and resizing the transparently bordered element so as to create the illusion that its transparent border is still there. That's not exactly the same thing as having a transparent border (the emulated borders can't "see" mouse moves over them, for example) but it's close enough for most charting purposes. Another simple way to workaround these transparent border inconsistencies is to use an explicitly specified border color equal to the chart's background color.
borderColor - the color of the borders of this curve's rendered
symbols, and of any point-to-point connecting lines. Use any
valid CSS color specification string (including the
RGBA extension), or the special
GChart keyword TRANSPARENT_BORDER_COLOR.
For more information on standard CSS color specifications
including
how GChart handles the RGBA extended format, see
setBackgroundColor.TRANSPARENT_BORDER_COLOR,
getBorderColor,
setBackgroundColor,
setCanvasFactorypublic void setBorderStyle(java.lang.String borderStyle)
borderStyle - a CSS border style such as
"solid", "dotted", "dashed", etc.getBorderStyle,
setBackgroundColor,
setBorderColorpublic void setBorderWidth(int borderWidth)
If positive, the border is drawn inside each graphical element. If negative, the border is drawn outside of those elements. Note that, negative, external, borders do not increase the mouse hit-testing region associated with the rendered symbols.
Tip: To get the hit test region around a symbol to, in effect, include the external border associated with a negative border width, simply increase the width and the height of the symbol's point selection brush by 2*Math.abs(getBorderWidth()).
If a rectangular symbol's width or height ever become less than twice the specified positive border width, the border will be shrunk down until it just fills up the entire rectangular area of the symbol.
On backgrounds vs borders in bar charts when printing
Because borders are usually printed more reliably than background colors cross-browser, using such oversized borders is a simple way to assure that on-screen and printed bar chart renderings are consistent. Consistency isn't everything: the removal of background colors can save ink. So, you might prefer to just design bar charts that look good with either solid-filled (on-screen) or outlined (printed w. 'print background colors' unchecked in FF, for example) bars.
borderWidth - the width of the symbol's border, in pixelsgetBorderWidthpublic void setBrushHeight(int height)
Whenever a point is touched, GChart displays that point's hover feedback. By default, the selected point is highlighted, the associated symbol's hovertext template is expanded relative to the touched point, and the resulting plain text or HTML is placed onto the chart at an appropriate, point-relative, location. You can override this default by passing a HoverUpdateable Widget to the the setHoverWidget method. In that case, instead of expanding your hovertext template, the HoverUpdateable Widget is instead positioned properly relative to the touched point, and its hoverUpdate method is invoked with a reference to the touched point passed in as its first argument.
The rules for determining if the brush is "touching" a symbol are as follows:
Note: The brush is centered on the mouse by default. You can place the brush above, below, etc. the mouse position via the setBrushLocation method.
For example, with a 10 x 10 pixel brush, a bar chart's bar gets "touched" whenever the mouse is either within, or within a 5 pixel border around, the bar. Note that on line charts, only the individual (rectangular) point markers, not connecting lines between them, are touchable.
Note: Unlike other symbol types, pie slice hit testing works the same regardless of the brush location (c.f. setBrushLocation) setting.
Even though each curve's symbol can have an independently sized brush--which gives you a lot of control over which curve's points are easiest to select--using the same sized brush for all curves produces results more consistent with the simple concept of a single physical brush "touching" symbols on the chart.
Finally, if the brush touches more than one symbol, the symbol whose center is closest to the mouse cursor (by default, that's also the brush center point) is considered to have been touched. (In these calculations, the ordinary, Euclidean, definition of distance is used by default; the setDistanceMetric method allows for other definitions). For pie slices, the symbol's center point is defined (to simplify the calculations) as the point at the center of the pie that contains the slice. In case of any remaining ties, the point later on the point list (the one "on top") is selected.
Fine-print: Known brush size limitations when
selecting off-chart points:
But, GChart can't see mouse moves around such off-chart
elements--the mouse has to be right on top of these
elements before it's motion is detected by GChart (the
browser sends mouse moves in these regions to whatever
non-GChart related browser elements occupy this space).
Consequently, even though GChart still uses your
brush settings for hit testing with such points,
because it can't see mouse activity until the center of
the mouse "touches" such elements, it will often act
as if you were using a 1x1 pixel brush for such
externally rendered points.
Unfortunately, this is a basic limitation of how GChart
handles mouse events. But there are a number of
possible workarounds, such as adding a transparent
curve with similar, but larger,
dimensions/point locations to the off-chart curve's
points (so as to capture external mouse moves around
external points) or adding a transparent
annotation around external points (again, to create a
mouse capture region around these points). Perhaps the
easiest approach is to simply make the outter
decoration regions around the chart big enough (via
methods such as setAxisLabelThickness and
similarly named set*Thickness methods) so that
there is enough empty space around the plot area's
perimeter so that points never fall outside the chart's
bounding rectangle.
Because most applications place their points on the
chart, this is only an issue for advanced applications
that deliberately draw outside of the chart's rectangle so
as to overlay the chart onto the host page.
GChart allows you to render points that fall outside
of the GChart's containing rectangle.
height - the height of the rectangular point
selection brush used by points on the curve associated
with this symbol (in pixels).getBrushHeight,
setBrushWidth,
setBrushSize,
setBrushLocation,
setDistanceMetric,
setHoverWidget,
HoverUpdateable,
DEFAULT_BRUSH_WIDTH,
DEFAULT_BRUSH_HEIGHT,
getTouchedPoint,
touch,
setHoverTouchingEnabledpublic void setBrushLocation(GChart.AnnotationLocation location)
With the default setting of AnnotationLocation.CENTER, the brush is centered on the mouse cursor, which is usually acceptable.
The most useful non-default settings, which facilitate "single sided" point selection, are tabulated below:
| Location | Impact on point selection |
|---|---|
| AnnotationLocation.NORTH | The mouse only selects points when it is on or below them. |
| AnnotationLocation.SOUTH | The mouse only selects points when it is on or above them. |
| AnnotationLocation.WEST | The mouse only selects points when it is on them or to their right. |
| AnnotationLocation.EAST | The mouse only selects points when it is on them or to their left. |
Tip: When a chart has two curves, setting one curve to use NORTH as its brush location, and the other to use SOUTH, and using a brush height equal to the height of the decorated chart (returned via getYChartSizeDecorated()) allows points on one curve to be selected when the user is near the top of the chart, and points on the other curve to be selected when the user is near the bottom of the chart.
location - the location of the rectangular brush,
relative to the x,y position of the mouse.setBrushHeight,
setBrushWidth,
getYChartSizeDecorated
public void setBrushSize(int width,
int height)
setBrushWidth(width); setBrushHeight(height);
For a full discussion of how GChart uses it's "brush" to determine when hover feedback for a point gets displayed, see setBrushHeight.
width - the width of this chart's brush, in pixelsheight - the height of this chart's brush, in pixelssetBrushHeight,
setBrushWidth,
DEFAULT_BRUSH_WIDTH,
DEFAULT_BRUSH_HEIGHT
public void setBrushWidth(int width)
For a full discussion of how GChart uses it's "brush" to determine when hover feedback for a point gets displayed, see setBrushHeight.
width - width of the point selection brush, in pixels.setBrushHeight,
setBrushSize,
DEFAULT_BRUSH_WIDTH,
DEFAULT_BRUSH_HEIGHT
public void setDistanceMetric(double xScaleFactor,
double yScaleFactor)
Whenever the mouse selection brush "touches" more than one point, the point whose center is closest to the mouse cursor is the one selected. For a point centered at (all coordinates are in pixels) (xCenter, yCenter) the distance to the mouse cursor at (xMouse, yMouse) is given by:
dx = xScaleFactor*(xCenter-xMouse); dy = yScaleFactor*(yCenter-yMouse); distance = Math.sqrt(dx*dx + dy*dy);
In the above, (xCenter, yCenter) is the position at the center of the rectangle associated with the rendered point. For pie slices, it is the position at the center of the pie containing the slice.
Tip: Here are the most commonly used x-y scale factors, and how they are typically used:
Warning: Mixed metrics, like mixed metaphors, can be confusing:
Since each curve gets it's own distance metric, it's possible to preferentially select one curve over another by giving it relatively smaller scale factors. This can produce very counter-intuitive selection behaviors (selecting a point that is farther away from the mouse than another point, for example). Generally, it's best to use the same distance metric for all curves except in special cases.Though using a relatively larger xScaleFactor, yScaleFactor makes a curve's points relatively harder to select during hit testing, to completely ignore a curve's points during hit testing, you need to use setHoverSelectionEnabled(false) and setHoverAnnotationEnabled(false).For example, suppose you had a vertical bar chart on curve 0 that was restricted to the top half of your chart, and a horizontal bar chart on curve 1 restricted to the bottom half. Then you might use xScaleFactor=1, yScaleFactor=0 for curve 0 and xScaleFactor=0, yScaleFactor=1 for curve 1. This "mixed metric" would not create confusion, because the user would view the region-specific selection behaviour as sensibly coordinated with the orientation of the bars in each region.
xScaleFactor - multiplies the x-pixel distance
between the mouse cursor and the point center (see
distance formula above).yScaleFactor - multiplies the y-pixel distance
between the mouse cursor and the point center (see
distance formula above).setBrushSize,
setBrushLocation,
setHoverSelectionEnabled,
setHoverAnnotationEnabledpublic void setFillHasHovertext(boolean fillHasHovertext)
Another difference is that you can no longer turn off hover feedback for a pie slice via this method. If you need to turn hover feedback off for a pie slice (or for any other symbol, for that matter) you can use the (new with 2.4) setHoverAnnotationEnabled and setHoverSelectionEnabled methods.
getFillHasHovertext,
setHovertextTemplate,
setBrushSize,
setHoverAnnotationEnabled,
setHoverSelectionEnabledpublic void setFillSpacing(double fillSpacing)
The exact meaning of this spacing setting depends on the symbol type, and on if an external canvas factory has been specified via setCanvasFactory:
| SymbolType | How spacing is interpreted | Default value |
|---|---|---|
| BOX_* | The distance between the centers of the "dots" used to
draw the dotted connecting lines between successive
x,y data points on a curve.
If fillSpacing == 0 ("continuously filled"), fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, a continuous line connecting the centers of successive boxes is produced in exactly the same way as is done for the LINE symbol type. Without a canvas factory (the default) fillSpacing == 0 works the same as fillSpacing == 1. |
4 |
| LINE | The horizontal distance between the centers of the
successive vertical bars, or the vertical distance
between the centers of the successive horizontal bars,
that GChart uses to render the point-to-point
connecting lines of the LINE symbol type.
The defaults (no canvas factory specified, 0px spacing) provide the smoothest lines possible without using canvas, but also the longest chart update times. Spacing values larger than 1px will provide proportionally faster rendering of connecting lines (provided the connecting line segments are significantly longer than the specified spacing), but they give the lines a grainy, "stair-step" look. If fillSpacing == 0 ("continuously filled"), fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, a continuous, crisp (sans stair-steps) line connecting the centers of successive boxes is produced--quickly. Without any canvas factory specified, fillSpacing == 0 will work the same as fillSpacing == 1. Tip: To assure an unbroken connecting line, use a non-zero fill thickness setting greater than or equal to your fill spacing setting. |
0 |
| PIE_SLICE_* | The vertical or horizontal distance between
the centers of the vertical, and/or horizontal,
shading bars used to fill in the pie slice. With
the default setting, this produces a banded-fill
look.
If fillSpacing == 0 ("continuously filled"), fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, the pie slices are crisp, quickly-rendered, and solid-filled. Without a canvas factory specified (the default) fillSpacing == 0 works the same as fillSpacing == 1. |
4 |
| VBAR_* | The horizontal distance between corresponding edges
of the vertical bars used to fill in the trapezoidal
areas linearly interpolated between successive
vertical bars on a curve.
If fillSpacing == 0 ("continuously filled"), fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, a filled polygon whose perimeter connects the x,y points of the curve with a corresponding interval on the x-axis, x2-axis, or horizontal baseline is rendered, so as to create a vertical, solid-filled, area chart. Without a canvas factory, fillSpacing == 0 works the same as fillSpacing == 1. |
0 |
| HBAR_* | The vertical distance between corresponding edges
of the horizontal bars used to fill in the
trapezoidal areas linearly interpolated between
successive horizontal bars on a curve.
If fillSpacing == 0 ("continuously filled"), fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, a filled polygon whose perimeter connects the x,y points of the curve with a corresponding interval on the y-axis, y2-axis, or vertical baseline will be rendered, so as to create a horizontal, solid-filled, area chart. Without a canvas factory, fillSpacing == 0 works the same as fillSpacing == 1. |
0 |
| XGRIDLINE | The horizontal distance between corresponding edges
of the vertical bars used to fill in the
trapezoidal areas linearly interpolated between
successive x-gridlines on a curve.
If fillSpacing == 0 ("continuously filled"), fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, a filled polygon is drawn whose perimeter connects the x,y points of the curve with a corresponding interval on either the x-axis or x2-axis, depending on whichever axis is closest to the first point on the curve. Without a canvas factory, fillSpacing == 0 works the same as fillSpacing == 1. Tip: To make a canvas-filled x-gridline curve fill in a rectangular region, set the y of each point to Double.MAX_VALUE. |
4 |
| YGRIDLINE | The vertical distance between corresponding edges
of the horizontal bars used to fill in the
trapezoidal areas linearly interpolated between
successive y-gridlines on a curve.
If fillSpacing == 0 ("continuously filled"), fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, a filled polygon is drawn whose perimeter connects the x,y points of the curve with a corresponding interval on either the y-axis or y2-axis, depending on whichever axis is closest to the first point on the curve. Without a canvas factory, fillSpacing == 0 works the same as fillSpacing == 1. Tip: To make a canvas-filled y-gridline curve fill in a rectangular region, set the x of each point to Double.MAX_VALUE. |
4 |
As of version 2.5 GChart provides support for canvas-based, crisp, quickly drawn, lines, 2-D pie slices, and area charts if a fillSpacing of 0 is specified ("continuously filled") along with a fillThickness > 0. However, you must bolt-on an external canvas library (plain vanilla GWT does not currently come pre-loaded with a browser independent canvas Widget. However, the fact that the GWT incubator project contains one implies that the GWT team is considering adding one). See the setCanvasFactory method for details.
By default, GChart does not use an external canvas library, and thus depends only on the standard GWT distribution and its own 3,000-odd semi-colon terminated lines of GWT Java. If you decide to stick with this default, the following tips may help you workaround GChart's rectangle-element-based limitations when used in this mode.
First, if your goal is to produce a solid connecting line between points always use the LINE symbol type rather than the BOX_CENTER symbol type with a fill spacing of 1px. The LINE symbol type knows how to merge adjacent pixels into larger rectangular elements, and is therefore usually much more efficient, especially with curves that involve many near-vertical or near-horizontal connecting lines. For best performance, use the BOX_CENTER symbol only to produce dotted connecting lines that have widely spaced dots.
In general, since the number of elements required is often inversely proportional to fill spacing, using a very small fill spacing like 1px, while allowed, could degrade performance unacceptably, especially for very large-sized charts. On the other hand, too large a fill spacing/thickness can degrade graphical quality unacceptably (e.g. due to too few "dots" on dotted connecting lines, "stair-step" solid connecting lines, or "grainy filled" pie slices).
Tip: For pie slices as well as for dotted or solid connecting lines, scaling down the size of the chart via setXPixelSize and setYPixelSize can also speed up chart display, and thus will often provide a better-looking alternative to increasing the fill spacing.Experience suggests that many applications will be able to find a combination of chart size and spacing/thickness settings that provide an acceptable level of both graphical quality and performance--particularly if your charting needs are more utilitarian than aesthetic. When that's not good enough, it's time to use setCanvasFactory to super-charge GChart's rendering with the power of a cross-browser vector graphics facility, such as GWTCanvas.In particular, for a typical curve whose x-values always increase with point index (i.e. no "doubling back") LINE symbol type curves often have a number of elements, and thus an update time, that is approximately equal to:
"Some Constant" * (xMaxInPixels-xMinInPixels)/fillSpacingSo, for LINE curves, halving the x-axis range via setXPixelSize will provide approximately the same speedup as doubling the fill spacing setting, and, because the lines will be less "stair-steppy", will often provide a more acceptable visual result.
fillSpacing - spacing between successive rectangular
elements used to fill in non-rectangular symbols, in
pixels. If a canvas factory has been specified,
you can use a setting of 0 to produces
"continuously filled" elements.getFillSpacing,
setFillThickness,
setCanvasFactorypublic void setFillThickness(int fillThickness)
The exact meaning of this thickness setting, as well as the default used whenever the thickness is set to the special undefined integer value recognized by GChart (GChart.NAI), depends on the symbol type, and if an external canvas factory has been specified via setCanvasFactory:
| SymbolType | How thickness is interpreted | Default value |
|---|---|---|
| BOX_* | The height and width of rectangular "dots" used to
draw the dotted connecting lines between successive
x,y data points on a curve.
If the fill spacing (setFillSpacing) is 0 and a canvas factory has been specified via setCanvasFactory, fillThickness is the width of the continuous connecting lines between successive points. | 0 (implies no interpolated dots or connecting lines) |
| LINE | The width of the vertical line segments placed
end-to-end to render any "more-nearly-vertical"
connecting lines of the curve, and the height of the
horizontal line segments placed end-to-end to render
any "more-nearly-horizontal" connecting lines on this
curve. Note that if you use a fill thickness less than
the fill spacing, your line will not be continuously
connected.
If the fill spacing (setFillSpacing) is 0 and a canvas factory has been specified via setCanvasFactory, fillThickness is the width of the continuous connecting lines drawn between successive points. |
1 |
| PIE_SLICE_* | The width of vertical, and/or the height of
horizontal, shading bars used to fill in the pie slice
If the fill spacing (setFillSpacing) is 0 and a canvas factory has been specified via setCanvasFactory, pie slices are solidly and continously filled for any fillThickness > 0. |
2 |
| VBAR_* | The width of vertical bars
used to fill in the trapezoidal areas linearly
interpolated between successive vertical
bars on a curve.
If the fill spacing (setFillSpacing) is 0 and a canvas factory has been specified via setCanvasFactory, these trapezoidal areas are merged together and solidly and continously filled for any fillThickness > 0. |
0 (implies no "area filling" between bars) |
| HBAR_* | The height of horizontal bars used to fill in the
trapezoidal areas linearly interpolated between
successive horizontal bars on a curve.
If the fill spacing (setFillSpacing) is 0 and a canvas factory has been specified via setCanvasFactory, these trapezoidal areas are merged together and solidly and continously filled for any fillThickness > 0. |
0 (implies no "area filling" between bars) |
| XGRIDLINE | The width of vertical bars used to fill in the
trapezoidal areas linearly interpolated between
successive x-gridlilnes on a curve.
If the fill spacing (setFillSpacing) is 0, fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, a continuously filled area-chart, as described in setFillSpacing, will be produced. |
0 (implies no "area filling" between gridlines) |
| YGRIDLINE | The height of horizontal bars used to fill in the
trapezoidal areas linearly interpolated between
successive y-gridlilnes on a curve.
If the fill spacing (setFillSpacing) is 0, fillThickness > 0, and a canvas factory has been specified via setCanvasFactory, a continuously filled area-chart, as described in setFillSpacing, will be produced. |
0 (implies no "area filling" between gridlines) |
This fill thickness setting and the associated fill spacing setting (c.f. setFillSpacing) work together to define the look and efficiency of pie slice shading, connecting lines, etc.
fillThickness - the fill thickness, in pixelssetCanvasFactory,
getFillThickness,
setFillSpacingpublic void setHoverAnnotationEnabled(boolean hoverAnnotationEnabled)
By default, these hover-induced popups are enabled.
Note that the point selection feedback on the hovered-over point is controlled separately, via the setHoverSelectionEnabled method.
hoverAnnotationEnabled - true if hover-induced annotations popup on this
curve, false otherwise.getHoverAnnotationEnabled,
setHoverSelectionEnabled,
setHovertextTemplate,
setHoverWidget,
setHoverLocation,
setHoverAnnotationSymbolType,
setHoverXShift,
setHoverYShiftpublic void setHoverFontWeight(java.lang.String cssWeight)
cssWeight - A standard CSS font-weight
specification such as normal, bold, bolder, lighter,
100, 200, ... 900, or inheritgetHoverFontWeight,
setHoverFontColor,
setHoverFontStyle,
setHoverFontSize,
setHoverLocation,
setHoverWidget,
setHoverXShift,
setHoverYShiftpublic void setHoverFontColor(java.lang.String cssColor)
For more information on standard CSS color
specifications see the discussion in
Symbol.setBackgroundColor.
cssColor - color of the font used to display this
symbol's hover annotations.getHoverFontColor,
setHoverFontWeight,
setHoverFontStyle,
setHoverFontSize,
setHoverLocation,
setHoverWidget,
setHoverXShift,
setHoverYShiftpublic void setHoverFontStyle(java.lang.String cssStyle)
cssStyle - any valid CSS font-style, namely,
normal, italic, oblique, or inherit.getHoverFontStyle,
setHoverFontWeight,
setHoverFontColor,
setHoverFontSize,
setHoverLocation,
setHoverWidget,
setHoverXShift,
setHoverYShiftpublic void setHoverFontSize(int fontSize)
fontSize - the CSS font size used in the
hover annotations associated with this symbol, in pixels.getHoverFontSize,
setHoverFontWeight,
setHoverFontColor,
setHoverFontStyle,
setHoverLocation,
setHoverWidget,
setHoverXShift,
setHoverYShiftpublic void setHoverLocation(GChart.AnnotationLocation hoverLocation)
| SymbolType used to position hover annotation |
Default Hover AnnotationLocation |
|---|---|
| HBAR_BASELINE_* | FARTHEST_FROM_VERTICAL_BASELINE |
| HBAR_*WEST | EAST |
| HBAR_*EAST | WEST |
| PIE_SLICE_* | OUTSIDE_PIE_ARC |
| VBAR_SOUTH* | NORTH |
| VBAR_BASELINE_* | FARTHEST_FROM_HORIZONTAL_BASELINE |
| VBAR_NORTH* | SOUTH |
| All others | NORTHWEST |
You can further adjust the position of a point's hover annotations by specifying non-zero positional shifts via the setHoverXShift and setHoverYShift methods, and via the setHoverAnnotationSymbolType method.
Tip: To position hover annotations at a fixed location on the chart, (such as a status bar that displays information about the hovered over point, an inset chart that shows a detailed view, etc.) pass one of the ANCHOR_* symbol types to the setHoverAnnotationSymbolType method.
hoverLocation - the relative location of
the hover annotations, or null to use a
symbol-type-specific default.getHoverLocation,
setHoverFontWeight,
setHoverFontColor,
setHoverFontStyle,
setHoverFontSize,
setHoverAnnotationSymbolType,
setHoverWidget,
setHoverXShift,
setHoverYShift,
DEFAULT_HOVER_LOCATIONpublic void setHoverAnnotationSymbolType(GChart.SymbolType hoverAnnotationSymbolType)
If null is used (this is the default) GChart will use the symbol type associated with the curve containing the hovered over point. Since normally you will want hover annotations to be positioned as if they were annotations of the hovered over points, this default is usually appropriate.
However, sometimes you would like the hover annotations to be positioned differently. For example, you might prefer the hover annotations to always appear within a status bar at the bottom of the chart. To achieve this, you could set this property to ANCHOR_SOUTHWEST. Or suppose you always wanted a pie chart's hover annotations to appear in the center of the pie instead of along the outer perimeter. Then you could use BOX_CENTER. Or, if you wanted the hover annotations to be positioned relative to the position that the mouse was at when the symbol was first "touched", you could use ANCHOR_MOUSE.
Tip: Pre v2.4 versions of GChart supported a much simpler, "at-the-mouse", setTitle-based, hover feedback that you can emulate using code such as:
Symbol sym = getCurve().getSymbol();
sym.setHoverAnnotationSymbolType(SymbolType.ANCHOR_MOUSE);
sym.setHoverLocation(AnnotationLocation.SOUTHEAST);
sym.setHoverYShift(-20); // push 20px below mouse
// (kind of like setTitle does it).
// Convenience/transition-helper method
// formatAsHovertext wraps plain text in appropriate
// HTML so it looks kind of like setTitle-based hovertext.
sym.setHovertextTemplate(
GChart.formatAsHovertext("x=${x}, y=${y}"));
hoverAnnotationSymbolType - the symbol type that in part
determines how the hover annotations get positioned, or
null (the default) to use the symbol type of the
hovered over point.getHoverAnnotationSymbolType,
setHoverLocation,
setHovertextTemplate,
setHoverXShift,
setHoverYShift,
GChart.formatAsHovertextpublic void setHoverSelectionBackgroundColor(java.lang.String hoverSelectionBackgroundColor)
Whenever the user "touches" a point on this curve with the curve's mouse-centered "brush", GChart displays the hover feedback for that point, and indicates that the point is the one the hover feedback refers to changing its background color to this color.
The default hover selection background color is "transparent". This allows the original symbol to appear within selection rectangles that can be defined via the setHoverSelectionBorderWidth and setHoverSelectionBorderColor methods (1px thick external gray selection rectangles are used by default).
Tip: Because the background selection color will often cover the original symbol, it's usually best to choose a selection background color closely related to the original symbol's background color. For example, if the original symbol were blue, you might use a lighter shade of blue.
hoverSelectionBackgroundColor - a CSS color
specification string that specifies the background color used to
indicate "hover-selection".getHoverSelectionBackgroundColor,
setHoverSelectionBorderColor,
setHoverSelectionBorderStyle,
setHoverSelectionBorderWidth,
setBrushHeightpublic void setHoverSelectionBorderColor(java.lang.String hoverSelectionBorderColor)
Whenever the user "touches" a point on this curve with the mouse-centered "brush", GChart displays the hover feedback for that point, and indicates that the point is the one the hover feedback refers to by drawing a border around it with the given color.
The width of this border, and if the is drawn outside or just inside the rectangles associated with the symbol, can be specified via setHoverSelectionBorderWidth. The default hover selection border color is gray.
hoverSelectionBorderColor - a CSS color specification string that specifies
the color used to indicate "hover-selection", or the special
keyword TRANSPARENT_BORDER_COLOR for a cross-browser consistent
transparent border.getHoverSelectionBorderColor,
setHoverSelectionBorderStyle,
setHoverSelectionBorderWidth,
setBrushHeightpublic void setHoverSelectionBorderStyle(java.lang.String hoverSelectionBorderStyle)
Whenever the user "touches" a point on this curve with the mouse-centered "brush", GChart displays the hover feedback for that point, and indicates that the point is the one the hover feedback refers to by drawing a border around it with the given style.
The width of this border, and if the is drawn outside or just inside the rectangles associated with the symbol, can be specified via setHoverSelectionBorderWidth. The default hover selection border style is solid.
hoverSelectionBorderStyle - a CSS border style
specification string that indicates the style of border used to
indicate "hover-selection".getHoverSelectionBorderStyle,
setHoverSelectionBorderWidth,
setHoverSelectionBorderColor,
setBrushHeightpublic void setHoverSelectionBorderWidth(int borderWidth)
If positive, the border is drawn inside each rendered rectangle of the selected symbol. If negative, the border is drawn outside of those rectangles.
Tip: To create the illusion that symbols increase in size when they are "touched", use a hover selection border color that matches the symbol's color along with a negative hover selection border width.
borderWidth - the width of the border drawn around
the perimeter of the selected symbol's rectangles to
indicate that the symbol is being "touched: by the mouse. A
negative value adds that border around the outside of the
existing rectangles, in effect increasing the selected
symbol's size (in pixels).getHoverSelectionBorderWidth,
setHoverSelectionBorderColor,
setHoverSelectionBackgroundColor,
setHoverSelectionBorderStylepublic void setHoverSelectionEnabled(boolean hoverSelectionEnabled)
When enabled, whenever the user "touches" a point on this curve with the mouse-centered "brush", GChart indicates the hover-selected point by adding a selection border around the point, etc.
By default, hover selection feedback is enabled.
Note that the pop-up hover annotation itself is controlled separately, via the setHoverAnnotationEnabled method.
hoverSelectionEnabled - a if true, hover selection feedback is enabled,
if false, hovering over a point does not change its
color.getHoverSelectionEnabled,
setHoverAnnotationEnabled,
setHoverSelectionBackgroundColor,
setHoverSelectionBorderColor,
setHoverSelectionBorderStyle,
setHoverSelectionBorderWidth,
setHoverSelectionSymbolTypepublic void setHoverSelectionFillSpacing(double selectionFillSpacing)
For more on fill spacing, see setFillSpacing.
selectionFillSpacing - fill spacing, in pixels, used
when rendering this curve's hover selection feedback or
Double.NaN (the default) to adopt the curve's
fill spacing.getHoverSelectionFillSpacing,
setFillSpacingpublic void setHoverSelectionFillThickness(int selectionFillThickness)
For more on fill thickness, see setFillThickness.
selectionFillThickness - fill thickness, in pixels, used
when rendering this curve's hover selection feedback or
GChart.NAI (the default) to adopt the curve's
fill thickness.getHoverSelectionFillThickness,
setFillThicknesspublic void setHoverSelectionHeight(int selectionHeight)
With the default setting of GChart.NAI, GChart simply gives the hover selection symbol the same height as the symbol representing the point itself. Though this default is usually appropriate, you might want the selection symbol to have a larger size so as to increase the visibility of the selected point, etc.
selectionHeight - the height of the symbol used
to indicate that that a point has been selected, in
pixels, or GChart.NAI (the default) to use
the height of the symbol representing the selected
point.getHoverSelectionHeight,
setHoverSelectionWidth,
setHoverSelectionBorderColor,
setHoverSelectionBackgroundColorpublic void setHoverSelectionImageURL(java.lang.String imageURL)
Specify null to use the URL returned by getBlankImageURL (this is the default, and gives you a blank 1x1 pixel GIF). Since the image is transparent, the setHoverSelectionBackgroundColor method can be used to define the background color of the selection feedback.
Though most applications will do just fine with this default, you can use this method for special selection effects, such creating a semi-transparent "screen" (say, by using an image with alternating transparent and gray pixels) that overlays the selected points.
The image is applied in the same way as the symbol's own image URL, but to the internal, system, curve GChart uses to render the selection feedback. See setImageURL for additional information.
imageURL - the url that defines the image used to generate
selection feedback for points rendered with this symbol, or
null to to use GChart's default selection image URL (a
1x1 transparent blank GIF).getHoverSelectionImageURL,
setImageURL,
setBlankImageURLpublic void setHoverSelectionSymbolType(GChart.SymbolType hoverSelectionSymbolType)
If null is used (this is the default) GChart will use the symbol type associated with the original point. This default, which overlays the selection feedback on top of the rendered symbol, is usually appropriate.
However, sometimes you would like the selection feedback to use a different symbol type. For example, you might prefer to indicate that a point is selected by drawing a vertical gridline through the point. To achieve this, you could use the XGRIDLINE symbol type. Or, you might wish to indicate selection by dropping a vertical line from the center of the selected point to the x-axis. In this case, you could use VBAR_SOUTH as the hover selection symbol type.
Note: The special mouse related symbol types (those with names matching ANCHOR_MOUSE*) are intended for use in positioning hover popup annotations (via setHoverAnnotationSymbolType). They are not expected to be useful, and could potentially cause confusion, if used as the symbol type passed to this method.
hoverSelectionSymbolType - the symbol type that in
part determines how selection feedback for a hovered over
point is drawn, or null (the default) to use the
symbol type of the hovered over point.getHoverSelectionSymbolType,
setHoverSelectionBackgroundColor,
setHoverSelectionBorderColor,
setHoverSelectionBorderWidth,
setHoverSelectionHeight,
setHoverSelectionWidth,
setHoverAnnotationSymbolTypepublic void setHoverSelectionWidth(int selectionWidth)
With the default setting of GChart.NAI, GChart simply gives the hover selection symbol the same width as the symbol representing the point itself. Though this default is usually appropriate, you might want the selection symbol to have a larger size so as to increase the visibility of the selected point, etc.
selectionWidth - the width of the symbol used to
indicate that that a point has been selected, in
pixels, or
GChart.NAI (the default) to use the width of the
symbol representing the selected point.getHoverSelectionWidth,
setHoverSelectionHeight,
setHoverSelectionBorderColor,
setHoverSelectionBackgroundColorpublic void setHovertextTemplate(java.lang.String hovertextTemplate)
HTML is supported within hover-text. As with setAnnotationText, you must prefix HTML template strings with <html> or they will be treated as plain text.
Three built-in parameters, ${x}, ${y}, and ${pieSliceSize} are recognized within these hover text templates. Any occurrences of ${x} in the string will be replaced with the x-coordinate of the point, formatted as per the specified tick label format of the x-axis. Any occurrences of ${y} within the string will be replaced with the y-coordinate of the point, formatted either using the y-axis or y2-axis tick label format, depending on the axis on which the curve is displayed. Any occurrences of ${pieSliceSize} within the string will be replaced with 100 times the specified pieSliceSize of the point, formatted the same way as ${y}, except that a "%" is tacked onto the end.
In addition to these built-in parameters, user-defined parameters are also supported. All parameter names must begin with a letter (a,b,...,z or A,B,...,Z) and be followed by a series of letters, digits (0,1,...,9), and underscores (_). For example, ${myParam3} or ${xyz_123}. Note that parameter names are case-sensitive.
You define the rules for expanding these user-defined parameters relative to the hovered-over point, by instantiating a HoverParameterInterpreter and passing it to GChart's setHoverParameterInterpreter method. See the HoverParameterInterpreter interface's javadocs for full details.
Tip: If the ${ is not followed by a valid parameter name and then by }, the "invalid name", along with the original delimiters, passes through literally into the final hovertext (no exception is thrown). So, if you see keywords in your hovertext, it probably means you misspelled a keyword (e.g. you entered ${piesliceSize} instead of ${pieSliceSize}), forgot the closing }, began a user-defined parameter name with a digit, and so on.
The default hovertext template, used automatically if hovertext template is null, is DEFAULT_PIE_SLICE_HOVERTEXT_TEMPLATE for pie slice type symbols and DEFAULT_HOVERTEXT_TEMPLATE for all other symbol types.
Tip:If you notice unexplained whitespace to the right
or below your pages, that comes and goes as you hover
over the chart, it could be due to an overly large
default estimate for the hidden "bounding box" GChart uses
to properly center hover annotations. You can use the
setHoverWidget method, with a null
first widget parameter, to override these defaults
and correct this problem.
hovertextTemplate - defines the hoverText to display when the mouse
moves over a point on this curve, with ${x},
${y} and
${pieSliceSize} parameters replaced as described above, and
custom parameters replaced as defined by the parent
GChart's HoverParameterInterpreter.getHovertextTemplate,
getHovertext,
HoverParameterInterpreter,
setHoverParameterInterpreter,
HoverUpdateable,
setAnnotationText,
DEFAULT_HOVERTEXT_TEMPLATE,
DEFAULT_PIE_SLICE_HOVERTEXT_TEMPLATE
public void setHoverWidget(HoverUpdateable hoverWidget,
int widthUpperBound,
int heightUpperBound)
Whenever the rectangular "brush" centered on the current mouse position "touches" a point on this symbol's parent curve, GChart will first call the hoverUpdate method of this "hover-widget", and then position it appropriately relative to the touched point. Most applications will want to implement hoverUpdate so as to populate the hover widget with detailed information about the touched point. For example, to emulate GChart's default hover feedback, you could extend an HTML widget and, within the hoverUpdate method, use the setHTML method to set the widget's HTML to the expanded hover text returned by hoveredOverPoint.getHovertext().
The exact position of the hover widget relative to the touched point is defined by the companion methods, setHoverLocation, setHoverAnnotationSymbolType, setHoverXShift, and setHoverYShift.
hoverWidget - a Widget that
implements the HoverUpdateable interface that GChart will
use when generating this symbol's widget-based hover annotations, or
null to use GChart's text or HTML based hover
annotations (the other two parameters can still be used
to specify upper-bounds on the width and height of this
default hover text).widthUpperBound - an upper bound on the width of
the widget (or default hover annotation) in pixels.
Use GChart.NAI to get the GChart-determined default.heightUpperBound - an upper bound on the height of the
widget (or default hover annotation) in pixels. Use GChart.NAI
to get the GChart-determined default.getHoverWidget,
getHovertext,
HoverUpdateable,
setHoverFontWeight,
setHoverFontColor,
setHoverFontStyle,
setHoverFontSize,
setHoverLocation,
setHoverAnnotationSymbolType,
setHovertextTemplate,
setHoverXShift,
setHoverYShiftpublic void setHoverWidget(HoverUpdateable annotationWidget)
A convenience method equivalent to setHoverWidget(hoverWidget, GChart.NAI, GChart.NAI)
annotationWidget - the GWT Widget that defines this
point's hover-induced annotation, or null to use the
default hover annotation, which is based on expanding the
hover text template relative to the hovered over point.setHoverWidget(HoverUpdateable,int,int),
setHovertextTemplate,
getHovertext,
DEFAULT_WIDGET_HEIGHT_UPPERBOUND,
DEFAULT_WIDGET_WIDTH_UPPERBOUNDpublic void setHoverXShift(int xShift)
Actual positional shifts are defined via the same conventions as are used by setAnnotationXShift. See that method for further details.
getHoverXShift,
setAnnotationXShift,
setHoverFontWeight,
setHoverFontColor,
setHoverFontStyle,
setHoverFontSize,
setHoverLocation,
setHoverAnnotationSymbolType,
setHovertextTemplate,
setHoverWidget,
setHoverYShiftpublic void setHoverYShift(int yShift)
Actual positional shifts are defined via the same conventions as are used by setAnnotationYShift. See that method for further details.
getHoverYShift,
setAnnotationYShift,
setHoverFontWeight,
setHoverFontColor,
setHoverFontStyle,
setHoverFontSize,
setHoverLocation,
setHoverAnnotationSymbolType,
setHovertextTemplate,
setHoverWidget,
setHoverXShiftpublic void setImageURL(java.lang.String imageURL)
Specify null to use the URL returned by getBlankImageURL (this is the default, and gives you a blank 1x1 pixel GIF).
Most applications will do just fine with the default. However, this method lets you replace the default, rectangular, chart symbols with custom images (e.g. a five pointed star) or even a Google Chart API url to use tiny 3-D pie charts for each point symbol (it looks a bit strange, and your chart will no longer be strictly client-side any more, but it does work).
Note that if the symbol's width and height are bigger or smaller than the specified image, the image will be stretched to fit the symbol's size. Except for single pixel images and such, this does not usually look that great, so exactly matching up the symbol and image size is often best.
Tip: By using a single pixel high or wide image whose other dimension exactly matches the width or height of the symbol, the image will stretch to produce a regular pattern of horizontal or vertical lines. For example, this technique can be used to produce a vertical or horizontal gradient effect in a horizontal or vertical bar chart.
Be aware that GChart was originally designed with only blank image URL's in mind, so it may take some effort to adjust other settings (such as symbol type, width, height, background color, border color, various legend related settings, and curve order) so that the overall chart looks right with your custom images for the curve symbols. In particular, the legend icons are just scaled-down versions of the image, which often doesn't look that great.
A alternative that gives you more control (but is less efficient) is to use SymbolType.NONE with setAnnotationWidget (or setAnnotationText) and setAnnotationLocation(AnnotationLocation.CENTER) to use separate, centered, widget-based (or HTML based) annotations in lieu of each point's image-based symbol.
imageURL - the url that defines the
image within all the rectangular elements used to draw
this symbol on the chart, or
null to revert to GChart's default (a 1x1 transparent
blank GIF).getImageURL,
setBlankImageURL,
setPlotAreaImageURL,
setAnnotationWidget,
setAnnotationText,
setAnnotationLocation,
setSymbolType,
SymbolType.NONEpublic void setHeight(int height)
Symbols for drawing vertical bars and symbols defining vertical lines between points or across the entire chart, compute their heights automatically based on curve data, axes limits, specified baselines, etc. These symbols, namely XGRIDLINE and all those whose names begin with VBAR_ will ignore this height setting.
height - height of this symbol, in pixels.getHeightpublic void setModelHeight(double modelHeight)
Specification of the modelHeight undefines (that is, sets to GChart.NAI) any previous pixel-based specification made via setHeight.
Symbols for drawing vertical bars and symbols defining vertical lines between points or across the entire chart, compute their heights automatically based on curve data, axes limits, specified baselines, etc. These symbols, namely XGRIDLINE and all those whose names begin with VBAR_ will ignore this height setting.
modelHeight - height of this symbol, in model unitsgetModelHeight,
setHeight,
setModelWidth,
setWidthpublic void setModelWidth(double modelWidth)
Specification of a symbol's model width undefines (that is, sets to GChart.NAI) any previous, pixel-based, width specification made via setWidth.
Symbols for drawing horizontal bars, and symbols defining horizontal lines between points or across the entire chart, compute their widths automatically based on curve data, axes limits, specified baseline, etc. These symbols, namely YGRIDLINE and all those whose names begin with HBAR_ will ignore this width setting.
modelWidth - width of this symbol, in model units.setModelHeight,
setWidth,
setHeightpublic void setPieSliceOrientation(double pieSliceOrientation)
When specified explicitly, the value must be a fraction >= 0 and < 1, with 0 representing due south, 0.25 an additional clockwise angular rotation (starting at due south) that is 25% of the full, 360 degree rotation (and thus, if you can follow these gyrations, is due west), 0.5 representing a 50% clockwise angular rotation from due south (thus, due north), .75 a 75% clockwise rotation (and thus, due east), etc.
If the specially recognized value, Double.NaN, is specified, orientation is chosen so as to make this slice appear adjacent to the previous slice, (assuming it has the same x,y as the previous slice and is thus part of the same pie figure). If this symbol/point represents the very first pie slice, Double.NaN causes the slice to be oriented as specified via the setInitialPieSliceOrientation method (by default, that's due south). Note that though this value can be set regardless of the symbol's SymbolType, it only has an impact on how the symbol is rendered if the symbol has one of the pie slice symbol types (e.g. PIE_SLICE_VERTICAL_SHADING).
pieSliceOrientation - angle at which first edge of pie
slice appears, expressed as a fraction of a full
360 degree (2*Pi radians) clockwise rotation from an initial due
south position (the 6 o'clock position) required to reach the first
edge of the pie slice.getPieSliceOrientation,
setPieSliceSize,
setInitialPieSliceOrientationpublic void setPieSliceSize(double pieSliceSize)
This must be value between 0 and 1. 0.25 represents a quarter pie slice, 0.5 a half pie, 1 a full pie, etc.
Note: To create a complete pie, you must arrange things so that the sum of all of your pie slice sizes adds up to exactly 1.0. If they sum to more than 1, some slices will cover up others; it they sum to less, your pie will have missing slices. You can assure you get a full pie, regardless of the original slice sizes by normalizing your slice sizes. Specifically, divide each original slice size by the sum over all of the original slice sizes. For example, if the original slice sizes were 1, 2, and 2 you could divide them by their sum (1 + 2 + 2 = 5) to obtain normalized slice sizes of 0.2, 0.4, and 0.4.
Note that though this value can be set regardless of the symbol's current SymbolType, it only has an impact on how the symbol is rendered if the symbol has one of the pie slice symbol types (e.g. PIE_SLICE_VERTICAL_SHADING).
pieSliceSize - Fraction of a full pie subtended by
this particular pie slice. Must be between 0 and 1,
inclusive.getPieSliceSize,
setPieSliceOrientationpublic void setSymbolType(GChart.SymbolType symbolType)
Note: The special mouse related symbol types (those with names that begin with ANCHOR_MOUSE) are intended for use in positioning hover popup annotations (via setHoverAnnotationSymbolType). They are not expected to be useful, and could potentially cause confusion, if used as the symbol types of ordinary curves.
symbolType - the new symbol type for this symbol.SymbolType,
ANCHOR_MOUSE,
setHoverAnnotationSymbolTypepublic void setWidth(int width)
Symbols for drawing horizontal bars, and symbols defining horizontal lines between points or across the entire chart, compute their widths automatically based on curve data, axes limits, specified baseline, etc. These symbols, namely YGRIDLINE and all those whose names begin with HBAR_ will ignore this width setting.
width - width of this symbol, in pixelssetHeight
|
For downloads, demos, and more
visit the Client-side GChart Home Page |
||||||||
| PREV CLASS NEXT CLASS | FRAMES NO FRAMES | ||||||||
| SUMMARY: NESTED | FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD | ||||||||