Search results

Configuring Pivot Grid

Pivot grid allows you to display summarized data in cross tabular format i.e., in rows and columns.

pivot-grid

How to configure table data to pivot grid?

NOTE: Before adding the Pivot grid widget to the design layout, make sure to create the data source. You can refer to this section to learn how to create a new data source.

Pivot grid need a minimum of 1 value , 1 row and 1 column element to showcase proper pivot table details. The measure or expression field that you would like to analyze can be dropped into Value(s) field. The dimension that you would like to categorize the measure based on row and column can be dropped in Row(s) and Column(s) field.

The following steps explain how to configure the data to a Pivot grid:

  1. Drag and drop the pivot grid widget into a canvas and resize it to your required size.

pivot-grid_dragDrop

  1. To open the Property pane, click the Properties icon in the Configuration panel.

configurationPanel_propertyIcon

  1. In the property pane, switch to the ASSIGN DATA tab from the PROPERTIES, to assign data to the pivot grid data fields.

pivot-grid_properties

  1. The ASSIGN DATA tab will be opened with available measures and dimensions from the connected data source. Also it contains Value(s), Row(s), and Column(s) field as mentioned earlier.

pivot-grid_assignData

Adding data to Value(s) field

You can add more than one Measures into Value(s) field by drag and drop the required measure.

pivot-grid_bindValue

Now the pivot grid will be rendered like this for single data

pivot-grid_valueRender

Pivot grid will be rendered like this, if more than one data bind to Value(s)

pivot-grid_valueMultiRender

If more than one data is added to Value(s) field and then grid column is separated based on the number of data attached to Value(s) field, as shown in above image.

Click the Settings option to change the name by using the Rename option and the required summary type from the available summary types shown in Settings.

pivot-grid_valueSettingIcon

Filtering data

You can filter the data to be displayed in pivot grid by using filter. For more details, refer filter.

pivot-grid_valueSettingFilter

Formatting data

You can format the data to be displayed in the pivot grid by using format option. For more details, refer measure format

pivot-grid_valueSettingFormat

You can add more than one column from Dimensions field into Value(s) field.

Adding Column(s)

Adding single data to Value(s) and Column(s)

pivot-gridsingleValuesColumn

pivot-grid-singleValuesColumn

You can change the Settings.

Settings

Renaming fields

The configured field names can be edited by using the Rename option provided in the settings menu.

Rename

Sorting data

You can Sort the dimension data using Sort option under Settings menu list. To apply sorting for the data, refer Sort.

Sort Settings

Filtering data

You can apply filters by selecting the filter in settings. For more details, refer to the filter.

Configuring widget filters

Similarly, you can add the Measures and Expressions into the column(s) field.

Adding Row(s)

You can drag and drop the Measure or Dimension into the Row(s) field.

pivot-grid_rowData

You can apply filter and sort option for the rows field, if required.

Adding Multiple Column(s)

If more than one data is added to Column(s) field and then the arrow icon or node is prepended to each cell of the column header. A new tree view list will be opened when the arrow icon is clicked.

Adding Multiple data to Column(s) with single Value(s) and Row(s)

pivot-grid_multipleColumn

Adding Multiple Row(s)

If more than one data is added to Row(s) field and then the arrow icon or node is prepended to each cell of the row header. A new tree view list will be opened when the arrow icon is clicked.

Adding Multiple data to Row(s) with single Value(s) and Column(s)

pivot-grid_multipleRow

Hidden column section

You can drag and drop the elements to Hidden Columns if required. Based on the hidden column elements, the values will be shown.

Tooltip section

You can configure the tooltip section to showcase the additional information in the widget’s tooltip without affecting the visualization. Refer to this section for more details on configuring the tooltip fields.

Removing Data from Field

To remove the added data from fields click the highlighted cross icon.

pivot-grid_valueRemove

Important

Data Limit

  • For now, the pivot grid has a limitation of data up to 10K records.

How to format pivot grid?

Pivot grid can be formatted for better illustration of the view, through the settings available in Properties tab.

