Funnel Chart Widget
This widget belongs to the Dashboards category in the widget library. For a given measure, it enables you to view each dimension element in a funnel chart (stacks of increasingly bigger sections) or pyramid chart (stacks of increasingly smaller sections). The shape of the chart is determined by the position of the neck. This is used to highlight the values with significant differences at top of the chart from those that are almost similar at the bottom of the chart.
You can use different properties to define the layout of the chart, e.g. color, width of the three sections of the chart (base, body and neck), label font and position, etc.
Examples
Data in the CSV file
- Dimension = Past six weeks
- Measure = Number of incidents
- Elements displayed: The number of incidents per working day for the past six weeks
Download
Different chart displays for the number of incidents per week
| Funnel chart, tooltip | Pyramid chart |
|---|---|
 |
 |
Notes
- The Funnel Chart widget requires a data source that will retrieve a report, view or CSV file with two columns (grouping levels), i.e. Label and Value.
Note: If the data source contains several columns, you should use the Data Transformer to select the columns you want.- Column 1: Dimension
- Column 2: Value of measure elements to be displayed in the chart
- There are as many sections in the chart as there are measure elements.
- Measure elements are displayed in the chart from top to bottom.
- The height of each section is proportionate to its value.
- Each section is displayed in a different color indicated in the legend.
- The legend can be used as a dynamic data filter in execute mode. To use it, click the label.
Best Practice
- Define the neck in order to display all values that have a significant difference above the neck.
List of properties
Content
DataSource
Data Source: External data source associated with the widget.
- The drop-down list displays all of the data sources available in the app.
- To modify the data source or to view its contents, you should click
. The 
button below the Preview property shows the number of rows (max. 15) and columns extracted. - To define a new data source, click
Add Data Source in the Objects pane.
DataTransformer
Data Transformer: Used to define the structure and scope of the data source, apply statistical aggregate functions and modify the order of the measures displayed.
- Click Setup / Preview Data below the Data Transformer property to open the dedicated window.
See the description.
EnableDrilldown
Enable Drilldown (Note: Only for an EasyVista data source data source using a view with grouping levels): Used to indicate if data is aggregated (box is checked - the drill-down functionality is enabled) or not (box is not checked).
example Breadcrumbs widget: Breakdown of equipment by location.
- If you want the widget to display the breakdown in a grouping level, you should not check this box.
- Add a Breadcrumb widget to facilitate navigation within grouping levels.
Data
SortByValueDescending
Sort By Value Descending: Used to sort dimension elements in descending order (if the box is checked, from highest to lowest value) or in the order in which they are read in the data source (box is not checked). Note: The order applied is determined by the dimension elements of the first measure in the data source.
example You want to display the chart for incidents and requests per employee
The data source contains the Department dimension with three elements. 
| Box is checked | Box is not checked |
|---|---|
|
The dimension elements of each measure are sorted in descending order. |
The dimension elements of each measure are displayed according to the sort order of the data source. |
FirstRowContainsDimensionElements
First Row Contains Dimension Elements: Used to specify the structure of the data source by indicating if dimension elements are found in the first column (box is not checked: standard data source structure) or in the first row (box is checked). Note: This property does not affect the behavior of the Data Transformer.
MaximumNumberOfData
Maximum Number Of Data: Used to indicate the maximum number of dimension elements to be loaded from the data source for each measure selected in the data source.
You should use this property to prevent loss of performance when data volume is large.
- The count is always performed from the first dimension element.
- When the number of dimension elements to be loaded is greater than the number of dimension elements in the data source, all of the data is loaded.
- To view the data source, click next to the Data source property, then click button below the Preview property which shows the number of measures and the number of dimension elements for each measure.
example You want to display the chart for incidents and requests per employee
The data source contains the Department dimension with three elements.
|
|
|
|---|---|---|
|
All dimension elements are loaded and displayed for each measure, i.e. the three departments. |
Only the first two dimension elements are loaded and displayed for each measure, i.e. the first two departments. |
All dimension elements are loaded but only the first element is displayed. This corresponds to the Sales department. The Others dimension element groups values from the Marketing and Administration departments. |
MaximumNumberOfDisplayedData
Maximum Number Of Displayed Data: Used to indicate the maximum number of dimension elements to be displayed for each measure selected in the data source. This improves chart readability.
example You want to display the chart for incidents and requests per employee. See the Maximum Number Of Data field.
- The count is always performed from the first dimension element.
- When the number of dimension elements to be displayed is less than the number of dimension elements to be loaded, the Others dimension element will automatically be added to the chart. It will aggregate all of the values from non-displayed dimension elements.
Charts
Base width: Width of the top of the chart.
- Enter the value 0 to display a pyramid chart.
Neck Width: Width of the neck.
- All sections below this point will have the same width.
Neck Height: Height between the base of the chart and the neck.
- The maximum value will display a chart where all sections have the same width.
AdvancedDashboards_Charts_Stroke
Stroke Color: Color of the border of the sections in the chart.
Hover Stroke Color: Color of the border when the cursor hovers over a section.
Connector
AdvancedDashboards_Charts_Connector
Dash Size: Length of the dashes linking labels to sections in the chart.
Gap Size: Space between the dashes.
Thickness: Thickness of the dashes.
Color: Color of the dashes.
Note: You can use the Labels Points on the Graph > Connector Length property to modify the length of the dashes string.
Common
AdvancedDashboards_Common_General
Animation: In execute mode, this is used to indicate if the chart should be displayed in dynamic mode (box is checked) or in static mode (box is not checked). In dynamic mode, elements are displayed one after the other while in static mode, they are displayed at the same time.
AdvancedDashboards_Common_DisplayPrintExportButton
Display Print and Export Button: Used to indicate if users can save and print the chart (box is checked) or not (box is not checked). If users can save and print it, the 
and 
icons will appear. Note: The icons are always displayed to the right of the chart.
- : Used to save the chart in a JPG file.
- : Used to print or save the chart in a PDF file.
AdvancedDashboards_Common_DisplayAreaColor
Display Area Color: Used to indicate if a specific color should be applied to the background (box is checked) or not (box is not checked). If you want a background color, you should select it in Chart Area Color.
- The area of the background is delimited by the dimension axis and the measure axis.
- To apply a background color to the entire chart, use the Theme > Background Color property. The background color defined in the Display Area Color property will have priority.
| Background color defined (box is checked) | White background (box is not checked) | Background color for the entire chart (Theme property) |
|---|---|---|
 |
 |
 |
