Back to homepage

Aggregation functions

Aggregation functions group together values from multiple fields to form a single compound value. To choose an aggregation function for a value, use the Field List.

WebDataRocks Pivot Table offers 17 aggregation functions which you can apply to the measures in your report:

This article explains how to define which data is shown on the grid using the Field List. Each field can be selected to rows, columns, values, or report filters.

To select the fields in the Field List

• Go to the Fields tab () on the Toolbar.
• Pay attention to the All Fields section on the left. It contains all fields from your data source.
• Drag and drop the fields to the Rows, Columns, Values, and Report Filters areas.
• To change the aggregation for a field in the Values box, press the Edit button () next to its name.
• Use the Add calculated value button to compose new values based on your data source.
• Click the APPLY button to close the Field List and see the changes on the grid.

Try it yourself:

To show certain fields when loading data

1. Configure your fields using the Field List.
2. Save your current configuration and apply it when loading a new report. For more details, see Loading the report.

Want to check how is the field configuration defined in the report? Find the slice section in our online demo.

See also

• Slice Object
• runQuery()
• getAllHierarchies()
• getAllMeasures()

This tutorial shows how to integrate the WebDataRocks reporting tool with the React framework. You can also run our sample project from GitHub.

Prerequisites

• Node.js

Step 1. Create a project (optional)

If you don’t have a React application yet, create one. In this guide, we’re using Vite to create a project:

npm create vite@latest my-app -- --template react
cd my-app
npm install

npm create vite@latest my-app --template react
cd my-app
npm install

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

npm create vite@latest my-app --template react-ts
cd my-app
npm install

Step 2. Get WebDataRocks

Install the WebDataRocks React wrapper from npm:

npm install @webdatarocks/react-webdatarocks

Step 3. Include WebDataRocks

Step 3.1. Add WebDataRocks styles to the src/index.css file:

@import "@webdatarocks/webdatarocks/webdatarocks.css";

Step 3.2. Import WebDataRocksReact to the src/App.jsx file (src/App.tsx for React + TypeScript):

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

Step 3.3. In src/App.jsx (src/App.tsx for React + TypeScript), add WebDataRocks using the WebDataRocksReact.Pivot component:

function App() {
  return (
    <div>
      <WebDataRocksReact.Pivot 
         toolbar={true}
      />
    </div>
  );
}

export default App

Step 4. See the result

Run your application:

npm run dev

Open http://localhost:5173/ in the browser — WebDataRocks is embedded into your React project.

You can shut down the app with Ctrl + C.

Important WebDataRocks.Pivot is not compatible with <StrictMode>. If needed, disable <StrictMode> for the parts of the project where WebDataRocks is used.

Integrate WebDataRocks in a React/JSX project

This sample shows how to integrate WebDataRocks Pivot Table with the React/JSX application.

See also

• How to connect to JSON data source
• How to connect to CSV data source
• How to use the Toolbar

After reading how to apply predefined themes to the component, the next step is to create a custom theme:

• Create a theme using the custom theme builder
• Create a theme manually

Create a theme using the custom theme builder

Our custom theme builder is a tool to help you create themes for WebDataRocks. Here is how to use it:

Step 1. Download or clone the custom theme builder from GitHub:

git clone https://github.com/WebDataRocks/custom-theme-builder
cd custom-theme-builder

Step 2. Install npm packages with the npm install command.

Step 3. Go to the theme builder’s folder and open webdatarocks.less — a file with WebDataRocks’ styles. Customize them by setting your colors and fonts as variables’ values.

Step 4. Run the theme builder to get CSS files with your theme:

npm start

After the files are generated, you can find them in the custom‑theme‑builder/generated‑theme/ folder.

Step 5. Include your newly created theme to a file where you embed WebDataRocks:

<link rel="stylesheet" type="text/css"
 href="custom-theme-builder\generated-theme\webdatarocks.min.css"
/>

Now open WebDataRocks in the browser — the component is styled with your custom theme.

Create a theme manually

Step 1. Open the webdatarocks/theme/ folder, create a new folder inside, and name it respectively to the name of your theme, e.g., original‑theme/.

Step 2. Copy the contents of any predefined theme folder (e.g., lightblue/) to the original‑theme/ folder.

Step 3. Now you need to replace theme colors with your custom ones. There are two possible approaches:

