Bar, Line, and Area Chart Properties (blaProperties)

Topics:

The following properties show the default values for basic attributes in Bar, Line, and Area (BLA) charts. Note that the value undefined means that the property will be ignored.

"blaProperties": {
"seriesLayout": "sideBySide",
"orientation": "horizontal",
"lineConnection": "linear",
"lineFillEffect": "undefined",
"barGroupGapWidth": 0.2,
"stackTotalLabel": {
	"visible": false,
	"font": "10pt Sans-Serif",
	"color": "black",
	"numberFormat": "auto"
},
"missingDataExtrapolate": true,
"splitY": true,
"comboCharts": {
	"barSeriesLayout": undefined,
	"lineSeriesLayout": undefined,
	"areaSeriesLayout": undefined
	}
}

In addition, you can use the axis groupFit properties to control riser width and the axis sort properties to sort stacked bar chart risers in ascending or descending order of the numeric axis values. For information, see Axis Properties.

Controlling the Series Layout in Bar, Line, or Area Charts

How to:

The seriesLayout property controls the arrangement of risers in a Bar, Line, or Area chart.

Note: Instead of including the seriesLayout property in the JSON block of the style section, you can use the WebFOCUS LOOKGRAPH parameter, which has a value for each layout. For more information, see Controlling Chart Type Using LOOKGRAPH.

Syntax: How to Control the Series Layout in Bar, Line, or Area Charts

"blaProperties": {
   "seriesLayout": "string"
              }

where;

"seriesLayout": "string"

Defines the arrangement of risers. Valid values are:

  • "stacked" to stack the risers on top of each other, with the length of each riser representing its data value.
  • "absolute" draws each riser at the same x-axis value (for a vertical chart) or y-axis value (for a horizontal chart). If the risers are different widths, they can be distinguished on the chart.
  • "sideBySide" (bar charts only) to place the risers next to each other (for vertical bar charts) or one on top of another (for horizontal bar charts). The default value is "sideBySide".
  • "percent" to stack the risers, with the length of each riser representing the percentage of the total for that riser, where the total of the stack adds up to 100%.

Example: Setting the seriesLayout Property

The following request sets the seriesLayout property to "stacked".

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US REVENUE_US MSRP_US
ACROSS TIME_DAYNAME COLUMNS 'FRI' AND 'SAT' AND 'SUN' AND 'MON'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
"blaProperties": {"seriesLayout": "stacked"},
"series": [{"series": "all", "showDataValues": true}],
"dataLabels": {"visible": true, "useNegativeColor": true,
	"font": "bold 10pt Sans-Serif", "color": "teal"}
*END
ENDSTYLE
END

On the output, the risers are stacked on top of each other, and the value for each one is its data value:

Changing the seriesLayout property to "percent" generates a stacked chart in which the length of each riser represents its percent, and the total for each group is 100:

Specifying the Chart Orientation for Bar, Line, or Area Charts

How to:

The orientation property selects the orientation of a Bar, Line, or Area chart.

Note: Instead of including the orientation property in the JSON block of the style section, you can use the WebFOCUS LOOKGRAPH parameter, which has a value for each orientation. For more information, see Controlling Chart Type Using LOOKGRAPH.

Syntax: How to Specify the Chart Orientation

"blaProperties": {
   "orientation": "string"
   }

where:

"orientation": "string"

Valid values are:

  • "horizontal", which draws a horizontal chart (x-axis on left, y-axis on bottom). This is the default value.
  • "vertical", which draws a vertical chart (x-axis on bottom, y-axis on left).

Example: Controlling the Chart Orientation in a Bar Chart

By default, the charting engine creates a horizontal bar chart. The following request changes the orientation to vertical, even though the LOOKGRAPH parameter specifies a horizontal bar chart (ON GRAPH SET LOOKGRAPH HBAR):

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US REVENUE_US MSRP_US
ACROSS TIME_DAYNAME COLUMNS 'FRI' AND 'SAT' AND 'SUN' AND 'MON'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH HBAR
ON GRAPH SET STYLE *
*GRAPH_JS
"blaProperties": {"orientation": "vertical"}
*END
ENDSTYLE
END

The output is:

Controlling How Data Points Are Connected in Bar, Line, or Area Charts

How to:

The lineConnection property controls how data points are connected in line and area charts and in charts that use a combination of area and/or line risers using the comboCharts property and the series-specific riserShape property.

Syntax: How to Set the lineConnection Property in Bar, Line, or Area Charts

"blaProperties": {
   "lineConnection": "string"
   }

where:

"lineConnection": "string"

Defines the line connection. Valid values are:

  • "linear", which connects the markers with straight line segments. This is the default value.
  • "curved", which connects the markers with curved line segments.
  • "stepBefore", which connects the markers with straight line segments that are only horizontal and vertical. The line segments needed to move to the next marker are placed so that the marker is at the end point of the segment at the correct y (for vertical charts) or x (for horizontal charts) coordinate.
  • "stepBetween", which connects the markers with straight line segments that are only horizontal and vertical. The line segments needed to move to the next marker are placed so that the marker is at the middle point of the segment at the correct y (for vertical charts) or x (for horizontal charts) coordinate.
  • "stepAfter", which connects the markers with straight line segments that are only horizontal and vertical. The line segments needed to move to the next marker are placed so that the marker is at the beginning point of the segment at the correct y (for vertical charts) or x (for horizontal charts) coordinate.

Example: Setting the lineConnection Property in a Line Chart

The following request creates a vertical line chart and sets the lineConnection property to the default value, linear:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US 
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
*GRAPH_JS
"blaProperties": {
   "lineConnection": "linear"    
}
*END
ENDSTYLE
END

The output is:

Changing the lineConnection to "curved" produces the following chart:

Changing the lineConnection to "stepBefore" produces the following chart, in which all of the line segments are horizontal or vertical, and the markers are at the end of the appropriate line segments:

Changing the lineConnection to "stepBetween" produces the following chart, in which all of the line segments are horizontal or vertical, and the markers are in the center of the appropriate line segments:

Changing the lineConnection to "stepAfter" produces the following chart, in which all of the line segments are horizontal or vertical, and the markers are at the beginning of the appropriate line segments:

Controlling the Line Fill Effect in Bar, Line, or Area Charts

How to:

The lineFillEffect property fills the space between line risers and the baseline, or between sibling risers in a stacked or percent line, with the specified color.

Syntax: How to Set the lineFillEffect Property in Bar, Line, or Area Charts

"blaProperties": {
   "lineFillEffect": "string"
   }

where:

lineFillEffect: "string"

Specifies the fill effect color. Valid values are:

  • undefined (disabled), which means that no fill effect is used. This is the default value.
  • "seriesAuto", which uses a lighter version of the series color for the fill effect.
  • "seriesLighten", which uses a lighter version of the series color for the fill effect.
  • "seriesLightenOpaque".
  • A color name or numeric specification string.
  • A gradient defined by a string.
  • a percent string ("-100%"..."100%"). A percent string uses the series color at the specified percentage of opacity.

Example: Setting the lineFillEffect Property in a Line Chart

The following request creates a vertical line chart with two series. The line for series 0 is teal, and the line for series1 is tan. The fill effect is seriesAuto:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US MSRP_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
*GRAPH_JS
"blaProperties": {
	"seriesLayout": "stacked", "lineConnection": "curved", 
	"lineFillEffect": "seriesAuto"},
"series": [
	{"series": 0, "color": "teal"},
	{"series": 1, "color": "tan"}],
"legend": {"visible": true}
*END
ENDSTYLE
END

The fill effect is a less opaque version of the series colors, automatically generated by the chart engine:

Changing the lineFillEffect to "seriesLighten" produces the following chart, in which the fill effect is lighter than the seriesAuto fill effect:

Changing the lineFillEffect to "seriesLightenOpaque" produces the following chart, in which the fill effect is lighter than the seriesAuto fill effect and less transparent than the seriesLighten fill effect:

Changing the lineFillEffect to "25%" produces the following chart, in which the fill effect is the series color at 25% opacity:

Changing the lineFillEffect to "beige" produces the following chart, in which the fill effect is the color beige:

Changing the lineFillEffect to "linear-gradient(0,0,100%,100%, 20% teal, 65% beige)" produces the following chart, in which the fill effect is a linear gradient that transitions from teal to beige:

Controlling the Gap Between Groups of Risers in Bar, Line, or Area Charts

How to:

The barGroupGapWidth property controls the width of the gap between groups of risers.