To format pivot grid follow the below steps

  1. Drag and drop the pivot grid into canvas and resize it to your required size.

  2. Click on Settings icon and Configure the data from ASSIGN DATA tab as mentioned in previous section, then switch back to PROPERTIES tab.

The property window will be opened.

Property window

You can see the list of properties available for the widget with default value.

General Settings

Name, Subtitle and Description for pivot-grid can be given through these properties.

Pivot grid property Name

Name

This allows you to set title for this pivot-grid widget.

Pivot grid property Name

Subtitle

This allows you to set subtitle for this pivot-grid widget.

Pivot grid property Name

Description

This allows you to set brief explanation about this pivot-grid widget.

Pivot grid property Name

Basic Settings

Basic Settings contains the general property for pivot grid, which includes value sorting, collapsing and expanding nodes state, saving the state of nodes and wrapping the text.

Basic Settings

Show Tooltip

This option allows you to toggle the visibility of tooltip in the pivot grid.

Pivot grid property Name

Allow Value Sorting

If we click the column header, the value field get sorted as ascending or descending when the property Allow Value Sorting is enabled.

pivot-grid_prop-basic-sorting

Expand Nodes by Default

Nodes are expanded by default, if this property’s checkbox is checked.

pivot-grid_prop-basic-nodes

By enabling Expand nodes property, Save Nodes state property will be hidden.

pivot-grid_prop-basic-nodes

Save Nodes State

This property restore the expanded and collapsed state of node even after reloading the dashboard.

Allow Text Wrap

By default, long texts get trimmed in pivot grid. But if the property Allow Text Wrap is enabled, then it displays a wrapped text instead of a trimmed one.

NOTE: If you enable Allow Text Wrap property, Row Height property from content settings will be disabled.

Allow Column Resize

You can resize the pivot grid by dragging the vertical lines of the pivot grid control.

Fit To Content

The columns in the pivot grid can be made to auto-size based on the length of the content of the column.

NOTE: If you enable this property, Column Width, Header Column Width will be disabled.

pivot-grid_prop-basic-nodes

Note: The Virtualization dynamically loads the given data when you scroll down the pivot grid. If any one of these properties (Fit to content, allow text wrap, and allow column resize) is enabled then the virtualization disables. Also, we do not recommend these properties (Fit to content, allow text wrap, and allow column resize) when using a large number of records.

Show Values in Rows

It shows the values in rows.

pivot-grid_prop-basic-nodes

Hide Empty Headers

This option allows you to hide ‘null’ or ‘empty’ headers, if it is present in the pivot grid table.

In the following image, the column headers have ‘(Null)’ values in data.

pivot-grid empty header cell

By enabling this option, the (Null) header column gets hidden.

Pivot-grid empty header cell hidden

Empty Cell Content

This option allows you to set value for the empty cells in the pivot grid.

Pivot-grid empty cell content value

Content Settings

This section allows you to customize the height and width of the pivot grid cells.

pivot-grid-content-settings

Row Height

This option allows you to customize the height of content rows in the pivot grid.

Content Column Width

This option allows you to customize the width of the content columns.

Row Header Width

This option allows you to customize the width of row headers (first column) in the pivot grid.

Pivot grid with default value.

Pivot content settings default

Pivot grid with customized value

Pivot content settings default

Group Bar Settings

This section contains all the property related to group bar (i.e., row and column header), which includes show or hide, sorting and filtering properties for group bar.

pivot-grid_prop-groupBar

Show Group Bar

If this property’s checkbox is unchecked, and then the group bar (i.e., row and column header) is disabled as shown in below image. By checking this property the group bar will be displayed.

pivot-grid_prop-group-show

Allow Sorting

Allow Sorting allows user to enable and disable sorting property for group bar.

pivot-grid_prop-group-sorting

Allow Filtering

Allow Filtering allows user to enable and disable Filtering property for group bar.

pivot-grid_prop-group-filtering

Grand Total Settings

This section contain the show and hide properties for grand and sub totals of rows and columns.

pivot-grid_prop-grandTotal

Show Row Grand Totals

This property allows user to show or hide row’s grand total. The row’s grand total in the below image will be disabled if this property is unchecked.

pivot-grid_prop-grand-row

Show Column Grand Totals