Approach #1 We recommend using Less – it’s a language extension for CSS. Less allows quick setting the values to several variables which later are compiled into CSS code. WebDataRocks provides Less source code available in the webdatarocks.less file of each theme.

Choose colors that you want to apply and set them inside the webdatarocks.less file from the original‑theme/ folder. Having replaced the necessary colors, you need to compile webdatarocks.less into webdatarocks.css and webdatarocks.min.css. Read how to do it in Less documentation. You need to install an npm package manager previously.

Approach #2 Of course, you can also edit colors right inside webdatarocks.css from your theme’s folder. However, we don’t recommend this approach – it complicates the updating of your own theme when the updates are made in the component’s CSS.

Step 4. Now include the reference to CSS or minified CSS. Then your new theme will be applied to the pivot table.

<link rel="stylesheet" type="text/css" href="theme/original-theme/webdatarocks.css" />

Example

Let’s make a custom turquoise theme. Our main color will be #48D1CC. It’s a medium turquoise color. For light and dark shades we choose #AFEEEE and #00CED1 respectively. We suppose you’ve already created a new folder with theme files. Name it turquoise/. Find the next lines of code in theme/turquoise/webdatarocks.less:

/* ===== theme colors ===== */
@theme-color: #03A9F4;
@theme-color-dark: #039BE5;
@theme-color-superdark: #039BE5;
@theme-color-midlight: #03A9F4; //not used
@theme-color-light: #03A9F4; //not used
@theme-color-superlight: #E1F5FE;
@theme-color-supersuperlight: #F3FAFD;

And change them to:

@theme-color: #48D1CC;
@theme-color-dark: #00CED1;
@theme-color-superdark: #00CED1;
@theme-color-midlight: #03A9F4;
@theme-color-light: #edfffe;
@theme-color-superlight:   #AFEEEE;
@theme-color-supersuperlight: #e0ffff;

Then find where the grid colors are:

/* ===== grid ===== */

and change 

@grid-selection-canvas-color: rgba(121, 204, 255, 0.2);

to

@grid-selection-canvas-color: rgba(175, 238, 238, 0.2);

Now compile Less file to CSS and minified CSS.

Update and enjoy the new theme!

WebDataRocks offers customization of the pivot table.

It’s useful if you want to enhance the Look & Feel of your web reporting tool and make the visitors’ interaction with your website a more pleasant experience.

WebDataRocks goes with a set of eight predefined themes:

• Dark
• Default
• Light blue
• Orange
• Teal
• Green
• Striped-Blue
• Striped-Teal

How to change the theme

Step 1. Include the CSS file

All files with themes are located in  webdatarocks/theme/ folder. If you don’t specify a theme, a component will use the default one.

Firstly, open the code of a page where the component is placed. Include to a <head> section the <link> element with a reference to a minified CSS file of the theme you like.

In our sample, we’ve chosen the Light blue theme:

<link rel="stylesheet" type="text/css"
href="https://cdn.webdatarocks.com/latest/theme/lightblue/webdatarocks.css" />

In case you want to create a custom theme, turn to the detailed tutorial on custom report themes.

Step 2. Update the webpage

Save the applied results and reload the page to see how your pivot table looks now.

Example

Applying the Light blue theme to the pivot table:

See also

• Custom component themes

This tutorial shows how to integrate the WebDataRocks reporting tool with the Angular framework. WebDataRocks wrapper is Ivy-compatible and works with Angular 5 or later.

You can also run our sample project from GitHub.

Prerequisites

• Node.js
• Angular CLI

Step 1. Create a project (optional)

If you don’t have an Angular application yet, create one by running the following commands in the console:

ng new PROJECT-NAME --ssr=false
cd PROJECT-NAME

Step 2. Get WebDataRocks

Install the WebDataRocks Angular wrapper from npm:

npm install @webdatarocks/ngx-webdatarocks

This wrapper is Ivy-compatible and works only for Angular 14 and later. To integrate WebDataRocks with Angular 5 through 15, install the @webdatarocks/ng-webdatarocks wrapper.

Step 3. Include WebDataRocks

Step 3.1. Import the WebDataRocksPivotModule into the component where you need the pivot table (e.g., src/app/app.component.ts):

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css"
})
export class AppComponent {
  // ...
}

