cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Try the Materials Informatics Toolkit, which is designed to easily handle SMILES data. This and other helpful add-ins are available in the JMP® Marketplace
Choose Language Hide Translation Bar
SDF1
Super User

JSL: How to script a graph update with Combo box and Next/Prev buttons

Hi All,

 

  I'm working on a larger set of JSL code and am interested in adding some functionality to it so that the user can cycle through different views -- something like what one can do when cycling through the different components in the PCA platform, see screen shot below.

DiedrichSchmidt_0-1636648358078.png

  I know that I need a couple Combo Boxes with the relevant columns from the data table, but I'm not sure how to get the graph to auto-update like in the PCA platform or how to correctly call the Next button box. I would also like to add in a Previous button box so the user can step back in the view more easily.

 

  If anyone has some suggestions or ideas on how to implement this, I'd appreciate the help. I haven't been successful searching for this functionality or finding much about it in the Scripting Index or Scripting Guide that I have.

 

Thanks!,

DS

 

UPDATE: I am getting closer and have a code that cycles through the list in the combo box, so that's pretty straightforward (see below). What I'm still having trouble with is getting the graph to update automatically. The intent is when the user clicks Next or Prev, the y variable changes automatically in the graph. BTW, I am using the Boston Housing.jmp file to test it out.

Names Default To Here( 1 );

dt = Data Table( "Boston Housing" );

xlist = dt << Get Column Names( String );

nw = New Window( "interactive Graph builder", V List Box( vlb1 = V List Box(), vlb2 = V List Box() ) );

xcol = 1;
ycol = 2;

lbcontent = V List Box(
	Lineup Box( N Col( 5 ),
		Text Box( "Select Params", <<Set Font Size( 11 ) ),
		xcb = Combo Box( xlist ),
		ycb = Combo Box( xlist, <<Set( 2 ) ),
		pbb = Button Box( "Prev",
			<<SetIcon( "PrevSeq" ),
			<<Set Icon Location( "left" ),
			<<Set Function(
				Function( {},
					ycb << Set( ycol - 1 );
					Return( ycol = ycb << Get );
				)
			)
		),
		nbb = Button Box( "Next",
			<<Set Icon( "NextSeq" ),
			<<Set Icon Location( "right" ),
			<<Set Function(
				Function( {},
					ycb << Set( ycol + 1 );
					Return( ycol = ycb << Get );
				)
			)
		)
	)
);

vlb2 << Append( lbcontent );

gbcontent = V List Box( Graph builder( Show Control Panel( 0 ), Variables( X( Column( dt, xcol ) ), Y( Column( dt, ycol ) ) ) ) );

vlb1 << Append( gbcontent );

2 ACCEPTED SOLUTIONS

Accepted Solutions
SDF1
Super User

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Hi @ian_jmp ,

 

  That did exactly the trick, thank you! I'll post the working code below and mark it as the solution, as this code does exactly what I intended when I started working on this portion.

 

Thanks!,

DS

 

Updated code with Prepend instead of Append.

Names Default To Here( 1 );

dt = Open("$sample_data/Boston housing.jmp");

//dt = Data Table( "Boston Housing" );

xlist = dt << Get Column Names( String );

gb_default = Expr(
	Graph builder( Show Control Panel( 0 ), Variables( X( Column( dt, 1 ) ), Y( Column( dt, 2 ) ) ), Elements( Points( X, Y, Legend( 3 ) ) ) )
);

gb_change = Expr(
	Graph builder( Show Control Panel( 0 ), Variables( X( Column( dt, xcol ) ), Y( Column( dt, ycol ) ) ), Elements( Points( X, Y, Legend( 3 ) ) ) )
);

nw = New Window( "Interactive Graph",
	gb = gb_default;
	lbcontent = Lineup Box( N Col( 5 ),
		Spacer Box( Size( 1, 0 ) ),
		Text Box( "X", <<Justify Text( "Center" ) ),
		Text Box( "Y", <<Justify Text( "Center" ) ),
		Spacer Box( Size( 1, 0 ) ),
		Spacer Box( Size( 1, 0 ) ),
		Text Box( "Select Params", <<Set Font Size( 11 ) ),
		xcb = Combo Box(
			xlist,
			<<Set( 1 ),
			<<Set Function(
				Function( {},
					xcol = xcb << Get;
					ycol = ycb << Get;
					gb << delete;
					nw << Prepend( gb = gb_change );
				)
			)
		),
		ycb = Combo Box(
			xlist,
			<<Set( 2 ),
			<<Set Function(
				Function( {},
					xcol = xcb << Get;
					ycol = ycb << Get;
					gb << delete;
					nw << Prepend( gb = gb_change );
				)
			)
		),
		pbb = Button Box( "Prev",
			<<SetIcon( "PrevSeq" ),
			<<Set Icon Location( "left" ),
			<<Set Function(
				Function( {},
					ycb << Set( ycol - 1 );
					xcol = xcb << Get;
					ycol = ycb << Get;
					gb << delete;
					nw << Prepend( gb = gb_change );
				)
			)
		),
		nbb = Button Box( "Next",
			<<Set Icon( "NextSeq" ),
			<<Set Icon Location( "right" ),
			<<Set Function(
				Function( {},
					ycb << Set( ycol + 1 );
					xcol = xcb << Get;
					ycol = ycb << Get;
					gb << delete;
					nw << Prepend( gb = gb_change );
				)
			)
		)
	);
);

