nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Can JMP graphics have this effect?

lala

This is the HTML effect.
Can JMP graphlet achieve this effect?

Thanks!

Accepted answers

Craige_Hales

dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
gb = dt << Graph Builder(
	Show Control Panel( 0 ),
	Variables( X( :height ), Y( :weight ), Overlay( :sex ) ),
	Elements( Points( X, Y, Legend( 1 ) ), Smoother( X, Y, Legend( 2 ) ) )
);
fb = Report( gb )[FrameBox( 1 )];
xx = yy = 0;
fb << addgraphicsscript(//
	Mousetrap(
		xx = x;
		yy = y;
	);
	V Line( xx );
	// at this point you can highlight all the values near xx
	For( irow = 1, irow <= N Rows( dt ), irow += 1,
		If( Abs( dt:height[irow] - xx ) < 0.5, // big class height step is 1, <.5 selects a single column of weights
			Marker( Marker State( 4 ), {dt:height[irow], dt:weight[irow]} )
		)
	);
	xwidth = X Range();
	xmidpoint = X Origin() + xwidth / 2;
	If( xx < xmidpoint,
		Text( {xx + xwidth / 100, yy}, "height " || Char( Round( xx ) ) || "\!nmore" )//
	,
		Text( right justified, {xx - xwidth / 100, yy}, "height " || Char( Round( xx ) ) || "\!nmore" )
	);
	//	
);

edit: Line 18 now says xx rather than x. Must have been something left over in my namespace. Thanks @lala @hogi

martindemel

Slightly changed the script to display weight values instead of more:

names default to here(1);
dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
gb = dt << Graph Builder(
	Show Control Panel( 0 ),
	Variables( X( :height ), Y( :weight ), Overlay( :sex ) ),
	Elements( Points( X, Y, Legend( 1 ) ), Smoother( X, Y, Legend( 2 ) ) )
);
fb = Report( gb )[FrameBox( 1 )];
xx = yy = 0;
valuesMatrix = :height << Get Values; //***new*** Get column values for height
fb << addgraphicsscript(//
	Mousetrap(
		xx = x;
		yy = y;
	);
	V Line( xx );
	// at this point you can highlight all the values near xx
	For( irow = 1, irow <= N Rows( dt ), irow += 1,
		If( Abs( dt:height[irow] - xx ) < 0.5, // big class height step is 1, <.5 selects a single column of weights
			Marker( Marker State( 4 ), {dt:height[irow], dt:weight[irow]} )
		)
	);
	
	valuesRows = char(:weight[loc(valuesMatrix,round(xx))]); //***new*** write to char weight values for all rows of height at position round(xx)
	xwidth = X Range();
	xmidpoint = X Origin() + xwidth / 2;
	If( xx < xmidpoint,
		Text( {xx + xwidth / 100, yy}, "height " || Char( Round( xx ) ) || "\!nweight " || valuesRows  )////***new*** exchanged "more" with weigth and list of weight values for that location of height
	,
		Text( right justified, {xx - xwidth / 100, yy}, "height " || Char( Round( xx ) ) || "\!nweight " || valuesRows )
	);
	//	
);

you may even could add sorting the values ascending/descending.

All comments

hogi

via JSL, yes.

hogi

via (JSL-free) Graph Builder: not yet. Maybe in a future release?

More and more competitor programs provide this type of annotations, so I guess it will also be implemented in JMP.

You can go to New type of cross hair for line and smoother type charts and support @shampton82 's wish.

Craige_Hales

dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
gb = dt << Graph Builder(
	Show Control Panel( 0 ),
	Variables( X( :height ), Y( :weight ), Overlay( :sex ) ),
	Elements( Points( X, Y, Legend( 1 ) ), Smoother( X, Y, Legend( 2 ) ) )
);
fb = Report( gb )[FrameBox( 1 )];
xx = yy = 0;
fb << addgraphicsscript(//
	Mousetrap(
		xx = x;
		yy = y;
	);
	V Line( xx );
	// at this point you can highlight all the values near xx
	For( irow = 1, irow <= N Rows( dt ), irow += 1,
		If( Abs( dt:height[irow] - xx ) < 0.5, // big class height step is 1, <.5 selects a single column of weights
			Marker( Marker State( 4 ), {dt:height[irow], dt:weight[irow]} )
		)
	);
	xwidth = X Range();
	xmidpoint = X Origin() + xwidth / 2;
	If( xx < xmidpoint,
		Text( {xx + xwidth / 100, yy}, "height " || Char( Round( xx ) ) || "\!nmore" )//
	,
		Text( right justified, {xx - xwidth / 100, yy}, "height " || Char( Round( xx ) ) || "\!nmore" )
	);
	//	
);

edit: Line 18 now says xx rather than x. Must have been something left over in my namespace. Thanks @lala @hogi

lala

hogi

@Craige_Hales , nice, very smooth! : )

Almost too smooth: I hope this example will not stop the developers from implementing a non-JSL approach.
some arguments for a native support via Graph Builder:

- make native Graph Builder more powerful

- make the non-JSL users happy as well