If you are using NgModules, import the WebdatarocksPivotModule into your NgModule (e.g., src/app/app.module.ts):

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    WebdatarocksPivotModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3.2. Add WebDataRocks styles to the src/styles.css file:

@import "@webdatarocks/webdatarocks/webdatarocks.min.css";

Step 3.3. Open src/app/app.component.html and add WebDataRocks there using the app-wbr-pivot tag:

<app-wbr-pivot 
 [toolbar]="true">
</app-wbr-pivot>

Step 4. See the result

Run your application:

ng serve --open

Open http://localhost:4200/ in the browser — WebDataRocks is embedded into your Angular project.

You can shut down the app with Ctrl + C.

See also

• How to connect to JSON data source
• How to connect to CSV data source
• How to use the Toolbar

AngularJS is a popular MVW framework provided by Google. Our tutorial explains how to integrate the WebDataRocks reporting tool with the AngularJS framework in your application.

Step 1. Include Angular

Open your HTML file and add a simple AngularJS app inside.

<!DOCTYPE html>
<html>
<head>
    <title>WebDataRocks and AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script type="text/javascript">angular.module("App", [ ]);</script>
</head>
<body>
	<div ng-app="App"></div>
</body>
</html>

Step 2. Add WebDataRocks dependencies

Add WebDataRocks dependencies to the <head> section of your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>WebDataRocks and AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script type="text/javascript">angular.module("App", [ ]);</script>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
</head>
<body>
	<div ng-app="App"></div>
</body>
</html>

Step 3. Initialize the pivot grid

Add webdatarocks module to App and use wbr-pivot directive to add pivot table to the HTML file. Please pay attention to attributes for wbr-pivot directive: wbr-toolbar is used to add the Toolbar, wbr-report — to specify the report.

<!DOCTYPE html>
<html>
<head>
    <title>WebDataRocks and AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script type="text/javascript">angular.module("App", ["webdatarocks"]);</script>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
</head>
<body>
    <div ng-app="App">
        <div wbr-pivot 
         wbr-toolbar="true" 
         wbr-report="{
           dataSource: {
             filename: 'https://cdn.webdatarocks.com/data/data.csv'
           }
         }">
        </div>
    </div>
</body>
</html>

Now your AngularJS application is successfully integrated with WebDataRocks reporting tool. Open live demo.

Attributes for the wbr-pivot directive

Each attribute can be either a string or an AngularJS variable. Here is the list of available attributes:

• wbr-toolbar – adds the Toolbar when set as "true".
• wbr-report – specifies a path to your report file. Also, can be used to set JSON object containing the report.
• wbr-width – sets width of the component (in pixels or percent). The default value is 100%.
• wbr-height – sets height of the component (in pixels or percent). The default value is 500.
• wbr-global – presets options for all reports, for example, you can predefine one data source for all reports.
• wbr-customize-cell – allows cells customization. Should be used the following way: wbr-customize-cell="customizeCellFunction(cell, data)". customizeCellFunction is your custom function, which receives cell representation on the grid (cell) and information about the cell (data).
• wbr-report-complete – handles the reportcomplete event. This event is fired when the report is successfully loaded into WebDataRocks. Should be used the following way: wbr-report-complete="onReportComplete()". onReportComplete is your custom function, which performs necessary actions.
• wbr-report-change – handles the reportchange event. This event is fired when the report of the pivot table is changed. Should be used the following way: wbr-report-change="onReportChange()". Define the scenario of actions after the report is changed in the onReportChange function.
• wbr-update – handles the update event. This event is fired when the data is loaded into the component and the data in the slice is updated, filtered or sorted. Should be used the following way: wbr-update="onUpdate()". Define the scenario of actions after the report is changed in the onUpdate function.
• wbr-cell-click – handles the cellclick event. This event is fired when the cell on the grid is clicked. Should be used the following way: wbr-cell-click="onCellClick(cell)". Define the necessary actions after the one-click interaction with cell in the onCellClick(cell) function.
• wbr-cell-double-click – handles the celldoubleclick event. This event is fired when the cell on the grid is double-clicked. Should be used the following way: wbr-cell-double-click="onCellDoubleClick(cell)". Define the necessary actions after the double-click interaction with cell in the onCellDoubleClick(cell) function.

Examples

Our pivot table can easily be translated into different languages. This article describes the process of language localization for WebDataRocks reporting component.

