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, } }
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.
blaProperties: {
seriesLayout: 'layout'
}
where;
Defines the arrangement of risers. Valid values are:
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:
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.
blaProperties: {
orientation: 'ostring'
}
where:
Valid values are:
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:
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.
blaProperties: {
lineConnection: 'linetype'
}
where:
Defines the line connection. Valid values are:
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:
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.
blaProperties: {
lineFillEffect: 'colortype'
}
where:
Specifies the fill effect color. Valid values are:
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:
How to: |
The barGroupGapWidth property controls the width of the gap between groups of risers.
blaProperties: {
barGroupGapWidth: number }
where;
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.
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:
How to: |
The stackTotalLabel properties controls the appearance of the total label in stacked bar, line, and area charts (that is, where seriesLayout='stacked').
blaProperties: { stackTotalLabel: { visible: boolean, font: 'fontstring', color: 'colorstring', numberFormat: nformat }, }
where:
Valid values are:
Is a string that defines the size, style, and typeface of the label. The default value is '10pt Sans-Serif'.
Is a string that defines the color of the label. The default value is 'black'.
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'.
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:
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.
blaProperties: { comboCharts: { barSeriesLayout: 'barlayout', lineSeriesLayout: 'linelayout', areaSeriesLayout: 'arealayout', } }
where;
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.
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.
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.
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 |