Bar, Line, and Area Chart Properties (blaProperties)

In this section:

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'
   },
   comboCharts: {
      barSeriesLayout: undefined,  
      lineSeriesLayout: undefined,
      areaSeriesLayout: undefined,
   }
}

Top of page

x
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.



x
Syntax: How to Control the Series Layout in Bar, Line, or Area Charts
blaProperties: {
   seriesLayout: 'layout'
              }

where;

'layout'

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 against the GGSALES data source sets the seriesLayout property to 'stacked’

GRAPH FILE GGSALES
SUM DOLLARS BUDDOLLARS
BY PRODUCT
ON GRAPH SET GRAPHDEFAULT OFF 
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:


Top of page

x
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.



x
Syntax: How to Specify the Chart Orientation
blaProperties: {
   orientation: 'ostring'
   }

where:

'ostring'

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 GGSALES
SUM DOLLARS UNITS
BY REGION
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:


Top of page

x
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 Specifying Properties for Combination Charts property and the series-specific riserShape property.



x
Syntax: How to Set the lineConnection Property in Bar, Line, or Area Charts
blaProperties: {
   lineConnection: 'linetype'
   }

where:

'linetype'

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 against the GGSALES data source creates a vertical line chart and sets the lineConnection property to the default value, linear:

GRAPH FILE GGSALES
SUM DOLLARS 
BY PRODUCT
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:


Top of page

x
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.



x
Syntax: How to Set the lineFillEffect Property in Bar, Line, or Area Charts
blaProperties: {
   lineFillEffect: 'colortype'
   }

where:

'colortype'

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 against the GGSALES data source 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 GGSALES
SUM DOLLARS UNITS
BY PRODUCT
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:


Top of page

x
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.



x
Syntax: How to Control the Gap Between Groups of Risers in a Bar, Line, or Area Chart
blaProperties: {
   barGroupGapWidth: number   }

where;

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 against the GGSALES data source sets the gap between risers to zero (0.0):

GRAPH FILE GGSALES
SUM AVE.DOLLARS 
MDN.DOLLARS 
ACROSS REGION 
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 region):

Changing the barGroupGapWidth to 0.5 generates the following chart:


Top of page

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

How to:

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



x
Syntax: How to Generate a Stack Total
blaProperties: {
   stackTotalLabel: {  
      visible: boolean,
      font: 'fontstring',
      color: 'colorstring',
      numberFormat: nformat   },
}

where:

boolean

Valid values are:

  • true, which makes the total label visible.
  • false, which makes the total label not visible. This is the default value.
'fontstring'

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

'colorstring'

Is a string that defines the color of the label. The default value is 'black'.

nformat

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'.



Example: Generating a Total Label in a Stacked Bar Chart

The following request against the GGSALES data source 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 GGSALES
SUM DOLLARS BUDDOLLARS
BY PRODUCT
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:


Top of page

x
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.



x
Syntax: How to Specify Combinations of Riser Shapes
blaProperties: {
   comboCharts: {
      barSeriesLayout: 'barlayout',  
      lineSeriesLayout: 'linelayout',
      areaSeriesLayout: 'arealayout',
   }
}

where;

'barlayout'

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 the Series Layout in Bar, Line, or Area Charts.

'linelayout'

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 the Series Layout in Bar, Line, or Area Charts.

'arealayout'

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 the Series Layout in Bar, Line, or Area Charts.



Example: Controlling the Series Layouts in Combo Charts

The following request against the GGSALES data source 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 GGSALES
SUM DOLLARS BUDDOLLARS UNITS BUDUNITS ASQ.DOLLARS 
BY PRODUCT
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