Title
AdvancedDashboards_Common_DisplayChartTitle
Display Chart Title: Used to indicate if a title should be added to the chart (box is checked) or not (box is not checked). If you want to add a title, you should enter it in Chart Title and define its format.
Display format of the chart title: e.g. font, background color, text color, etc.
PageGeneralFormat
| Font Family (Inherit) | Font of the text, selected via Select Font |  |
|
| Size | Font size, selected via the slide or specified directly in the field | ||
| Alignment (Inherit) | Alignment of the text (Left/Center/Right/Justified) | ||
| Style (Inherit) | Font style of the text Bold/Italic/Underline) | ||
| Background Color (Inherit) | Background color of the widget | ||
| Text Color (Inherit) | Color of the text displayed by the widget
Note: Priority is given to the font and color defined using the text editor |
Data Points Labels in the Chart
AdvancedDashboards_Common_DisplayPointLabel_Connector
Connector Length: Length of the dashes string linking labels to sections in the chart.
Note: You can modify the graphical properties of the dashes string via the Chart > Connector section.
AdvancedDashboards_Common_DisplayPointLabel
AdvancedDashboards_Common_DisplayPointLabel_WithoutPosition
Display Point Label: Used to indicate if data labels in the chart should be displayed (box is checked) or not (box is not checked). If you want to display data labels, select the information to be displayed from the Label list.
- By default: Value of the dimension axis followed by the value of the measure axis.
- Define the display format, e.g. font, background color, text color, etc.
Label (Note: Only if the Display Point Label box is checked): Information displayed in the chart.
- Name: Values of the dimension axis.
- Value: Values of the measure axis.
- Click x to return to the default option where the two values are displayed.
| Default display | Values of the dimension axis
(Name option) |
Values of the measure axis
(Value option) |
|---|---|---|
 |
 |
 |
