Saving the report

You can save your current report and load it later with all your settings: slice, formats, filters, sorting, conditions, and options.

To save the report via UI

Click the Save button () on the Toolbar.

The report will be saved to your local file system in JSON format. Later you can open this report in WebDataRocks and see your previous configurations on the grid.

Here’s a demo showing how to save a report via the Toolbar:

To save the report programmatically

Use the save() method:

webdatarocks.save();

The saved report will contain only the configurations you’ve explicitly defined. To save the report with default or global configurations, see the next section.

Saving the report with default and global configurations

The save() method has parameters that allow you to save the report:

With global configs
With default configs
With global and default configs

Now let’s have a look at each of these approaches in detail. For simplicity, we’ll focus on how options are saved, but data source and slice configs are saved similarly.

With default configs

How to save. Run the save() method with the withDefaults option:

webdatarocks.save({
  withDefaults: true
});

How it works. Let’s define the following report:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.json"
    },
    options: {
      grid: {
        type: "flat",
        showHeaders: false
      },
      configuratorActive: true
    }
  },
});

As you can see, we’ve defined only a few options in the report. Now if we save this report with default configs, we’ll see more options in the saved file:

{
 "dataSource": {
   // Data source configs
 },
 "slice": {
   // Slice configs
 },
 "options": {
   "grid": {
     "type": "flat",
     "title": "",
     "showFilter": true,
     "showHeaders": false,
     "showTotals": "on",
     "showGrandTotals": "on",
     // Other grid options
   },
   "configuratorActive": true,
   "configuratorButton": true,
   "showAggregations": true,
   "showCalculatedValuesButton": true,
   "drillThrough": true,
   "showDrillThroughConfigurator": true,
   // Other general options
 }
}

Notice that the options.grid.type, options.grid.showHeaders, and options.configuratorActive properties have values that we’ve set manually, whereas their default values are different — check them in the Options Object.

You can also check default values for the Slice Object and Data Source Object.

With global configs

How to save. Run the save() method with the withGlobals option:

webdatarocks.save({
  withGlobals: true
});

How it works. Let’s configure the component as follows:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.json"
    },
    options: {
      grid: {
        type: "classic"
      },
      configuratorActive: false
    }
  },
  global: {
    options: {
      grid: {
        type: "flat",
        showHeaders: false
      },
      configuratorActive: true
    }
  }
});

We have defined global options, and some of them are overwritten in the report.

Now if we save this report with global configs, we’ll see the following options section in the saved file:

{
  "dataSource": {
    // Data source configs
  },
  "slice": {
    // Slice configs
  },
  "options": {
    "grid": {
      "type": "classic",
      "showHeaders": false
    }
  }
}

If we compare the initial configurations and the saved report, we’ll learn the following:

If a configuration is defined globally and not defined in the report, the global value will be saved to the report (see the grid.showHeaders option in the example).
If a configuration is defined both globally and in the report, the global value is ignored (see the grid.type option in the example).
If a global configuration is overwritten in the report, but its new value matches its default value, the configuration is not included in the saved report (see the configuratorActive option in the example).

With default and global configs

How to save. Run the save() method with the withDefaults and withGlobals options:

webdatarocks.save({
  withDefaults: true,
  withGlobals: true
});

How it works. This approach is a combination of the previous approaches. For example, let’s save the following report with defaults and globals:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.json"
    },
    options: {
      grid: {
        type: "classic"
      },
      configuratorActive: false
    }
  },
  global: {
    options: {
      grid: {
        type: "flat",
        showHeaders: false
      },
      configuratorActive: true
    }
  }
});

The saved file will look similar to the following:

{
  "dataSource": {
    // Data source configs
  },
  "slice": {
    // Slice configs
  },
  "options": {
    "grid": {
      "type": "classic",
      "title": "",
      "showFilter": true,
      "showHeaders": false,
      "showTotals": "on",
      "showGrandTotals": "on",
      // Other grid options
    },
    "configuratorActive": false,
    "configuratorButton": true,
    "showAggregations": true,
    "showCalculatedValuesButton": true,
    "drillThrough": true,
    "showDrillThroughConfigurator": true,
    // Other general options
  }
}

As you can see from the saved report:

The grid.showHeaders option is not overwritten in the report, so it has its global value (false).
The grid.type option is overwritten in the report, so its global value is ignored (grid.type is "classic", not "flat").
All other options have their default values, thanks to the withDefaults: true.

To show or hide grand totals and subtotals

