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") ? Scorecard.jsl

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

Scripting display box widths: OutlineBox & GraphBox

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") ?

Scorecard.jsl

Accepted answers

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)), ... )
  )
)

All comments

Justin_Chilton

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

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

Scorecard2.jsl

pmroz

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.

vince_faller

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

10-3-2017 12-58-24 PM.png

Scorecard2.jsl

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)), ... )
  )
)