This property allows user to show or hide column’s grand total. The column’s grand total in the below image will be disabled if this property is unchecked.

pivot-grid_prop-grand-column

Show Row Sub Totals

This property allows user to show or hide row’s sub total. The below image is an example for disabled sub total for row.

pivot-grid_prop-grand-subRow

Show Column Sub Totals

This property allows user to show or hide column’s sub total. The below image is an example for disabled sub total for column.

pivot-grid_prop-grand-subColumn

Edit Field Settings

You can edit the field settings.

Edit Field Settings

Edit Field Settings

Show No Data Item

Show No Data Item displays the empty data cell of selected Name from Edit Field Settings. For example, if the ShipCity’s Show No Data Item is checked and then it displays all the empty data points as empty cell similar to the below image.

pivot-grid_prop-edit-noDataItem

In the above image other than Campinas, all other cities have empty data and so it displayed as empty cells.

Alignment Settings

This allows you to align Column header, Row header and Values to either left, right, or center.

pivot-alignment-settings

Row Header - You can align row header to either left, center, or right. By default, it will be Left.

Column Header - You can align column header to either left, center, or right. By default, it will be Left.

Value - You can align Value cells to either left, center, or right. By default, it will be Right.

Formatting

This section explains how to format the pivot grid cells.

Formatting properties

Group panel background color

This allows you to select the color for the group panel’s background. The default value is #e9e9e9.

Group panel background color

Header background color

This allows you to select the color for the header row’s background. The default value is #eeeeee.

Header background color

Header foreground color

This allows you to select the color for the header row’s foreground. The default value is #333333.

Header foreground color

Column representation

You can define the column value represented as simple text or condition-based formatted text. This lists out the columns added to the pivot grid widget.

Columns list

Value

Select value as display type to get the column values represented as it is.

Advance setting

Select Advance setting to configure conditions and apply color to the cells based on that. Click here for more details.

Advanced settings  widget

Pivot Grid as Heatmap

Using the conditional formatting, you can customize the pivot grid as a Heatmap.

pivot grid As Heatmap

How to configure pivot grid as a heatmap

  1. In the properties panel, under the Formatting section select the field name that configured in value, then click the Advanced Setting radio button.

Enable Advanced Settings

  1. Click the Customize button, now the Advanced Setting will open.

Advanced settings applied widget

  1. Customize the colors as per your needs and click the save button.

Advanced Settings

Pivot Grid Datetime Hierarchy Fields

It can be achieved by applying date formatting for configured fields.

Pivot Grid Datetime hierarchy

How to do pivot grid datetime hierarchy

  1. configure the date fields as follows,

Assign Data Section

  1. Click the settings menu icon and select the date format based on the hierarchy.

Assign Data settings menu

  1. Do the same for remaining fields.

Font settings

This section allows you to customize the height and width of the pivot grid content.

Font settings

Pivot grid with auto font-size.

Auto font size

Auto Font Size and Font Size

By default, the auto font size property is enabled. So, the font size of the headers will be rendered based on the resolution. If this property is unchecked, the font size of the header can be customizable.

Header Font settings

Content

Auto Font Size and Font Size

By default, the auto font size property is enabled. So, the font size of the pivot grid content elements will be calculated based on the resolution. If this property is unchecked, the font size can be customizable.

Content Font settings

To configure the linking to URL or dashboard with the widget through its settings. For more details, refer to Linking.

pivot-grid_prop-link

Filter

Filter allows you to apply the filtering based on data field.

Filter

Act as Master Widget

This allows you to define this pivot grid widget as a master widget such that its filter action can be made to listen by other widgets in the dashboard.

Ignore Filter Actions

This allows you to define this pivot grid widget to ignore responding to the filter actions applied on other widgets in dashboard.

Hierarchical Filter

Through this option, you can enable/disable hierarchical top N filtering. While applying Top N filter with multiple dimension columns, the data returned can be customized based on whether the filtering need to be done as flat or based on the hierarchy of dimension columns added.

When Hierarchical Filter option is enabled, the Top N will be applied for each individual column separately based on the number set for each column.

How to apply conditional formatting in pivot grid