Via UI
1. Go to the Options () tab on the Toolbar.
2. Choose how to display grand totals and subtotals.
3. Apply the changes.
Programmatically
- Configure totals through the grid.showTotals property of the Options Object:
```
report: {
  options: {
    grid: {
      showTotals: "off"
    }
  }
}
```
- Configure grand totals through the grid.showGrandTotals property of the Options Object:
```
report: {
  options: {
    grid: {
      showGrandTotals: "rows"
    }
  }
}
```
It is also possible to set grid.showTotals and grid.showGrandTotals options for all reports.

Example

Hide grand totals from the entire report:

Hide grand totals from the rows:

The layout of subtotals is changed similarly.

You can change the default size of the cells with a few clicks.

To resize the rows and columns

Drag the header border of the row/column to resize its height/width.
Drag the header border of the row to resize its height.

Example

Resize the columns widths:

To return the cells to the initial size, click twice on the header of the row or column:

You can change the default number formatting of the report. WebDataRocks offers many options for formatting your numerical data such as:

Align of the text
Thousand and decimal separators
Quantity of decimal places
Currency symbols
Currency align
Null (default) value
Percent formatting

To format numbers

Go to the Format tab () on the Toolbar.
Select Format cells.
Select the value which formatting should be changed.
Set the properties of formatting.
Apply the changes.

Use the conditional formatting feature to highlight important values and make your report look more personalized.

To apply conditional formatting

To implement your own logic of highlighting the data, follow the steps below:

On the Toolbar, choose the Format tab () > Conditional formatting.
Select the plus-sign icon.
Choose a value that you want to format (e.g., Sum of Price). If necessary, you can format all values at once.
Add a rule; for example, “Less than 100” will apply the changes to all the cells with a value less than 100.
Select colors for the text and background, and change the font if necessary.
Press the Apply button to see the changes on the grid.

You can add multiple conditions of formatting to the same measure. All of them are saved within a Conditional Format Object.

Use the drill-through feature to see from which non-aggregated records the value in the cell is composed.

To drill through the cell

Double-click the cell.
Look through all the information about the cell in the drill-through pop-up window.

To specify what information to show in the drill-through view, open the Field List ().

Note that if you change the values in the drill-through pop-up window, the changes are not applied to the values from the initial grid. They are “view-only”.

In WebDataRocks Pivot Table, data can be displayed in aggregated views or as a simple table. You can switch between three standard layouts to display the report data differently:

Compact pivot table – neat and concise data presentation.
Classic pivot table – an Excel-like layout.
Flat table – a simple grid with non-aggregated data.

Compact form

The compact pivot table form is enabled by default. This layout helps keep your data in a neat and concise style.

Features:

Compact form enhances the readability of the report.
If the rows contain more than one field, the members of the inner field can be expanded and collapsed by clicking on the outer field’s member name.
If the members of the field in the rows are expanded, they are placed one under the other, without being transferred to a separate column.
If the members of the field in the columns are expanded, they are placed in a separate row.
Subtotals are shown at the end of each row in a separate column.
Grand totals are placed at the bottom in a separate row.

Classic form

The classic pivot table form suits perfectly those who would like to have an Excel-like user experience.

Features:

If the rows contain more than one field, the members of the inner field can be expanded and collapsed by clicking on the outer field’s member name.
If the members of the field in the rows are expanded, they are placed in a separate column. It is the main feature that distinguishes the classic layout from the compact one.
If the members of the field in the columns are expanded, they are placed in a separate row.
Subtotals are shown in a separate row after each hierarchy in the rows.
Grand totals are placed at the bottom in a separate row.

Flat form

The flat table is a raw data view, which reflects the data’s original structure. It’s the simplest form among the others.

Features:

The data is shown without aggregation.
Each field is placed in a separate column.
Grand totals are placed in the first row.

To change the grid form

Via UI
1. Go to the Options tab () on the Toolbar.
2. Select the form of your choice.
3. Apply the changes.
Programmatically
Set a grid layout through the grid.type property of the Options Object:
```
report: {
  options: {
    grid: {
      type: "classic"
    }
  }
}
```
It is also possible to set the grid.type option for all reports.

To see the most relevant information first, apply sorting to the field members or values on the grid.

Sorting in the pivot table

In the pivot table, you can sort by values and by members.

Sorting by values

To sort by values in the pivot table:

Hover over a member name or a total cell and click the arrow icon that appears to sort the records descending.
Click again to sort ascending.

