Add Rich Text to Hover Labels Using Textlets

A textlet adds richly formatted text to the hover label. You might use a textlet to describe data in an explanatory paragraph or to emphasize important information by making it bold or applying a color.

The textlet in Textlet Example shows text that is formatted in a gray box with red text.

Textlet Example 

The following script creates the textlet shown in Textlet Example.

Names Default To Here( 1 );

dt = Open( "$SAMPLE_DATA/Diabetes.jmp" );

// create the baseline visualization

gb = dt << Graph Builder(

	Size( 534, 456 ),

	Show Control Panel( 0 ),

	Variables( X( :Age ), Y( :LDL ), Overlay( :Y Ordinal ) ),

	Elements( Points( X, Y, Legend( 8 ) ), Line Of Fit( X, Y, Legend( 10 ) ) )

);

// get a handle to the graph frame box

rpt = gb << Report;

frame = rpt[Framebox( 1 )];

/* configure the textlet -- a hover label extension that adds

	a rich text paragraph to the hover label. */

frame << Set Textlet(

    /* "Setup" is a JSL fragment that uses Hover Label Execution Contect

		variables to define content that will be embedded in the

		rich text paragraph.*/

	Setup(

		// map numerical values to text

		local:gender = If( Column( local:_dataTable, "Gender" )[local:_firstRow]

			== "1",

			"Male",

			"Female"

		);

		// map a categorical value to text color

		local:color = Match( local:_Y Ordinal,

			"Low", "Medium Dark Blue",

			"Medium", "Medium Dark Red",

			"High", "Medium Dark Green"

		);

		// capture values from other columns for the current row

		local:progression = Column( local:_dataTable, "Y" )[local:_firstRow];

		local:BMI = Column( local:_dataTable, "BMI" )[local:_firstRow];

	),

	/* markup defines the rich text template. It supports HTML-like markup such as bold, italic and other font tags. Variable references between braces ({}) are substituted with their actual value. */

	Markup(

		"{local:gender} patient, {local:_age} years old, {local:BMI} BMI,

		has <font color='{local:color}'><b>{local:_Y Ordinal}</b></font>

		disease progression (<i>{local:progression}</i>)"

	)

);

// pin a hover label to display a textlet-created rich text paragraph.

frame << Add Pin Annotation(

	Seg( Marker Seg( 2 ) ),

	Index( 64 ),

	Index Row( 344 ),

	UniqueID( 568154464 ),

	FoundPt( {96, 222} ),

	Origin( {18.68125, 156.93706122449} ),

	Tag Line( 1 )

);

Texlet Commands

See the example in Add Rich Text to Hover Labels Using Textlets for more information about writing texlet expressions.

Setup

Setup() defines variables used in the rich text that is displayed on the hover label.

...

frame << Set Textlet(

    /* "Setup" is a JSL fragment that uses Hover Label Execution Contect

		variables to define content that will be embedded in the

		rich text paragraph.*/

	Setup(

		// map numerical values to text

		local:gender = If( Column( local:_dataTable, "Gender" )[local:_firstRow]

			== "1",

			"Male",

			"Female"

		);

		// map a categorical value to text color

		local:color = Match( local:_Y Ordinal,

			"Low", "Medium Dark Blue",

			"Medium", "Medium Dark Red",

			"High", "Medium Dark Green"

		);

		// capture values from other columns for the current row

		local:progression = Column( local:_dataTable, "Y" )[local:_firstRow];

		local:BMI = Column( local:_dataTable, "BMI" )[local:_firstRow];

	)

...

In the interface, Setup is called “JSL Variables” on the Textlets Markup tab.

Markup

Markup() specifies a rich text paragraph template based on a subset of HTML tags. Can contain JSL variable references enclosed in delimiters. The default delimiters are braces ({}).

...

Markup(

		"{local:gender} patient, {local:_age} years old, {local:BMI} BMI,

		has <font color='{local:color}'><b>{local:_Y Ordinal}</b></font>

		disease progression (<i>{local:progression}</i>)"

	)

In the interface, Markup is called “HTML Markup” on the Textlets Markup tab.

See Supported HTML Tags in Textlets in Using JMP for more information about the supported font formatting tags.

Delimiters

Delimiters() specifies the delimiters that indicate variables for replacement in the Markup area. For example, you might use square bracket delimiters for JMP variables if the script contains C++ code.

Delimiters( "[]" )

In the interface, Delimiters is on the Textlets Other tab.

Width

Width() enables you to specify a preferred width in pixels for the hover label.

Width( 300 )

In the interface, Width is on the Textlets Other tab.