In this section: |
These properties control the general appearance of a box plot.
The following code segment shows the properties with their default values:
boxPlotProperties: { hatWidth: '50%', drawHatAsBox: false, medianLine: { width: 1, color: 'black', dash: '' }, connectorLine: { width: 1, color: 'black', dash: '' } },
How to: |
The hatWidth property controls the width of the hat that draws at the top and base of a box plot.
boxPlotProperties: {
hatWidth: width
where:
Can be a number that defines the width of the hat in pixel or a string that includes a percent symbol, enclosed in single quotation marks (') that expresses a percentage value ('0%'...'100%'). The default value is '50%'.
Note: The series and group border properties control the color and format of the hats when they are drawn as boxes. When they are not drawn as boxes, the connectorLine properties control the color and format of the hats. You can set the border width to zero to remove the hats entirely (the same as hatWidth: '0%' or hatWidth: 0).
The following request sets the hat width to 100% of the box width:
DEFINE FILE WFLITE DIFF1 = COGS_US -100000; DIFF2 = COGS_US -200000; DIFF3 = COGS_US +100000; DIFF4 = COGS_US +200000; END GRAPH FILE WFLITE SUM DIFF1 DIFF2 MDN.COGS_US DIFF3 DIFF4 BY PRODUCT_CATEGORY ON GRAPH HOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH BOXPLOT ON GRAPH SET STYLE * INCLUDE=ENDEFLT,$ *GRAPH_JS boxPlotProperties: { hatWidth: '100%', }, series: [ {series: 0, color: 'lightblue', border: {width: 1, color: 'blue'}}, ] *END ENDSTYLE END
The output is:
Setting the hatwidth to zero (0), removes the hats, but leaves the connector lines:
boxPlotProperties: { hatWidth: 0},
The output is:
How to: |
The drawHatAsBox property controls the appearance of the box plot hats (upper and lower).
boxPlotProperties: {
drawHatAsBox: boolean },
where:
Valid values are:
Note: The series and group border properties control the color and format of the hats when they are drawn as boxes. When they are not drawn as boxes, the connectorLine properties control the color and format of the hats.
The following request draws the hats in the box plot as boxes:
DEFINE FILE WFLITE DIFF1 = COGS_US -100000; DIFF2 = COGS_US -200000; DIFF3 = COGS_US +100000; DIFF4 = COGS_US +200000; END GRAPH FILE WFLITE SUM DIFF1 DIFF2 MDN.COGS_US DIFF3 DIFF4 BY PRODUCT_CATEGORY ON GRAPH HOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH BOXPLOT ON GRAPH SET STYLE * INCLUDE=ENDEFLT,$ *GRAPH_JS boxPlotProperties: { drawHatAsBox: true, }, series: [ {series: 0, color: 'lightblue', border: {width: 1, color: 'blue'}}, ] *END ENDSTYLE END
The output is:
How to: |
The medianLine properties control the appearance of the box plot median line.
boxPlotProperties: { medianLine: { width: number, color: 'string', dash: 'string' } },
where:
Is the width of the line in pixels. The default value is 1.
Is a color defined by a keyword or numeric specification string. The default value is 'black'.
Is a string that defines the dash style. The default value is '', which produces a solid line. Use a string of numbers that defines the width of a dash followed by the width of the gap between dashes (for example, dash: '1 1' draws a dotted line).
The following request generates a red median line with a width of 4 and a dash with a width of 2 and a gap of 2:
DEFINE FILE WFLITE DIFF1 = COGS_US -100000; DIFF2 = COGS_US -200000; DIFF3 = COGS_US +100000; DIFF4 = COGS_US +200000; END GRAPH FILE WFLITE SUM DIFF1 DIFF2 MDN.COGS_US DIFF3 DIFF4 BY PRODUCT_CATEGORY ON GRAPH HOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH BOXPLOT ON GRAPH SET STYLE * INCLUDE=ENDEFLT,$ *GRAPH_JS boxPlotProperties: { medianLine: { width: 4, color: 'red', dash: '2 2' }}, series: [ {series: 0, color: 'lightblue', border: {width: 1, color: 'blue'}}, ] *END ENDSTYLE ENDÂ
The output is:
How to: |
The connectorLine properties control the appearance of the box plot connector lines and hats. The connector line is only visible when drawHatAsBox is false.
boxPlotProperties: { connectorLine: { width: number, color: 'string', dash: 'string' } },
where:
Is the width of the line in pixels. The default value is 1.
Is a color defined by a keyword or numeric specification string. The default value is 'black'.
Is a string that defines the dash style. The default value is '', which produces a solid line. Use a string of numbers that defines the width of a dash followed by the width of the gap between dashes (for example, dash: '1 1' draws a dotted line).
The following request generates a red connector line with a width of 4 and a dash with a width of 2 and a gap of 2:
DEFINE FILE WFLITE DIFF1 = COGS_US -100000; DIFF2 = COGS_US -200000; DIFF3 = COGS_US +100000; DIFF4 = COGS_US +200000; END GRAPH FILE WFLITE SUM DIFF1 DIFF2 MDN.COGS_US DIFF3 DIFF4 BY PRODUCT_CATEGORY ON GRAPH HOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH BOXPLOT ON GRAPH SET STYLE * INCLUDE=ENDEFLT,$ *GRAPH_JS boxPlotProperties: { connectorLine: { width: 4, color: 'red', dash: '2 2' }}, series: [ {series: 0, color: 'lightblue', border: {width: 1, color: 'blue'}}, ] *END ENDSTYLE END
The output is:
Information Builders |