- show the automatic fancy annotations even without mouse clicks
-> allow the users to use the mouse as usual to select data points
(with the current "JSL" approach, one might add some toggle buttons to choose the correct mode - like it's implemented for Venn Diagram )

It took me a while to understand the error message!

Names default to here(1);
dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
gb = dt << Graph Builder(
	Show Control Panel( 0 ),
	Variables( X( :height ), Y( :weight ), Overlay( :sex ) ),
	Elements( Points( X, Y, Legend( 1 ) ), Smoother( X, Y, Legend( 2 ) ) )
);
// x=y=60;
fb = Report( gb )[FrameBox( 1 )];
fb << addgraphicsscript(//
	If(Not( Is Empty( x ) ), // if the mouse did not yet enter the graph -> do nothing.
		Mousetrap("nothing to do");
		V Line(x);
	// at this point you can highlight all the values near xx
		For( irow = 1, irow <= N Rows( dt ), irow += 1,
			If( Abs( dt:height[irow] - x ) < 0.5, // big class height step is 1, <.5 selects a single column of weights
				Marker( Marker State( 4 ), {dt:height[irow], dt:weight[irow]} )
			)
		);
		xwidth = X Range();
		xmidpoint = X Origin() + xwidth / 2;
		If( x < xmidpoint,
			Text( {x + xwidth / 100, y}, "height " || Char( Round( x ) ) || "\!nmore" )//
		,

			Text(
				right justified,
				{x - xwidth / 100, y},
				"height " || Char( Round( x ) ) || "\!nmore"
			)
		);
	)
	//	
);

lala

Looks like adding a hover drill script.

For(iFrame=1,iFrame<=N Items(framelist),iFrame+=1,frame=framelist[iFrame]; Eval(Eval Expr(frame<<Addgraphicsscript(Mousetrap({},
……//？？
)))););

Thanks Experts!

Craige_Hales

@hogi MouseTrap is a strange thing in JSL. It is a function that does nothing when executed and doesn't matter if it is executed or not or (mostly) where it is positioned in the script. When a mouse move happens on the graph, the coordinates are sent to the script in x,y which need to be copied into globals as shown.

Handle, and the various Drag variants, have a position associated with them and will only activate if close enough. The order does matter, a little, because the first one encountered in the script that is close enough (a few pixels) will get the update.

I can't fully explain why it works with your change. X really shouldn't exist... it appears it escapes the mousetrap!

I repaired the script in my first post.

martindemel

Slightly changed the script to display weight values instead of more:

names default to here(1);
dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
gb = dt << Graph Builder(
	Show Control Panel( 0 ),
	Variables( X( :height ), Y( :weight ), Overlay( :sex ) ),
	Elements( Points( X, Y, Legend( 1 ) ), Smoother( X, Y, Legend( 2 ) ) )
);
fb = Report( gb )[FrameBox( 1 )];
xx = yy = 0;
valuesMatrix = :height << Get Values; //***new*** Get column values for height
fb << addgraphicsscript(//
	Mousetrap(
		xx = x;
		yy = y;
	);
	V Line( xx );
	// at this point you can highlight all the values near xx
	For( irow = 1, irow <= N Rows( dt ), irow += 1,
		If( Abs( dt:height[irow] - xx ) < 0.5, // big class height step is 1, <.5 selects a single column of weights
			Marker( Marker State( 4 ), {dt:height[irow], dt:weight[irow]} )
		)
	);
	
	valuesRows = char(:weight[loc(valuesMatrix,round(xx))]); //***new*** write to char weight values for all rows of height at position round(xx)
	xwidth = X Range();
	xmidpoint = X Origin() + xwidth / 2;
	If( xx < xmidpoint,
		Text( {xx + xwidth / 100, yy}, "height " || Char( Round( xx ) ) || "\!nweight " || valuesRows  )////***new*** exchanged "more" with weigth and list of weight values for that location of height
	,
		Text( right justified, {xx - xwidth / 100, yy}, "height " || Char( Round( xx ) ) || "\!nweight " || valuesRows )
	);
	//	
);

you may even could add sorting the values ascending/descending.

hogi

Hm, I think many of my conclusions were wrong.

Another try:

Maybe the does not mean "after running the [drag] script" but rather "with the mouseUp".
And very important. If there is no need to update a Framebox, it doesn't get updated.

So,

when the mouse is moved, new coordinates are saved to x & y
(
? No - in the Here namespace because we used Names default to HERE (1))
... and the values can be used within the Here namespace - even outside of the Mousetrap(). This puzzled @Craige_Hales , and I put another foot into this trap: Making-a-drag-amp-drop-script
After the update of the variables, JMP gets a trigger to redraws THE Framebox with the graphics script and the current x and y values.
Other Frameboxes don't get updated:
If we move the mouse in the left frame box, the center one is not updated – and vice versa.
This creates the illusion of two separate namespaces. So it's no wonder that users can't access the namespace of a frame box — there isn't one. It's just the shared Here namespace in combination with local Framebox updates.
After releasing the mouse button, x and y .
However, no update of the frame boxes is triggered. Therefore, the user does not notice this reset of the variables in the Here' namespace.
Just when the graph gets updated the next time (e.g. resized, or some data points selected), the graphics script is executed again and reveals that the values were reset (some time ago).

SDF1

This is really cool, @Craige_Hales , @martindemel , and @hogi .

It's a very neat feature to have, and I fully support something like this natively in Graph builder. I like how it highlights the nearby data points to wherever the graph was clicked.

Is there any way to turn it "off" though? Once the graph is clicked, the vertical line stays there and remains. It would be nice to somehow reset the graph when finished. This aspect could also be something that is easier to implement natively in the platform than through JSL.

Thanks!,

Craige_Hales

@SDF1 thanks! You can use a 2nd script argument to mousetrap to detect the button release and remove the graphic script. The first script is called for mouse down and each subsequent mouse move. If the second script is given, it is called with the same parameters to indicate mouse up.

lala

I never expected that gemini3.1 pro could complete this masterpiece. 2026-08-10 19_29_45-截图编辑.png