topic Re: How does the JSL of MP software achieve this effect on web pages in Discussions

How to achieve the effect of the cursor pointing to the displayed content on a web page using JSL in JMP?

lala — Sat, 10 Jan 2026 07:40:02 GMT

Thanks Experts!

http://worldmap.ifnews.com/chinamap/china/fmap

h = [=>];
h["User-Agent"] = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36";
h["Accept"] = "application/json, text/javascript, */*; q=0.01";
h["Referer"] = "http://worldmap.ifnews.com/chinamap/china/fmap";
h["X-Requested-With"] = "XMLHttpRequest";
u = "http://worldmap.ifnews.com/chinamap/china/financialData?type=all";
rs = New HTTP Request(URL(u), Method("GET"), Headers(h));
rr = rs << Send;
If( !Is Missing( rr ),
	txt = Blob To Char( rr );
	dt = JSON To Data Table( txt );
	dt << Set Name( "map" );
	dt:price << Data Type( Numeric ) << Modeling Type( Continuous );
	dt:priceLimit << Data Type( Numeric ) << Modeling Type( Continuous );
	dt:changeAmount << Data Type( Numeric ) << Modeling Type( Continuous );
	dt:countryCName << Set Property( "Map Role", {Map Role( NameName, Map Name( "World", "Countries" ) )} );
	dt << Graph Builder(
		Size( 800, 600 ),
		Show Control Panel( 0 ),
		Variables( Shape( :countryCName ), Color( :priceLimit ) ),
		Elements( Map Shapes( Legend( 5 ) ) ),
		SendToReport(
			Dispatch(
				{},
				"400",
				ScaleBox,
				{Legend Model(
					5,
					Properties(
						0,
						{gradient(
							{Color Theme( "Red to Green" ), 
							Reverse Gradient( 1 )} 
						)},
						Item ID( "priceLimit", 1 )
					)
				)}
			)
		)
	);
);

Re: How does the JSL of MP software achieve this effect on web pages

jthi — Sat, 10 Jan 2026 06:38:31 GMT

Which effect? Which web pages?

Re: How does the JSL of MP software achieve this effect on web pages

lala — Sat, 10 Jan 2026 07:42:26 GMT

How to achieve the effect of the cursor pointing to the displayed content on a web page using JSL in JMP?
http://worldmap.ifnews.com/chinamap/china/fmap

When the cursor points to a certain country range on the map, data pops up
Thanks!

Re: How does the JSL of MP software achieve this effect on web pages

hogi — Sat, 10 Jan 2026 08:22:47 GMT

In JMP, this function is implemented via Hover Labels:

if you need a faster update - and maybe don't like the appearance of the Hoverlabel Box, then you can use mousetrap.
For further details, see @Craige_Hales response to a similar question:
https://community.jmp.com/t5/Discussions/Can-JMP-graphics-have-this-effect/m-p/810221/highlight/true#M99217

Re: How does the JSL of MP software achieve this effect on web pages

hogi — Sat, 10 Jan 2026 12:31:40 GMT

As an alternative, you can edit the "Picture" script of the HoverLabel - to trigger any action you want:

- open a web page
- display further information in the graph
- open another plot ...

Further details can be found in this post:

The benefit of this approach:
the Hoverlabel knows the country of the current mouse position, no need to look it up:

:Country[local:_firstrow]

Re: How does the JSL of MP software achieve this effect on web pages

hogi — Sat, 10 Jan 2026 12:36:25 GMT

(view in My Videos)

Names Default To Here( 1 );
dt = Open( "$SAMPLE_DATA/World Demographics.jmp" );

mapxy = Open( "$MAPS/World-XY.jmp" );
mapname = Open( "$MAPS/World-Name.jmp" );
mapname << New Column( "X", Format( "Longitude DDD", "PUNDIR", 14, 4 ) );
mapname << New Column( "Y", Format( "Latitude DDD", "PUNDIR", 14, 4 ) );

For Each( {rw}, Index( 1, N Rows( mapname ) ),
	shapeID = mapName:ShapeID[rw];
	rws = mapxy << get rows where( :ShapeID == shapeID & :PartID == 1 );
	xs = mapxy[rws, "X"];
	ys = mapxy[rws, "Y"];
	{x, y} = Polygon Centroid( xs, ys );
	mapname:x[rw] = x;
	mapname:y[rw] = y;
);

dt << Update( With( mapname ), Match Columns( :Territory = :Region ), Add Columns from Update Table( :X, :Y ) );

New Namespace(
	"hover"
);
hover:GDP = 0;
hover:x = 0;
hover:y = 0;
gb = Graph Builder(
	Variables( Color( :GDP per Capita ), Shape( :Territory ) ),
	Elements( Map Shapes() ),
	SendToReport(
		Dispatch( {}, "", ScaleBox,
			{Format( "Longitude DDD", "PUNDIR", 16 ), Min( 0 ), Max( 30 )}
		),
		Dispatch( {}, "", ScaleBox( 2 ),
			{Format( "Latitude DDD", "PUNDIR", 16, 0 ), Min( 40 ), Max( 50 )}
		),
		Dispatch( {}, "Graph Builder", FrameBox,
			{Set Graphlet(
				Picture(
					hover:GDP = :GDP per Capita[local:_firstrow];
					hover:x = :X[local:_firstrow];
					hover:y = :y[local:_firstrow];
//approach1: select the current country and trigger an update -> nice, but draggy
//local:_dataTable << Clear Select << select rows(local:_firstrow);
					gb << inval;
					gb << updatewindow;

		
				)
			)}
		)
	)
);

fb1 = Report( gb )[FrameBox( 1 )];
fb1 << addgraphicsscript(
	x = hover:x;
	y = hover:y;
	Text( center justified, {hover:x, hover:y}, "GDP:  " || Char( Round( hover:GDP ) ) );
);

Does Hover Label know the current position of the mouse?
unfortunately, local:_xaxis/_yaxis =0.

As a workaround I used this approach
https://community.jmp.com/t5/Discussions/exporting-x-amp-y-values-coordinates-from-graph-builder-once-jmp/m-p/193660/highlight/true#M41407 @johnmoore to calculate the centroid of the country - to show the GDP.

As an alternative, one can use Mousetrap (in addition to the Hover Label workaround) to get the position of the mouse.
The disadvantage: less interactive as the user has to press the mouse button.

Re: How does the JSL of MP software achieve this effect on web pages

lala — Sat, 10 Jan 2026 12:28:57 GMT

Thanks Experts!