Available localizations

• English (default)
• German
• Spanish
• Italian
• Brazilian Portuguese
• Chinese
• Turkish

Localization files for new languages can be added by creating a new pull request on GitHub. Our team highly appreciates any help.

Create a custom localization file

Follow the steps below to create your own localization file based on our template:

Step 1. Download template JSON file. It contains all labels that are used in WebDataRocks and English values for them.

Step 2. Translate values into the language you want.

For example, you want a Spanish localization. You start from replacing the first label-value pair from the template ("flatHierarchyBox": "Select and arrange columns") with its Spanish equivalent ("flatHierarchyBox": "Seleccionar y organizar columnas") and keep on the same way with the whole file (e.g., check Spanish translated sample).

Localize a specific report

To set a specific language for a report, add a report.localization property with the necessary localization:

report: {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace this file with your own localization file
  localization: "https://cdn.webdatarocks.com/loc/es.json"
}

report: {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace the translation below with your own labels
  localization: {
    toolbar: {
      connect: "Conectar",
      open: "Abierto",
      save: "Salvar",
      export: "Exportar",
      // Other labels
    }
  }
}

Set localization for all reports

If you want to set one language for all reports, add a global object with localization when initializing WebDataRocks:

let pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    // Your report
  },
  global: {
    // Replace this file with own localization file
    localization: "https://cdn.webdatarocks.com/loc/es.json"
  }
});

let pivot = new WebDataRocks({
  container: "#pivotContainer",
  report: {
    // Your report
  },
  global: {
    // Replace the translation below with your own labels
    localization: {
      toolbar: {
        connect: "Conectar",
        open: "Abierto",
        save: "Salvar",
        export: "Exportar",
        // Other labels
      }
    }
  }
});

Open a live demo.

Learn more about the Global Object.

Our reporting tool comes with the Toolbar, which gives you access to the most useful features. This article explains how to use the Toolbar.

Show the Toolbar

By default, the Toolbar is hidden in WebDataRocks.

To show the Toolbar, follow the steps below:

Step 1. Include the webdatarocks.toolbar.min.js file to the webpage:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>

Step 2. Specify the toolbar: true parameter when creating a WebDataRocks instance:

let pivot = new WebDataRocks({
    container: "#pivotContainer",
    toolbar: true
});

Hide the Toolbar

If you want to display the component without the Toolbar, you can remove toolbar: true from your code or set the toolbar parameter to false:

let pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: false
});

Available functionality

The Toolbar contains the following tabs:

Specifics of the Toolbar on mobile devices

If you are using WebDataRocks on a mobile device, the mobile version of the Toolbar with a different set of tabs will be shown. For example, instead of the Connect tab, you will see CSV and JSON tabs.

To switch to the desktop Toolbar version on your mobile device, you can request the desktop site in the browser settings.

Adjust the Toolbar to your needs

You can customize the standard view and functionality of the Toolbar (e.g., add new tabs or remove the ones you don’t need). If you are interested in such an option, follow this tutorial: Customize the Toolbar.

See also

• beforetoolbarcreated
• Customizing the Toolbar
• Changing component theme
• Language localization

This tutorial shows how to create your first JavaScript project with the WebDataRocks reporting tool.

Step 1. Get WebDataRocks

You can get WebDataRocks in one of the following ways:

npm install @webdatarocks/webdatarocks

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<link href="https://cdn.webdatarocks.com/1.0.0/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/1.0.0/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/1.0.0/webdatarocks.js"></script>

Step 2. Create a WebDataRocks pivot table

Step 2.1. Depending on how you have downloaded WebDataRocks, import it into your project:

import WebDataRocks from "@webdatarocks/webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.min.css";

<link href="webdatarocks.min.css" rel="stylesheet"/>
<script src="webdatarocks.toolbar.min.js"></script>
<script src="webdatarocks.js"></script>

Step 2.2. In your HTML file, add a container for WebDataRocks:

<div id="pivotContainer"></div>

Step 2.3. Create a WebDataRocks instance:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  toolbar: true,
});

Step 3. See the result

Open the created webpage in the browser — WebDataRocks is embedded and ready to be used.

You can see how code from this guide works in our live demo on CodePen.

See also

• How to connect to JSON data source
• How to connect to CSV data source
• How to use Toolbar