Syntax: How to Control the Gap Between Groups of Risers in a Bar, Line, or Area Chart

"blaProperties": {
   "barGroupGapWidth": number   }

where:

"barGroupGapWidth": number

Is a number between 0.0 and 1.0 that defines the width of the gap between groups of risers, as a percent of the available space between the groups. The default value is 0.2.

Example: Specifying the Width Between Risers in a Bar Chart

The following request sets the gap between risers to zero (0.0):

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US MSRP_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
"blaProperties": {"barGroupGapWidth": 0.0}
*END
ENDSTYLE
END

On the resulting chart, there is no space between the groups of risers (risers for each product category):

Changing the barGroupGapWidth to 0.5 generates the following chart:

Controlling the Display of Multiple Y-Axes in Bar, Line, or Area Charts

How to:

The splitY property controls whether multiple y-axes are displayed as dual axes (one on the left and one on the right) or split axes (stacked on top of each other).

Syntax: How to Control the Display of Multiple Y-Axes in a Bar, Line, or Area Chart

"blaProperties": {
"splitY": boolean

where:

"splitY": boolean

Determines whether dual or split y-axes are drawn. Valid values are:

  • true, which draws split y-axes. This is the default value.
  • false, which draws dual y-axes.

Example: Controlling the Display of Multiple Y-Axes

The following request assigns one measure to the y1-axis and one measure to the y2-axis and displays them as dual y-axes:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US DAYSDELAYED
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
"blaProperties": {"splitY": false},
"series": [
	{"series": 0, "yAxisAssignment": 1},
	{"series": 1, "yAxisAssignment": 2}],
"legend": {"visible": false}
*END
ENDSTYLE
END

The output is shown in the following image:

The following version of the request produces split y-axes:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US DAYSDELAYED
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
"yaxis": {"majorGrid": {"visible": false}},
"y2axis": {"majorGrid": {"visible": false}}, 
"blaProperties": {"splitY": true},
"series": [
	{"series": 0, "yAxisAssignment": 1, "color": "blue"},
	{"series": 1, "yAxisAssignment": 2, "color": "tan"}],
"legend": {"visible": false}
*END
ENDSTYLE
END

The output is shown in the following image:

Controlling the Total Label in a Stacked Bar, Line, or Area Chart

How to:

The stackTotalLabel properties control the appearance of the total label in stacked bar, line, and area charts (that is, where seriesLayout='stacked').

Syntax: How to Generate a Stack Total

"blaProperties": {
   "stackTotalLabel": {  
      "visible": boolean,
      "font": "string",
      "color": "string",
      "numberFormat": numformat   },
}

where:

visible: boolean

Defines the visibility of the stack total label. Valid values are:

  • true, which makes the total label visible.
  • false, which makes the total label not visible. This is the default value.
font: "string"

Is a string that defines the size, style, and typeface of the stack total label. The default value is "10pt Sans-Serif".

color: "string"

Is a string that defines the color of the stack total label. The default value is "black".

numberFormat: numformat

Defines the number format for the label. It can be specified as a JSON object, a format string, or a user-defined function. The default value is "auto". You can also use autoNumberFormats to apply a number format to all stack total labels. For information on number formats, see Formatting Numbers.

Example: Generating a Total Label in a Stacked Bar Chart

The following request creates a stacked vertical bar chart with a stack total in red on top of each stacked bar. The series object enables data labels, and the dataLabels object makes the data text visible:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US MSRP_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
"blaProperties": {"seriesLayout": "stacked", "stackTotalLabel": {
	"visible": true, "font": "10pt Serif, bold", "color": "red",
	"numberFormat": {"mode": "currency", "grouping": "M"}}},
"series": [{"series": "all", "showDataValues": true}],
"dataLabels": {"visible": true, "font": "bold 10pt Sans-Serif", "color": "teal",
	"numberFormat": {"mode": "currency", "grouping": "M"}},
"legend": {"visible": true}
*END
ENDSTYLE
END

On the output, the data labels are within the bars, and the stack total is on top:

Hiding an Extrapolated Line That Starts Before Actual Values

How to:

By default, if missing values are shown on a line chart, and if they start before the start of actual values in the data source, the line is extrapolated to include those missing values. The missingDataExtrapolate:false property omits those extrapolated values from the chart output.

Syntax: How to Control Display of an Extrapolated Line for Missing Values

"blaProperties": {
 "missingDataExtrapolate": boolean}

where:

"missingDataExtrapolate": boolean

Controls display of an extrapolated line that starts before actual values. Valid values are

  • true, which displays the extrapolated line. This is the default value.
  • false, which hides the extrapolated line.

Example: Hiding an Extrapolated Line That Starts Before Actual Values

The following request generates a vertical line chart with missing values that start before the actual values:

GRAPH FILE WF_RETAIL_LITE
SUM COMPUTE NEWDISCOUNT/D12.2=IF BUSINESS_REGION EQ 'South America' 
   THEN DISCOUNT_US *.1
   ELSE DISCOUNT_US ;
BY BUSINESS_REGION
ACROSS PRODUCT_SUBCATEG
WHERE BUSINESS_REGION EQ 'Oceania' OR 'South America';
WHERE PRODUCT_SUBCATEG NE 'Blu Ray';
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET VZERO OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
*GRAPH_SCRIPT
setFillMissingData(2);
*END
ENDSTYLE
END

On the chart output, the line is extrapolated to display those missing values, as shown on the following image:

Running the request with the following *GRAPH_JS block removes the extrapolated line from the chart output:

*GRAPH_JS
"blaProperties": {"missingDataExtrapolate": false}
*END

The chart output is shown on the following image:

Specifying Properties for Combination Charts

How to:

The comboCharts properties are used in conjunction with the series#:riserShape property to define a combination chart (that is, a chart that can consist of a combination of bar risers, area risers, and line risers). When you generate a bar, line, or area chart, the series-specific riserShape property can be used to define the shape of the riser for each series as a bar, line, or area. (For more information, see Defining the Shapes of Risers for a Series in Bar, Line, and Area Charts.) These properties control the layout (stacked, absolute, percent, or sideBySide) of the risers for each series.

Syntax: How to Specify Combinations of Riser Shapes

"blaProperties": {
   "comboCharts": {
      "barSeriesLayout": "string",  
      "lineSeriesLayout": "string",
      "areaSeriesLayout": "string",
   }
}

where:

"barSeriesLayout": "string"

Defines the riser layout for series assigned bar risers (series#:markerShape: "bar"). Valid values are "absolute", "percent", "sideBySide", or "stacked". The default value is undefined. For more information about series layout, see Controlling seriesLayout.

"lineSeriesLayout": "string"

Defines the riser layout for series assigned line risers (series#:markerShape: "line"). The default value is undefined. Valid values are "absolute", "percent", or "stacked". For more information about series layouts, see Controlling seriesLayout.

"areaSeriesLayout": "string"

Defines the riser layout for series assigned area risers (series#:markerShape: "area"). The default value is undefined. Valid values are "absolute", "percent", or "stacked". For more information about series layouts, see Controlling seriesLayout.

Example: Controlling the Series Layouts in Combo Charts

The following request creates a combo chart with one line riser, whose marker shape is a pirate cross, one area riser, and three stacked bar risers. The series object assigns each series a type of riser:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US MSRP_US GROSS_PROFIT_US REVENUE_US MSRP_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
"legend": {"visible": true},
"border": {"width": 2, "color": "teal"},
"title": {"visible": true, "text": "ComboChart", "font": "14pt Sans-Serif", "color": "teal"},
"blaProperties": {
	"lineConnection": "curved", "comboCharts": {
		"barSeriesLayout": "stacked", 
		"lineSeriesLayout": "absolute", 
		"areaSeriesLayout": "undefined"}},
"series": [
	{"series": 0, "color": "purple", "riserShape": "line", "border": {"width": 2},
		"marker": {"shape": "pirateCross", "size": 14, "visible": true}},
	{"series": 1, "color": "lightgreen", "riserShape": "bar"},
	{"series": 2, "color": "yellow", "riserShape": "bar"},
	{"series": 3, "color": "coral", "riserShape": "bar"},
	{"series": 4, "color": "tan", "riserShape": "area"}]
*END
ENDSTYLE
END

The output is:

Note: When a combination chart is defined with both the comboChart properties and the series#:riserShape property, area risers are drawn first in the back, then bars, then lines in the front.

WebFOCUS

Feedback