Waterfall Chart Properties (waterfallProperties)

In this section:

Waterfall charts graphically illustrate the cumulative effect of sequentially introducing positive or negative values to an initial value. The initial and final (or total) values are represented by whole columns drawn from the ordinal axis baseline. Intermediate positive and negative values are drawn as floating columns.

These properties control the general layout of a waterfall chart.

The following code segment shows the default settings:

waterfallProperties: {
   appendTotalRiser: true,
   positiveRiserColor: '#77b39a',  
   negativeRiserColor: '#e2675b',  
   zeroRiserColor: '#7593bd',  
   otherRiserColor: '#aaaaaa',  
   subtotalRisers: [],  
   otherRisers: [],  
   connectorLine: {
      width: 1,
      color: 'black',
      dash: ''
   }
},

Top of page

x
Appending a Total Riser in a Waterfall Chart

How to:

This property controls the generates a total riser as the last riser in a waterfall chart.



x
Syntax: How to Append a Total Riser in a Waterfall Chart
waterfallProperties: {
   appendTotalRiser: boolean   },

where:

boolean

Valid values are:

  • true, which draws a total riser. This is the default value.
  • false, which does not draw a total riser.


Example: Appending a Total Riser in a Waterfall Chart

The following request against the GGSALES data source generates a waterfall chart with a total riser (the default):

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
DECR1 = -(DOLLARS- 500);
DECR2 = -(DOLLARS-1000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1 AS 'Qtr1'
INCR2 AS Qtr2'
DECR1  AS 'Qtr3'
DECR2 AS 'Qtr4'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
waterfallProperties: {
   appendTotalRiser: true
  }
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is:

Changing appendTotalRiser to false generates the following chart:


Top of page

x
Formatting Connector Lines in a Waterfall Chart

How to:

These properties control the appearance of connector lines between risers in a waterfall chart.



x
Syntax: How to Format Connector Lines in a Waterfall Chart
waterfallProperties: {
   connectorLine: {
      width: number,
      color: 'cstring',
      dash: 'dstring'
   }
   },

where:

number

Is the width of the connector line in pixels. The default value is 1.

'cstring'

Is a color name or numeric specification string. The default value is 'black'.

'dstring'

Is a string that defines the dash style of the connector lines. The default value is '', which produces a solid line. Use a string of numbers that specifies the width of a dash followed by the width of the gap between dashes (for example, dash: '1 1' draws a dotted line).



Example: Formatting Waterfall Chart Connector Lines

The following request against the GGSALES data source generates a waterfall chart in which the connector lines are 2 pixels wide, dark blue, and dashed:

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
DECR1 = -(DOLLARS- 500);
DECR2 = -(DOLLARS-1000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1 AS 'Qtr1'
INCR2 AS Qtr2'
DECR1  AS 'Qtr3'
DECR2 AS 'Qtr4'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
waterfallProperties: {
   connectorLine: {width: 2, color: 'darkblue', dash: '2 2'},
}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is:


Top of page

x
Controlling the Color of Negative Risers in a Waterfall Chart

How to:

This property controls the color of risers that represent negative values in a waterfall chart.

Note: You can use series-specific properties to format risers individually, by specifying a color for each group under series 0.



x
Syntax: How to Color Negative Risers in a Waterfall Chart
waterfallProperties: {
   negativeRiserColor: color   },

where:

color

Defines the negative riser color. Valid values are:

  • A color string, enclosed in single quotation marks ('), that defines a color by name, numeric specification string, or gradient definition string. The default value is '#e2675b'.
  • A JSON object that defines a gradient.

For information about specifying colors and gradients, see Colors and Gradients.



Example: Setting the Waterfall Chart Negative Riser Color

The following request against the GGSALES data source generates a waterfall chart in which the risers for negative values are black:

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
DECR1 = -(DOLLARS- 500);
DECR2 = -(DOLLARS-1000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1 AS 'Qtr1'
INCR2 AS Qtr2'
DECR1  AS 'Qtr3'
DECR2 AS 'Qtr4'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
waterfallProperties: {
   negativeRiserColor: 'black'}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is:

Note: You can use series-specific properties to format risers individually, by specifying a color for each group under series 0. For example:

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
DECR1 = -(DOLLARS- 500);
DECR2 = -(DOLLARS-1000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1 AS 'Qtr1'
INCR2 AS Qtr2'
DECR1  AS 'Qtr3'
DECR2 AS 'Qtr4'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
series: [
   {series: 0, group: 0, color: '#7593bd'},
   {series: 0, group: 1, color: '#77b39a'},
   {series: 0, group: 2, color: '#77b39a'},
   {series: 0, group: 3, color: '#7593bd'},
   {series: 0, group: 4, color: 'coral'},
   {series: 0, group: 5, color: 'pink'},
 ]
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

On the output, each riser has the color specified for that group:


Top of page

x
Specifying a Waterfall Chart Other Riser Color

How to:

The otherRiserColor property controls the color of risers that represent other values (if any) in a waterfall chart. Other values are defined in the otherRisers array.



x
Syntax: How to Specify a Waterfall Chart Other Riser Color
waterfallProperties: {
   otherRiserColor: color   },

where;

color

Specifies a color for the other risers . Valid values are:

  • A color string, enclosed in single quotation marks ('), that defines a color by name, by a numeric specification string, or by a gradient definition string. The default value is '#aaaaaa'.
  • A JSON object that defines a gradient.

For information about specifying colors and gradients, see Colors and Gradients.



Example: Specifying a Waterfall Chart Other Riser Color

The following request against the GGSALES data source generates a waterfall chart in which the other risers are colored light grey:

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
INCR3 = DOLLARS+1500;
INCR4 = DOLLARS+2000;
DECR1 = -(DOLLARS- 500);
DECR2 = -(DOLLARS-1000);
DECR3 = -(DOLLARS-1500);
DECR4 = -(DOLLARS-2000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1
INCR2
INCR3
INCR4
DECR1
DECR2
DECR3
DECR4
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
groupLabels: ['Initial', 'A', 'B', 'Subtotal', 'C',  'D', 'E', 'F','Total'],
waterfallProperties: {
   otherRiserColor: 'lightgrey', 
   otherRisers: ['E', 'F']}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END
 

The output is:

Note: You can also use series-specific properties to format risers individually. For an example, see Controlling the Color of Negative Risers in a Waterfall Chart.


Top of page

x
Specifying Other Risers

How to:

The otherRisers property defines one or more groups or values to be interpreted as other values. Risers representing these values will be assigned the color defined by the otherRiserColor property.



x
Syntax: How to Specify Other Risers
waterfallProperties: {
   otherRisers: [grouparray]
   },

where:

grouparray

Can be an array of:

  • numbers, that specify group indices.
  • strings, enclosed in single quotation marks ('), that specify group names.


Example: Specifying Other Risers

The following request against the GGSALES data source generates a waterfall chart. The groupLabels object assigns group label names to each group, and the waterfallProperties otherRisers property assigns groups E and F to the other risers category:

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
INCR3 = DOLLARS+1500;
DECR1 = -(DOLLARS- 500);
DECR2 = -(DOLLARS-1000);
DECR3 = -(DOLLARS-1500);
DECR4 = -(DOLLARS-2000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1
INCR2
INCR3
DECR1
DECR2
DECR3
DECR4
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
groupLabels: ['Initial', 'A', 'B', 'Subtotal', 'C',  'D', 'E', 'F','Total'],
waterfallProperties: {
   otherRiserColor: 'lightgrey', 
   otherRisers: ['E', 'F'],
}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

On the chart output, the other risers are drawn in light grey, the color assigned by the otherRiserColor property:


Top of page

x
Specifying a Waterfall Chart Positive Riser Color

How to:

The positiveRiserColor property controls the color of risers that represent positive values in a waterfall chart.



x
Syntax: How to Color Waterfall Chart Positive Risers
waterfallProperties: {
   positiveRiserColor: color   },

where:

color

Defines a color for the positive risers. Valid values are:

  • A color string, enclosed in single quotation marks ('), that defines a color by name, by a numeric specification string, or by a gradient definition string. The default value is '#77b39a'.
  • A JSON object that defines a gradient.

For information about specifying colors and gradients, see Colors and Gradients.



Example: Specifying a Waterfall Chart Positive Riser Color

The following request against the GGSALES data source generates a waterfall chart in which the risers for positive values are the color burlywood:

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
INCR3 = DOLLARS+1500;
DECR1 = -(DOLLARS- 500);
DECR2 = -(DOLLARS-1000);
DECR3 = -(DOLLARS-1500);
DECR4 = -(DOLLARS-2000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1
INCR2
INCR3
DECR1
DECR2
DECR3
DECR4
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
groupLabels: ['Initial', 'A', 'B', 'C', 'Subtotal', 'D', 'E', 'F','Total'],
waterfallProperties: {
   positiveRiserColor: 'burlywood'}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END
 

The output is:

Note: You can also use series-specific properties to format risers individually. For an example, see Controlling the Color of Negative Risers in a Waterfall Chart.


Top of page

x
Specifying Subtotal Values

How to:

This property defines one or more groups or values to be interpreted as subtotal values.



x
Syntax: How to Assign Subtotal Values
waterfallProperties: {
   subtotalRisers: [grouparray]
   },

where:

grouparray

Can be an array of:

  • numbers, that specify group indices.
  • strings, enclosed in single quotation marks ('), that specify group names.


Example: Specifying Subtotal Risers

The following request against the GGSALES data source generates a waterfall charts with two subtotal risers. The groupLabels object assigns names to each riser, and the subtotalRisers object specifies those names in its array:

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
INCR3 = DOLLARS +INCR1+INCR2;
INCR4 = DOLLARS + 2000;
DECR1 = -(INCR4- 500);
-*DECR2 = (INCR3-DECR1);
DECR2 = INCR3 +500;
DECR3 = -(DOLLARS-2000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1
INCR2
INCR3
INCR4
DECR1
DECR2
DECR3
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
groupLabels: ["Beginning Cash", "Income", 
"Expense","Subtotal1","Income2","Expense2","Subtotal2","Expense3","TOTAL"
],
waterfallProperties: {
   subtotalRisers: ['Subtotal1','Subtotal2'],
}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is:


Top of page

x
Specifying the Color of Waterfall Chart Subtotal and Total Risers

How to:

The zeroRiserColor property controls the color of any riser placed in the subtotal array and the riser that represents the total value in a waterfall chart.



x
Syntax: How to Color Waterfall Chart Initial Value, Subtotal, and Total Risers
waterfallProperties: {
   zeroRiserColor: color   },

where:

color

Specifies the color for any riser placed in the subtotal array and the riser representing the total value. Valid values are:

  • A color string, enclosed in single quotation marks ('), that defines a color by name, by a numeric specification string, or by a gradient definition string. The default value is '#7593bd'.
  • A JSON object that defines a gradient.

For information about specifying colors and gradients, see Colors and Gradients.



Example: Setting the Waterfall Chart zeroRiserColor Property

The following request against the GGSALES data source generates a waterfall chart and sets the zeroRiserColor property to a linear gradient that transitions from bisque to light blue. It adds the initial value riser to the subtotal array, so the initial value riser also displays using the specified gradient:

DEFINE FILE GGSALES
INCR1 = DOLLARS + 500;
INCR2 = DOLLARS+1000;
INCR3 = DOLLARS +INCR1+INCR2;
DECR1 = -(DOLLARS- 500);
DECR2 = -(DOLLARS-2000);
END
GRAPH FILE GGSALES
SUM DOLLARS 
INCR1
INCR2
INCR3
DECR1
DECR2
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VWATERFL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible:false},
groupLabels: ['Initial', 'A', 'B', 'Subtotal', 'C',  'D','Total'],
waterfallProperties: {
   subtotalRisers: ['Initial','Subtotal'],
   zeroRiserColor: {
      type: 'linear', 
      start: {x: '0%', y: '0%'},end: {x: '100%', y: '100%'},
      stops: [[0, 'bisque'],[1, 'lightblue']]   
   }
}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is:

Note: You can also use series-specific properties to format risers individually. For an example, see Controlling the Color of Negative Risers in a Waterfall Chart.


WebFOCUS