In this section: |
A funnel chart is basically a pie chart that shows only one group of data at a time. The series in the group are stacked in the funnel with the first series at the top and the last series at the bottom. In a funnel chart, the display field functions as the group, and the sort field values function as the series.
These properties control the general layout of a funnel chart.
The following code segment shows the default values:
funnelProperties: { topWidth: '100%', baseWidth: '20%', riserGap: 0, groupLabel: { visible: false, font: '10pt Sans-Serif', color: 'black' } },
Series-specific properties control the color of funnel segments.
How to: |
The topWidth property controls the width of the top of the funnel.
funnelProperties: {
topWidth: twidth}
where;
Can be a number that defines the width in pixels or a string that includes a percent symbol, enclosed in single quotation marks ('), that represents a percentage of the available space in the frame (that is, '0%' through '100%'). The default value is '100%'.
The following request creates a funnel chart in which the top width is reduced to 50%:
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH FUNNEL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible: true},
funnelProperties: {
topWidth: '50%'
}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END
The output is:
How to: |
The baseWidth property controls the width of the base of the funnel.
funnelProperties: {
baseWidth: bwidth}
where;
Can be a number that defines the width in pixels, or a string that includes a percent symbol, enclosed in single quotation marks ('), that represents a percentage value (that is, from '0%' to 100%'). The default value is '20%'.
The following request creates a funnel chart in which the base width is 1 pixel:
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH FUNNEL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible: true},
funnelProperties: {
baseWidth: 1
}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END
The output is:
How to: |
The riserGap property controls the empty space between layers in the funnel.
funnelProperties: {
riserGap: rgap},
where:
Can be a number that defines the width of the riser gap in pixels, or a string that includes a percent symbol, enclosed in single quotation marks ('), that represents a percentage value '0%' to '100%' (of average riser height). For example, riserGap: '10%' will use 10% of each funnel layer as white space between each segment. The default value is zero (0).
The following request creates a funnel chart in which the gap between layers is 1 pixel:
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH FUNNEL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible: true},
funnelProperties: {
riserGap: 1
}
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END
The output is:
How to: |
The groupLabel properties control the visibility and format of the group label in a funnel chart.
These properties do not control the text that displays as the group label. That is controlled by the general groupLabels property. The default group label is the field name for the measure in the request.
funnelProperties: { groupLabel: { visible: boolean, font: 'fstring', color: 'cstring' }, },
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'.
The following request creates a funnel chart with a red group label in a 14pt Sans-Serif font. The top width is 50%, the base width is 1 pixel, and the riser gap is 10 pixels. The group label is the measure field name (the default label):
GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US
ACROSS TIME_DAYNAME COLUMNS 'FRI' AND 'SAT' AND 'SUN' AND 'MON'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH FUNNEL
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible: true},
funnelProperties: {
topWidth: '50%',
baseWidth: 1,
riserGap: 10,
groupLabel: {
visible: true,
font: 'bold 14pt Sans-Serif',
color: 'red'
}
},
series: [
{series: 0, color: 'cyan', border: {width: 2, color: 'blue'}},
{series: 1, color: 'bisque', border: {width: 2, color: 'red'}},
{series: 2, color: 'lightgreen', border: {width: 2, color: 'teal'}},
{series: 3, color: 'tan', border: {width: 2, color: 'brown'}},
]
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END
The output is:
WebFOCUS |