Display format of the data labels: e.g. font, background color, text color, etc.
PageGeneralFormat
| Font Family (Inherit) | Font of the text, selected via Select Font | |
|
| Size | Font size, selected via the slide or specified directly in the field | ||
| Alignment (Inherit) | Alignment of the text (Left/Center/Right/Justified) | ||
| Style (Inherit) | Font style of the text Bold/Italic/Underline) | ||
| Background Color (Inherit) | Background color of the widget | ||
| Text Color (Inherit) | Color of the text displayed by the widget
Note: Priority is given to the font and color defined using the text editor |
AdvancedDashboards_Common_DisplayPointLabel_WithoutPositionEnd
Position: Position of data labels in the chart.
- Inside the Chart: Within the chart.
- Outside the Chart: Outside the chart. You should use this option when information tends to overlap within the chart. This will provide more space for longer data labels.
| Within the chart (Inside option) | Outside the chart (Outside option) |
|---|---|
 |
 |
Color Palette
AdvancedDashboards_Common_ColorPalette
Chart Color: Color palette applied to the chart. This is used to define the color of chart data and the color of legend buttons.
- The list is provided by
. - The number of colors in the palette is indicated next to its name, e.g. Brown (6), Default (12), EasyVista (7).
- The color of other chart elements, e.g. axis title and labels, chart title and tickmarks, are defined using specific properties.
Legend
AdvancedDashboards_CommonLegend
AdvancedDashboards_CommonLegend_DisplayTitle
Display Legend: Used to indicate if the chart legend should be displayed (box is checked) or not (box is not checked).
- Each legend is made up of the name of the dimension element preceded by a button.
- The color of the buttons is defined by the color palette applied to the chart (Common > Color Palette property).
- Define the position of the legend using the Layout, Position, Horizontal and Vertical properties. Caution: Depending on the selected options, the chart will automatically be resized to allow legends to be fully displayed.
- Note: The legend can be used as a dynamic data filter in execute mode. When you click a button or name, you can display or hide the corresponding values in the chart.
Display Legend Title (Note: Only if the Display Legend box is checked): Used to indicate if a title should be added above the chart legend (box is checked) or not (box is not checked).
AdvancedDashboards_CommonLegend_DisplayTitleEnd
Layout (Note: Only if the Display Legend box is checked): Orientation of the chart legend.
- Horizontal: Legend labels are displayed horizontally, adjacent to each other.
- Vertical: Legend labels are displayed vertically, one below the other.
| Legend in rows (Horizontal option) | Legend in columns (Vertical option) |
|---|---|
 |
 |
Properties for the legend position (Note: Only if the Display Legend box is checked).
Click to see the summarized layouts.
- Vertical alignment (Layout = Vertical)
- Horizontal alignment (Layout = Horizontal)
Position: Position of the legend within the chart.
- Top: At the top of the chart.
- Bottom: At the bottom of the chart.
- Left: To the left of the chart.
- Right: To the right of the chart.
Horizontal Align (Note: Only if Position = Top or Bottom): Horizontal position of the chart legend.
- Left: To the left of the chart.
- Center: In the center of the chart.
- Right: To the right of the chart.
Vertical Align (Note: Only if Position = Left or Right): Vertical position of the chart legend.
- Top: At the top of the chart.
- Center: At the top of the chart.
- Bottom: At the bottom of the chart.
Tooltip
AdvancedDashboards_CommonTooltip
Display Tooltip: Used to indicate if data labels should be displayed in a tooltip when the cursor hovers over the chart (box is checked) or not (box is not checked). If you want to display tooltips, select the information to be displayed from the Label list.
- Information displayed by default when the cursor hovers over each data point: Value of the dimension axis / Value of the measure axis
- Define the display format using the properties below.
Tooltip Display Mode (Note: Only if the Display Tooltip box is checked): Used to define the information displayed when the cursor hovers each data point.
- Single: Value of the dimension axis / Value of the measure axis
- Union: Value of the dimension axis / All values of the measure axis
| Current value of the measure axis (Single option) | All values of the measure axis (Union option) |
|---|---|
 |
 |
Position (Note: Only if the Display Tooltip box is checked): Position of the data point's tooltip based on the movement of the cursor.
- Float: The tooltip will move along with the cursor.
- Point: The tooltip always appears above the data point regardless of the position of the cursor.
Theme
See the description of properties.