In case, if you have the requirement to highlight any data based on some conditions, you might be required to enable the advanced formatting option.

How to enable advanced formatting

  1. In the properties pane, under the Formatting section, click the Advanced Setting radio button.

Enable advance settings

  1. This will open the Conditional Formatting dialog.

Conditional formatting window

  1. Select the mode and enter the conditions as required and click the Save button to apply.

  2. Now, the widget visualization will be updated based on the conditions.

Widget after applying  conditions

Refer to the following sections for the detailed steps on using the Gradient and Rule modes.

Gradient mode

You can customize the background color of the pivot grid cells using the gradient based conditional formatting. This is the default mode.

Based on field

The configured value fields. Based on field option cannot be changed in the conditional formatting dialog.

Summary type

The summary type of the configured value field.

Low, mid, and high values

You can define your range by entering the low, mid, and high values.

NOTE: It is optional, if no value is entered then the ranges will be auto calculated based on the minimum and maximum values from the data source.

Rule based condition mode

This allows you to customize the cell colors and value font style of the pivot grid cells based on one or more numerical / text conditions.

Rule mode

Condition name

You can give a meaningful name to the applied conditions.

Condition type

Choose the condition for measure field from the highlighted conditions.

Condition type

Value

You can mention the condition value.

Foreground

Allows you to define the pivot grid cell foreground for this condition.

Background

Allows you to define the pivot grid cell background for this condition.

Font style

Allows you to choose the title font style. (Bold, Italic, Underline, and Superscript).

Add condition

Click Add Condition to specify add new condition.

Add condition

Delete condition

Click the delete button to remove the existing condition.

Delete condition

Container appearance

Container Appearance

Title alignment

This allows you to handle the alignment of widget title to either left, center, or right.

Title color

This allows you to apply the text color to the widget title.

Title Auto Font Size

On enabling Auto Font Size, the font size of the title will be adjusted automatically if the resolution of the screen varies.

Font Size

This allows you to apply the specified font size to the widget title, if the Title Auto Font Size is disabled. The value can range between 10 and 44.

Subtitle Auto Font Size

On enabling Auto Font Size, the font size of the subtitle will be adjusted automatically if the resolution of the screen varies.

Font Size

This allows you to apply the specified size of the font to the widget title if the Subtitle Auto Font Size is disabled. The value can range between 10 and 32.

Auto Padding

On enabling Auto Padding, the padding of the widget container will be adjusted automatically if the size of the widget varies.

Padding

This allows you to customize the padding of the widget container if the Auto Padding is disabled. Value can be between 0 and 25.

Show Border

This allows you to toggle the visibility of the border surrounding the widget.

Corner Radius

This allows you to apply the specified radius to the widget corners if the Show Border is enabled. The value can range between 0 and 10.

Transparency

You can change the transparency from 0 to 1.

Show Shadow

This allows you to toggle the visibility of the shadow surrounding the widget.

Container actions

Container Actions

Show header

This allows you to enable or disable the widget title of the pivot grid.

Allow maximize view

This allows you to enable or disable the maximized mode of the pivot grid. The visibility of the maximize icon in the widget header will be defined based on the setting in the viewer.

Allow CSV export

This allows you to enable or disable the CSV export option for the pivot grid. Enabling this allows you to export the summarized data of the widget view to CSV format in the viewer.

Allow Excel export

This allows you to enable or disable the Excel export option for the pivot grid. Enabling this allows you to export the summarized data of the widget view to (.xlsx or .xls) format in the viewer.

Allow image export

This allows you to enable or disable the image export option for the pivot grid. Enabling this allows you to export the view of the widget to image format (.jpg), (.png), or (.bmp) in the viewer.

Allow PDF export

This allows you to enable or disable the PDF export option for the pivot grid. Enabling this allows you to export the view of the widget to pdf format in the viewer.

Enable comments

This allows you to enable or disable comment for the dashboard widget. For more details, refer to this link.

Allow Viewing of underlying data

This allows you to visualize the raw data associated with a widget at runtime.

Pin widget

This allows you to pin the widget.

Blog Post – https://www.boldbi.com/blog/7-unique-features-of-pivot-table

Contents
Contents