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

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

SDF1 — Fri, 09 Jun 2023 18:04:56 GMT

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.

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!,

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 );

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

DonMcCormack — Thu, 11 Nov 2021 21:49:17 GMT

Why not use the Column Switcher?

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

SDF1 — Thu, 11 Nov 2021 21:52:49 GMT

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.

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

SDF1 — Fri, 12 Nov 2021 14:03:43 GMT

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!,

Starting window (with option below):

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

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 );
				)
			)
		)
	);
);

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

ian_jmp — Fri, 12 Nov 2021 14:17:51 GMT

Try 'Prepend' rather than 'Append'.

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

SDF1 — Fri, 12 Nov 2021 14:27:18 GMT

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!,

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 );
				)
			)
		)
	);
);

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

SDF1 — Fri, 12 Nov 2021 16:59:21 GMT

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):

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

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!,

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

SDF1 — Fri, 12 Nov 2021 19:14:54 GMT

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!,

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

AbbWorld27 — Thu, 20 Oct 2022 15:17:47 GMT

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.