Graphs with Light Text and Dark Backgrounds

Byron_JMP · Aug 24, 2016 08:56 AM

In Pharma and Biotech, there was a time when "foils" and 35mm slides were the standard for presentations. Most of the time these slides had dark backgrounds and light colored text and figures. IMHO this format looked great. Well, times have changed and now the most common format is exactly the opposite and this is reflected in the default settings. The old-school look can be yours again, and a little JSL makes it easy.

purple graph.png

The script here formats a Bivariate plot and a Graph Builder plot. Note that both platforms require different messages., and I have a sneaking suspicion that every platform will be a little different. A key to formatting othre platforms will be to use the tree structure to find references to where text lives, then use a little trial and error to figure out what parts to send messages to.

This works in JMP 12 with default preferences. I think older versions might work a little differently, and hopefully a future version will have a white text/dark background option.


//run the whole script together, it makes two graph windows.
Open( "$SAMPLE_DATA/Big Class.jmp" );
biv = Bivariate( Y( :weight ), X( :height ) );
rbiv = Report( biv );
rbiv << Text Color( "white" ); // this colors the title and axes
rbiv << background color( "dark purple" );
rbiv[framebox( 1 )] << background color( "purple" );
rbiv[Text Edit Box( 1 )] << font color( "white" ); //y axis label
rbiv[Text Edit Box( 2 )] << font color( "white" ); // x axis label
obj = Graph Builder(
  Size( 567, 452 ),
  Show Control Panel( 0 ),
  Variables( X( :weight ), Y( :height ), Group Y( :sex ), Color( :age ) ),
  Elements( Points( X, Y, Legend( 5 ) ), Line Of Fit( X, Y, Legend( 7 ) ) )
);
robj = Report( obj );
robj << Text Color( "white" ); // this colors the title
robj << background color( "dark purple" );
robj[FrameBox( 1 )] << background color( "  purple" );// upper pane background
robj[FrameBox( 2 )] << background color( " purple" );// lower pane background
robj[graphbuildertitlebox( 1 )] << font color( [255, 255, 235] );//title text
robj[graphbuildertitlebox( 2 )] << font color( [255, 255, 235] );//axis text
robj[graphbuildertitlebox( 3 )] << font color( [255, 255, 235] );//axis text
obj << Title Fill Color( "light purple" );//y axis group labels
obj << Title Frame Color( "dark purple" );
obj << Level Fill Color( "light purple" );
obj << Level Frame Color( "dark purple" );
robj[framebox( 1 )] << background color( "purple" );

RichMelvin · ‎04-03-2021

I have found that if I try to export Light text on Dark background as a png image the text is black.

I found this post late and after monkeying around I came up with the solution below (at the very bottom of the script, sorry) for light text dark background in JMP 15.

If anyone has an improvement or knows how to make it stick when exporting to png then please help. I am poking around in the dark here.

Kiitos!