View solution in original post

SDF1
Super User

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Update: OK, so I needed to do a little more reading in my Scripting Guide about Append, Prepend, Sib Append and Sib Prepend. After reading up on this, it was a matter of determining which container box I needed to prepend the updated graph to. So, when it comes to having other container boxes in a window, you might need to use the Sib Prepend() command. Makes sense now that I see it.

 

The attached JSL does all that I intended, if anyone is interested.

 

Thanks!,

DS

View solution in original post

8 REPLIES 8

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Why not use the Column Switcher?

SDF1
Super User

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Hi @DonMcCormack ,

 

  Yes, that would do the trick for sure, but I want an auto update of the graph when the user clicks the Next/Prev buttons or selects a different set of variables from the combo box. Essentially, I'm trying to re-create the functionality of the PCA platform but have it be generalized for incorporation into other scripts.

 

DS

SDF1
Super User

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Hi All,

 

  So, I was able to find a previous discussion thread here where @ms helped another user do something similar. I was able to work off of that idea and modify it to get it to more or less work as I intend. below is the code allowing for that functionality, except for one minor "flaw".

 

  The code allows the user to select the X, Y items to graph, and updates the graph when the Combo Boxes are changed, or when the Prev/Next buttons are pressed. So, in this regard, the code works as intended.

 

  After making a change to plot something different, the graph builder content box swaps positions with the selection Lineup Box that contains the Combo Boxes/Button Boxes. I'd like to keep the Lineup Box that contains the options for modifying the graph at the bottom of the window and not sure how to do that.

 

  Any suggestions on how to get this to work out are much appreciated! (code at end).

 

Thanks!,

DS

 

Starting window (with option below):

DiedrichSchmidt_0-1636725071253.png

 

Updated window after making a change to either the X or Y Combo Boxes, or the Prev/Next buttons:

DiedrichSchmidt_1-1636725168185.png

 

Here's the code:

Names Default To Here( 1 );
//dt = open("$sample_data\Boston Housing.jmp");//In case the file isn't already open.
dt = Data Table( "Boston Housing" ); xlist = dt << Get Column Names( String ); gb_default = Expr( Graph builder( Show Control Panel( 0 ), Variables( X( Column( dt, 1 ) ), Y( Column( dt, 2 ) ) ), Elements( Points( X, Y, Legend( 3 ) ) ) ) ); gb_change = Expr( Graph builder( Show Control Panel( 0 ), Variables( X( Column( dt, xcol ) ), Y( Column( dt, ycol ) ) ), Elements( Points( X, Y, Legend( 3 ) ) ) ) ); nw = New Window( "Interactive Graph", gb = gb_default; lbcontent = Lineup Box( N Col( 5 ), Spacer Box( Size( 1, 0 ) ), Text Box( "X", <<Justify Text( "Center" ) ), Text Box( "Y", <<Justify Text( "Center" ) ), Spacer Box( Size( 1, 0 ) ), Spacer Box( Size( 1, 0 ) ), Text Box( "Select Params", <<Set Font Size( 11 ) ), xcb = Combo Box( xlist, <<Set( 1 ), <<Set Function( Function( {}, xcol = xcb << Get; ycol = ycb << Get; gb << delete; nw << Append( gb = gb_change ); ) ) ), ycb = Combo Box( xlist, <<Set( 2 ), <<Set Function( Function( {}, xcol = xcb << Get; ycol = ycb << Get; gb << delete; nw << Append( gb = gb_change ); ) ) ), pbb = Button Box( "Prev", <<SetIcon( "PrevSeq" ), <<Set Icon Location( "left" ), <<Set Function( Function( {}, ycb << Set( ycol - 1 ); xcol = xcb << Get; ycol = ycb << Get; gb << delete; nw << Append( gb = gb_change ); ) ) ), nbb = Button Box( "Next", <<Set Icon( "NextSeq" ), <<Set Icon Location( "right" ), <<Set Function( Function( {}, ycb << Set( ycol + 1 ); xcol = xcb << Get; ycol = ycb << Get; gb << delete; nw << Append( gb = gb_change ); ) ) ) ); );
ian_jmp
Level X

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Try 'Prepend' rather than 'Append'.