To remove sorting by values:

Right-click the member name to open the context menu.
Select the Clear sorting option.

Sorting by members

To sort members on the grid:

Open the field config pop-up window by clicking the gear icon () near the field caption.
Choose the ascending or descending order using sorting controls. By default, members are sorted in ascending (AZ) order.
Click the APPLY button to close the field config pop-up window and see the sorted members on the grid.

To remove sorting by members:

Open the field config pop-up window by clicking the gear icon () near the field caption.
Deselect an active sorting control to display the members unsorted (i.e., in the same order as they come inside the data source).
Сlick the APPLY button to close the field config pop-up window and see the result.

Sorting in the flat view

In the flat view, you can sort by values:

Hover over a field name and click the arrow icon that appears to sort the records descending.
Click again to sort ascending.

Use the filtering feature to focus on the important subsets of your data and display only those rows and columns that satisfy certain conditions.

WebDataRocks supports three types of filters:

Filtering by member names. Use it to show the values of the specific members.
Filtering by values, also known as the Top/Bottom X filter. Use it to keep records within a specified range (with values higher or lower than a specified number).
A report filter. Use it to apply filtering to the entire report.

To apply a filter by member names

Open the field config pop-up window by clicking the gear icon () near the field caption.
Select the members to be displayed or deselect them to be hidden from the grid.
To close the field config pop-up window and see the changes, click the APPLY button.

If you have a large list of hierarchy members, use the search option:

Start typing the member’s caption in the search box.
Select the check box of the member you are searching for.
Click the APPLY button to see the filtered data.

To apply a filter by value

Open the field config pop-up window by clicking the gear icon () near the field caption.
Select the Top 10 button.
Select the Top or Bottom button to show the results with the lowest or the highest values, respectively.
Enter the number of top or bottom results to show.
Select the measure on which the filtering is based.
Click the APPLY button to close the field config pop-up window and see the filtered data.

To apply a report filter

Go to the Fields () tab.
Drag the fields to the Report Filters area.
Click APPLY to add report filters and close the Field List.

The separate tabs of the report filters appear above the grid. Click on them and choose the members based on which the data on the grid will be filtered. Then, click the APPLY button to apply the filters to the report.

The main idea of the calculated values lies in giving a more complete picture of your data by measuring your data in a custom way.

To create a calculated value, define an expression on which the values are calculated and apply it to your data. It serves as a new aggregation function that you can change or delete at any moment.

Moreover, multiple calculated values can be created within one report.

To add a calculated value

Go to the Fields tab () on the Toolbar.
Click the Add calculated value button.
Type in the name of a formula in the input field.
Choose the fields to include in the formula, the aggregation functions to apply to these fields, and add the necessary operators.
Apply the changes.

NOTE: the Count and Unique Count functions can be applied only to the string fields.

Example

Let’s define a new Revenue measure. It is composed of Price and Quantity fields (Price * Quantity).

Type in a name of a new calculated value.
Drag the fields to the Formula area and add a multiplication operator to compose a product of two values.
Apply the changes. Now the new calculated value is placed at the bottom of the list. Drop it to the Values area to add it to the report.

All calculated values are saved in the measures of the report’s slice.

To edit a calculated value

Go to the Fields tab () on the Toolbar.
Find the calculated value in the All fields box.
Click the Sigma editing button () next to the value’s name.
Edit the calculated value.
Apply the changes.

To remove a calculated value

Go to the Fields tab () on the Toolbar.
Find the calculated value in the All fields box.
Click the Sigma editing button () next to the value’s name.
Click the Remove button (✕).
Confirm the action.

Individual values

Note that there is the Calculate individual values checkbox. If it is checked, the formula is calculated based on the raw values. Otherwise, it is calculated using the aggregated values.

Find out the difference between the calculated and calculated individual values in the demo.

Move up

Saving the report

To save the report via UI

To save the report programmatically

Saving the report with default and global configurations

With default configs

With global configs

With default and global configs

See also

To show or hide grand totals and subtotals

Example

To resize the rows and columns

Example

To format numbers

To apply conditional formatting

To drill through the cell

Compact form

Classic form

Flat form

To change the grid form

Sorting in the pivot table

Sorting by values

Sorting by members

Sorting in the flat view

WebDataRocks supports three types of filters:

To apply a filter by member names

To apply a filter by value

To apply a report filter

To add a calculated value

Example

To edit a calculated value

To remove a calculated value

Individual values