gb = Graph Builder(
    Size( 1103, 679 ),
    Show Control Panel( 0 ),
    Level Text Color( "Medium Dark Yellow" ),
    Page Level Text Color( "Medium Dark Yellow" ),
    Variables(
        X( :SampleDate ),
        Y( :Name( "EWMA(Melvin'sIndex(N1))" ) ),
        Y( :Name( "EWMA(Melvin'sIndex(N2))" ), Position( 1 ) ),
        Y( :Name( "EWMA(Melvin'sIndex(PMMoV))" ), Position( 1 ) )
    ),
    Elements(
        Points( X, Y( 1 ), Y( 2 ), Y( 3 ), Legend( 1 ), Summary Statistic( "Mean" ) ),
        Smoother(
            X,
            Y( 1 ),
            Y( 2 ),
            Y( 3 ),
            Legend( 2 ),
            Lambda( 0.0000332659553294004 ),
            Confidence of Fit( 1 )
        )
    ),
    Where( :Facility == "Albert_Lea" ),
    SendToReport(
        Dispatch( {}, "Graph Builder", OutlineBox, {Text Color( -15856113 )} ),
        Dispatch(
            {},
            "SampleDate",
            ScaleBox,
            {Min( 3692217600 ), Max( 3700300973 ), Interval( "Week" ), Inc( 1 ),
            Minor Ticks( 6 ), Label Row(
                {Label Orientation( "Angled" ), Set Font Size( 24 )}
            )}
        ),
        Dispatch(
            {},
            "EWMA(Melvin'sIndex(N1))",
            ScaleBox,
            {Format( "Fixed Dec", 12, 2 ), Min( 0 ), Max( 1.1 ), Inc( 0.25 ),
            Minor Ticks( 0 ), Label Row(
                {Major Grid Line Color( 32 ), Show Major Grid( 1 ),
                Set Font Size( 24 )}
            )}
        ),
        Dispatch(
            {},
            "400",
            ScaleBox,
            {Legend Model(
                1,
                Base( 0, 0, 0, Item ID( "EWMA(Melvin'sIndex(N1))", 1 ) ),
                Base( 1, 0, 1, Item ID( "EWMA(Melvin'sIndex(N2))", 1 ) ),
                Base( 2, 0, 2, Item ID( "EWMA(Melvin'sIndex(PMMoV))", 1 ) ),
                Properties(
                    0,
                    {Line Color( -28927 ), Marker( "Circle" )},
                    Item ID( "EWMA(Melvin'sIndex(N1))", 1 )
                ),
                Properties(
                    1,
                    {Line Color( -14989329 ), Marker( "Plus" )},
                    Item ID( "EWMA(Melvin'sIndex(N2))", 1 )
                ),
                Properties(
                    2,
                    {Line Color( -5635840 ), Marker( "Diamond" )},
                    Item ID( "EWMA(Melvin'sIndex(PMMoV))", 1 )
                )
            ), Legend Model(
                2,
                Level Name( 0, "N1", Item ID( "Smooth(EWMA(Melvin'sIndex(N1)))", 1 ) ),
                Level Name( 1, "N2", Item ID( "Smooth(EWMA(Melvin'sIndex(N2)))", 1 ) ),
                Level Name(
                    2,
                    "PMMoV",
                    Item ID( "Smooth(EWMA(Melvin'sIndex(PMMoV)))", 1 )
                ),
                Properties(
                    0,
                    {Line Color( -28927 ), Line Width( 5 )},
                    Item ID( "Smooth(EWMA(Melvin'sIndex(N1)))", 1 )
                ),
                Properties(
                    1,
                    {Line Color( -14989329 ), Line Width( 5 )},
                    Item ID( "Smooth(EWMA(Melvin'sIndex(N2)))", 1 )
                ),
                Properties(
                    2,
                    {Line Color( -5635840 ), Line Width( 5 )},
                    Item ID( "Smooth(EWMA(Melvin'sIndex(PMMoV)))", 1 )
                )
            )}
        ),
        Dispatch(
            {},
            "graph title",
            TextEditBox,
            {Set Font Size( 36 ), Font Color( 25 ), Set Text( "" )}
        ),
        Dispatch( {}, "X title", TextEditBox, {Set Text( "" )} ),
        Dispatch( {}, "", AxisBox, {Background Color( -2368548 ), Text Color( 25 )} ),
        Dispatch(
            {},
            "Y title",
            TextEditBox,
            {Set Font Size( 36 ), Font Color( 25 ), Set Text( "Melvin's Index" )}
        ),
        Dispatch(
            {},
            "",
            AxisBox( 2 ),
            {Background Color( -2368548 ), Text Color( 25 )}
        ),
        Dispatch(
            {},
            "Graph Builder",
            FrameBox,
            {Background Color( -2368548 ),
            Add Text Annotation(
                Text( "Updated April 1" ),
                Fixed Size( 0 ),
                Text Box( {722, 7, 891, 34} ),
                Filled( 0 ),
                Text Color( "White" ),
                "Font"("Helvetica Neue", 18, "Plain")
            )}
        ),
        Dispatch(
            {},
            "400",
            LegendBox,
            {Set Title( "" ), font( "Helvetica Neue", 24, "Plain" ), Sides( "Left" ),
            Legend Position( {1, [-1, -1, -1], 2, [0, 1, 2, -3, -3, -3]} ),
            Position( {-1, -1, -1, 0, 1, 2, -3, -3, -3} )}
        )
    )
);
Report( gb )[Outline Box( 1 )] << Text Color( -15856113 );
Report( gb )[GraphBuilderContainerBox( 1 )] << background color( -2368548 );
Report( gb )[GraphBuilderContainerBox( 1 )] << Font Color( -15856113 );
Report( gb )[FrameBox( 1 )] << background color( -2368548 );
Report( gb )[FrameBox( 1 )] << Text Color( -15856113 );
Report( gb )[GraphBuilderTitleBox( 1 )] << Text Color( -15856113 );
Report( gb )[Text Edit Box( 1 )] << background color( -2368548 );
Report( gb )[Text Edit Box( 1 )] << Font Color( white );
Report( gb )[Text Edit Box( 4 )] << background color( -2368548 );
Report( gb )[Text Edit Box( 4 )] << Font Color( white );
Report( gb )[AxisBox( 1 )] << background color( -2368548 );
Report( gb )[AxisBox( 1 )] << Text Color( white );
Report( gb )[AxisBox( 2 )] << background color( -2368548 );
Report( gb )[AxisBox( 2 )] << Text Color( white );
Report( gb )[LegendBox( 1 )] << background color( -2368548 );
Report( gb )[LegendBox( 1 )] << Text Color( white );

Craige_Hales · ‎04-03-2021

I think you might be running into JMP switching black/white depending on background color white/black. Two possible answers: specify the background color to something else, or specify the text color to something else. In either case, a color like RGBColor(0,0,1/255) will be nearly indistinguishable from black, and RGBColor(254/255,1,1) will be nearly indistinguishable from white, but JMP won't change them.

I think Byron's example may have set the background color to purple.

RichMelvin · ‎04-04-2021

Thank you. This is what I suspected and will help to convince my dashboard designer