Defining a Tooltip for Risers

How to:

The tooltip property defines a tooltip for one or more risers. The tooltip string is shown when the mouse hovers over a riser. A tooltip can be assigned to all risers and markers, a single riser and marker (identified by a series and group), or all risers and markers in a series.

Top of page
x
Syntax: How to Define a Tooltip for Risers
series: [
{
   series: svalue, 
   group: gnumber, // Optional
   tooltip: toolvalue}
]

where:

svalue

Is a zero-based series number, 'all' to assign the tooltip to all series, or 'reset' to remove default values. If the series does not exist in the chart, the property is ignored.

gnumber

Is an optional zero-based group number. If not specified, the property is applied to all groups in the series.

toolvalue

Is a string, or a function that returns a string, to display when the mouse hovers over the riser. If htmlTooltip is enabled, you can use the special string 'auto' to automatically populate the tooltip with series labels, group labels, and values. The content will be different for different chart types. See Generating HTML Tooltips (htmlToolTip) for examples.

A callback function is invoked with three arguments: value, series ID, and group ID. For example: 

tooltip: function(value, series, group) {
 return this.title.text + ", value: " + value + ", s: " + series + ", g: " + group;
}

Note that single and double quotation marks are both supported to enclose text in the function definition.
Example: Defining Series Tooltips

The following request against the GGSALES data source assigns a tooltip to series 1, group 1:

GRAPH FILE GGSALES
SUM  DOLLARS BUDDOLLARS DOLLARS BUDDOLLARS DOLLARS
BY CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
border: {width: 2, color: 'teal'},
series: [
   {series: 0, color: 'lightgreen'},
   {series: 1, group: 0, color: 'bisque'},
   {series: 1, group: 1, color: 'red', tooltip: 'Series1/GroupB'},
   {series: 1, group: 2, color: 'lightblue'},
   {series: 2, color: 'yellow'},
   {series: 3, color: 'beige'}
]
*END
ENDSTYLE
END

The tooltip displays when the mouse hovers over the specified riser:

The following request uses a callback function to generate the tooltips. In order to remove all default tooltips so that the callback function will be used, you must use series 'reset' or set each individual series tooltip to undefined. HTML tags can also be used in the function. In this example, <br/> tags are used to generate line breaks in the tooltips:

GRAPH FILE GGSALES
SUM  DOLLARS BUDDOLLARS DOLLARS BUDDOLLARS DOLLARS
BY CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
border: {width: 2, color: 'teal'},
series: [
      {series: 'reset', tooltip: function(v, s, g) {return 'Value: ' + v +'<br/>Series: ' + s +'<br/>Group: ' + g;}},
   {series: 0, color: 'lightgreen'},
   {series: 1, color: 'tan'},
   {series: 2, color: 'lightblue'},
   {series: 3, color: 'beige'},
]
*END
ENDSTYLE
END

The output shows the custom tooltip returned by the callback function:

Note: When a tooltip is defined for one or all series, the htmlToolTip property can be used to define HTML-based (div) style tooltips for any chart tooltips.

WebFOCUS