Scripting display box widths: OutlineBox & GraphBox

[#1]

I scripted a simple 2x2 scorecard (see attached JSL):

When I saved the journal to PDF and printed it, the display boxes had different widths:

• OutlineBox - 3"
• GraphBox - 2.88"

Is there a way to make the display boxes all the same width (e.g., 3") ?

[#2]

You can use a LineupBox to organize DisplayBoxes in a grid where columns all have the same width. This would be instead of using V and H List Boxes as shown below.

win = New Window( "Customer Service Scorecard",
	Text Box(
		"Customer Service Scorecard",
		<<setFontSize( 16 ),
		<<SetFontStyle( "Bold" ),
		<<setWrap( 800 ),
		<<SetWidth( 600 ),
		<<JustifyText( "center" )
	),
	Text Box( "September 2017", <<setFontSize( 14 ), <<SetFontStyle( "Bold" ), <<setWrap( 800 ), <<SetWidth( 600 ), <<JustifyText( "center" ) ),
	Text Box( " " ),
	Lineup Box( N Col( 2 ),
		Outline Box( "Customer Satisfaction",
			Text Box( " " ),
			Text Box( "97%", <<setFontSize( 40 ), <<SetFontStyle( "Bold" ), <<SetWidth( 300 ), <<JustifyText( "center" ) ),
			Text Box( "of customers are satisfied", <<setFontSize( 9 ), <<SetWidth( 300 ), <<JustifyText( "center" ) )
		),
		dt1 << GraphBuilder(
			Size( 300, 200 ),
			ShowControlPanel( 0 ),
			ShowLegend( 0 ),
			Variables( X( :Channel ), Y( :Pct of Customers ) ),
			Elements( Bar( X, Y, Legend( 6 ) ) ),
			SendToReport(
				Dispatch( {}, "Graph Builder", OutlineBox, {Set Title( "Preferred Channels" )} ),
				Dispatch( {}, "Channel", ScaleBox, {Labe Row( LabelOrientation( "Angled" ) )} ),
				Dispatch( {}, "graph title", TextEditBox, {SetText( "" )} ),
				Dispatch( {}, "400", LegendBox, {SetTitle( "" )} )
			)
		),
		Outline Box( "Customer Compliments",
			Text Box( " " ),
			Text Box( "8", <<setFontSize( 40 ), <<SetFontStyle( "Bold" ), <<SetWidth( 300 ), <<JustifyText( "center" ) )
		),
		Outline Box( "Winning Interactions", Text Box( " ", <<SetWidth( 300 ) ), Data Table Box( dt2 ) )
	)
  
);

[#3]

LineupBox did work for my example of a 2x2 grid of 4 charts.

However, I get weird results (vertically) when I use LineupBox for a 3x3 grid of assorted 9 charts:

Any suggestions for the attached code (Scorecard2.jsl) ?

[#4]

I suspect that JMP is centering each object vertically on the page, hence the apparent misalignment.  I don't know if there's a way to set the object to appear at the top of it's grid.

[#5]

if you put each of those outline boxes in a Vlistbox() with a spacerbox() underneath it.  It will line up.  

[#6]

@vince_faller, I was thinking of same thing yesterday with using the SpacerBox() to force the DisplayBoxes to be top aligned.

The one improvement I might suggest is to use a LineupBox of 1 column instead of a V List Box so that the width of the items are inherited. See attached.

[#7]

Perhaps I missed something, but maybe you can make rows with 'HListBox()', then use the 'Vertical Alignment(center)' message?

[#8]

Sorry. Please disregard the post above. Now I see the columns don't line up . . .

[#9]

Didn't realize it inherited. Awesome.

[#10 · Accepted solution]

Thanks everyone for your suggestions.

I ended up changing the Bar chart widths (from 300 to 308).
The following structure worked the best for me:

VListBox(
  HListBox(
    OutlineBox( "X", TextBox("X",<<SetWidth(300)), ... ),
    GraphBuilder( Size(308,200), ... ), //Bar chart
    GraphBuilder( Size(308,200), ... )  //Bar chart
  ),
  HListBox(
    GraphBuilder( Size(308,200), ... ), //Bar chart
    OutlineBox( "X", TextBox("X",<<SetWidth(300)), ... ),
    OutlineBox( "X", TextBox("X",<<SetWidth(300)), ... )
  ),
  HListBox(
    OutlineBox( "X", TextBox("X",<<SetWidth(300)), ... ),
    GraphBuilder( Size(150,150), ... ), //Pie with legend
    OutlineBox( "X", TextBox("X",<<SetWidth(300)), ... )
  )
)