SDF1
Super User

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Hi @ian_jmp ,

 

  That did exactly the trick, thank you! I'll post the working code below and mark it as the solution, as this code does exactly what I intended when I started working on this portion.

 

Thanks!,

DS

 

Updated code with Prepend instead of Append.

Names Default To Here( 1 );

dt = Open("$sample_data/Boston housing.jmp");

//dt = Data Table( "Boston Housing" );

xlist = dt << Get Column Names( String );

gb_default = Expr(
	Graph builder( Show Control Panel( 0 ), Variables( X( Column( dt, 1 ) ), Y( Column( dt, 2 ) ) ), Elements( Points( X, Y, Legend( 3 ) ) ) )
);

gb_change = Expr(
	Graph builder( Show Control Panel( 0 ), Variables( X( Column( dt, xcol ) ), Y( Column( dt, ycol ) ) ), Elements( Points( X, Y, Legend( 3 ) ) ) )
);

nw = New Window( "Interactive Graph",
	gb = gb_default;
	lbcontent = Lineup Box( N Col( 5 ),
		Spacer Box( Size( 1, 0 ) ),
		Text Box( "X", <<Justify Text( "Center" ) ),
		Text Box( "Y", <<Justify Text( "Center" ) ),
		Spacer Box( Size( 1, 0 ) ),
		Spacer Box( Size( 1, 0 ) ),
		Text Box( "Select Params", <<Set Font Size( 11 ) ),
		xcb = Combo Box(
			xlist,
			<<Set( 1 ),
			<<Set Function(
				Function( {},
					xcol = xcb << Get;
					ycol = ycb << Get;
					gb << delete;
					nw << Prepend( gb = gb_change );
				)
			)
		),
		ycb = Combo Box(
			xlist,
			<<Set( 2 ),
			<<Set Function(
				Function( {},
					xcol = xcb << Get;
					ycol = ycb << Get;
					gb << delete;
					nw << Prepend( gb = gb_change );
				)
			)
		),
		pbb = Button Box( "Prev",
			<<SetIcon( "PrevSeq" ),
			<<Set Icon Location( "left" ),
			<<Set Function(
				Function( {},
					ycb << Set( ycol - 1 );
					xcol = xcb << Get;
					ycol = ycb << Get;
					gb << delete;
					nw << Prepend( gb = gb_change );
				)
			)
		),
		nbb = Button Box( "Next",
			<<Set Icon( "NextSeq" ),
			<<Set Icon Location( "right" ),
			<<Set Function(
				Function( {},
					ycb << Set( ycol + 1 );
					xcol = xcb << Get;
					ycol = ycb << Get;
					gb << delete;
					nw << Prepend( gb = gb_change );
				)
			)
		)
	);
);
AbbWorld27
Level II

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Hi, I am looking for some further help on this?

I am trying to only have a certain number of columns showing up on my xlist instead of all columns, which are placed in any random order

xlist= {"crim", "nox", "radial"};

 

Using the script above, it is only plotting the first 3 columns, which in this case "crim", "zn" and "indus" and not the ones I mentioned above.
Is there any workaround to this?

 

Thanks.

 

 

dk
SDF1
Super User

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Hi @ian_jmp ,

 

  I'm hoping you might be able to help with correctly getting this script to work when I have more elements in the new window. I have been able to take my concept script that worked on its own and move it over into a larger script that partitions the data and displays the results. I'm attaching my JSL code as a file, might be easier that way. It opens the Boston Housing and you can select the data table and then X factors and Y Response and set a validation portion and the max number of splits to attempt.

 

  The code works to generate the output I want (below):

DiedrichSchmidt_0-1636736011310.png

But, when you cycle through the parameters, it rearranges the layout of the window into this:

DiedrichSchmidt_1-1636736080616.png

I'd like to keep the same layout as the first screenshot, but the Prepend and Append options are not maintaining the right layout. Any help is much appreciated.

 

Thanks!,

DS

 

 

SDF1
Super User

Re: JSL: How to script a graph update with Combo box and Next/Prev buttons

Update: OK, so I needed to do a little more reading in my Scripting Guide about Append, Prepend, Sib Append and Sib Prepend. After reading up on this, it was a matter of determining which container box I needed to prepend the updated graph to. So, when it comes to having other container boxes in a window, you might need to use the Sib Prepend() command. Makes sense now that I see it.

 

The attached JSL does all that I intended, if anyone is interested.

 

Thanks!,

DS