Technical specifications
| Feature | Availability |
|---|---|
| – Grid | |
| Virtual grid that ensures smooth rendering and scrolling the rows | |
| Sort the members of the rows and columns | |
| Sort by values | |
| Drag and drop the hierarchies on the grid | |
| Drill through the cells | |
| Drill the hierarchies up and down | |
| Expand and collapse the hierarchies on the grid | |
| Resize the rows and columns on the grid | |
| Grand totals and subtotals | |
| Compact pivot table | |
| Classic pivot table | |
| Flat table | |
| Add multiple fields to the rows | |
| Add multiple fields to the columns | |
| Add multiple fields to the measures | |
| Create multilevel hierarchies | |
Select the string field as a measure (with count or distinctcount aggregation applied) |
|
| Select cells | |
| Copy selected cells | |
| Keyboard shortcuts to navigate on the grid | |
| Highlight the rows and columns via the conditional formatting | |
| – Filter | |
| Filter by members using the checkbox | |
| Filtering by members using the search input box | |
| Filtering by value (Top X records) | |
| Filtering by value (Bottom X records) | |
| Report filters | |
| – Fields | |
| Adding and editing calculated values via UI | |
| Dragging fields in the Field List | |
| Displaying hierarchy levels in the Field List | |
| The Expand All option in the Field List | |
| The Field List in the drill-through pop-up window | |
| – Aggregation functions | |
| “sum” | |
| “count” | |
| “distinctcount” | |
| “average” | |
| “median” | |
| “product” | |
| “min” | |
| “max” | |
| “percent” | |
| “percentofcolumn” | |
| “percentofrow” | |
| “index” | |
| “difference” | |
| “%difference” | |
| “stdevp” (Population Standard Deviation) | |
| “stdevs” (Sample Standard Deviation) | |
| “runningtotals” | |
| – The Toolbar | |
| Save a report | |
| Open a report | |
| Conditional formatting | |
| Number formatting | |
| Connect to a CSV data source | |
| Connect to a JSON data source | |
| Full-screen mode | |
| – Export | |
| Print reports | |
| Export reports to HTML | |
| Export reports to MS Excel | |
| Export reports to PDF | |
| Add custom headers and footers (PDF, HTML) | |
| Add custom sheet names (Excel) | |
| – Options | |
| Language localization | |
| Apply a pre-defined report theme | |
| Date and time patterns | |
| – Integration with charting libraries | |
| amCharts | |
| Highcharts | |
| Google Charts | |
| FusionCharts | |
| Any charting library | |
| – Integration with frameworks and web technologies | |
| React | |
| Angular | |
| Vue | |
| Django | |
| Jupyter | |
| Flutter | |
| jQuery | |
| AngularJS |
Options available for developers:
| Feature | Availability |
|---|---|
| – General options | |
| Show or hide the Toolbar | |
| Show or hide the Field List | |
| Open or close the Field List via UI or API | |
| Show or hide the aggregation selection control in the Field List | |
| Show or hide the “Add calculated value” control in the Field List | |
| Enable or disable the drill-through feature | |
| Configure a slice in the drill-through pop-up window | |
| Show or hide the Field List in the drill-through pop-up window | |
| Show or hide the sorting controls | |
| Enable a default slice for the component | |
| Set a default sorting type for the hierarchy members: “asc”, “desc” or “unsorted” | |
| Change the aggregation labels via localization | |
| Define data types in CSV | |
| Define data types in JSON | |
| Different field separators for CSV | |
| Set global options for all reports | |
| Customize the Toolbar | |
| Define custom report themes | |
| Customize the context menu | |
| Expand or collapse all hierarchy members via API | |
| – Grid options | |
| Set the grid form. Possible values are: “compact”, “classic”, “flat” | |
| Set the grid title | |
| Show or hide the filtering controls | |
| Show or hide spreadsheet headers | |
| Show or hide subtotals | |
| Show or hide grand totals in the rows and/or columns | |
| Show or hide the hierarchy captions | |
| Show or hide report filters on the grid |
| Feature | Availability |
|---|---|
| – Grid | |
| Virtual grid that ensures smooth rendering and scrolling the rows | |
| Sort the members of the rows and columns | |
| Sort by values | |
| Drag and drop the hierarchies on the grid | |
| Drill through the cells | |
| Drill the hierarchies up and down | |
| Expand and collapse the hierarchies on the grid | |
| Resize the rows and columns on the grid | |
| Grand totals and subtotals | |
| Compact pivot table | |
| Classic pivot table | |
| Flat table | |
| Add multiple fields to the rows | |
| Add multiple fields to the columns | |
| Add multiple fields to the measures | |
| Create multilevel hierarchies | |
Select the string field as a measure (with count or distinctcount aggregation applied) |
|
| Select cells | |
| Copy selected cells | |
| Keyboard shortcuts to navigate on the grid | |
| Highlight the rows and columns via the conditional formatting | |
| – Filter | |
| Filter by members using the checkbox | |
| Filtering by members using the search input box | |
| Filtering by value (Top X records) | |
| Filtering by value (Bottom X records) | |
| Report filters | |
| – Fields | |
| Adding and editing calculated values via UI | |
| Dragging fields in the Field List | |
| Displaying hierarchy levels in the Field List | |
| The Expand All option in the Field List | |
| The Field List in the drill-through pop-up window | |
| – Aggregation functions | |
| “sum” | |
| “count” | |
| “distinctcount” | |
| “average” | |
| “median” | |
| “product” | |
| “min” | |
| “max” | |
| “percent” | |
| “percentofcolumn” | |
| “percentofrow” | |
| “index” | |
| “difference” | |
| “%difference” | |
| “stdevp” (Population Standard Deviation) | |
| “stdevs” (Sample Standard Deviation) | |
| “runningtotals” | |
| – The Toolbar | |
| Save a report | |
| Open a report | |
| Conditional formatting | |
| Number formatting | |
| Connect to a CSV data source | |
| Connect to a JSON data source | |
| Full-screen mode | |
| – Export | |
| Print reports | |
| Export reports to HTML | |
| Export reports to MS Excel | |
| Export reports to PDF | |
| Add custom headers and footers (PDF, HTML) | |
| Add custom sheet names (Excel) | |
| – Options | |
| Language localization | |
| Apply a pre-defined report theme | |
| Date and time patterns | |
| – Integration with charting libraries | |
| amCharts | |
| Highcharts | |
| Google Charts | |
| FusionCharts | |
| Any charting library | |
| – Integration with frameworks and web technologies | |
| React | |
| Angular | |
| Vue | |
| Django | |
| Jupyter | |
| Flutter | |
| jQuery | |
| AngularJS |
Options available for developers:
| Feature | Availability |
|---|---|
| – General options | |
| Show or hide the Toolbar | |
| Show or hide the Field List | |
| Open or close the Field List via UI or API | |
| Show or hide the aggregation selection control in the Field List | |
| Show or hide the “Add calculated value” control in the Field List | |
| Enable or disable the drill-through feature | |
| Configure a slice in the drill-through pop-up window | |
| Show or hide the Field List in the drill-through pop-up window | |
| Show or hide the sorting controls | |
| Enable a default slice for the component | |
| Set a default sorting type for the hierarchy members: “asc”, “desc” or “unsorted” | |
| Change the aggregation labels via localization | |
| Define data types in CSV | |
| Define data types in JSON | |
| Different field separators for CSV | |
| Set global options for all reports | |
| Customize the Toolbar | |
| Define custom report themes | |
| Customize the context menu | |
| Expand or collapse all hierarchy members via API | |
| – Grid options | |
| Set the grid form. Possible values are: “compact”, “classic”, “flat” | |
| Set the grid title | |
| Show or hide the filtering controls | |
| Show or hide spreadsheet headers | |
| Show or hide subtotals | |
| Show or hide grand totals in the rows and/or columns | |
| Show or hide the hierarchy captions | |
| Show or hide report filters on the grid |
This page contains information about browsers compatible with WebDataRocks.
Starting from version 1.4, WebDataRocks follows the ES6 standard. As a result, the component will work correctly only in browsers that fully support ES6. You can find these browsers and their versions in the below table:
| Browser | Version |
|---|---|
| Chrome | 51+ |
| Firefox | 54+ |
| Microsoft Edge | 15-18, 79+ |
| Opera | 38+ |
| Safari | 10+ |
| iOS Safari | 10+ |
| Internet Explorer | Not supported* |
*To work with WebDataRocks in Internet Explorer, use WebDataRocks versions earlier than 1.4. The component’s version history is available on npm. See how to install a specific package version from npm.
This page contains information about browsers compatible with WebDataRocks.
Starting from version 1.4, WebDataRocks follows the ES6 standard. As a result, the component will work correctly only in browsers that fully support ES6. You can find these browsers and their versions in the below table:
| Browser | Version |
|---|---|
| Chrome | 51+ |
| Firefox | 54+ |
| Microsoft Edge | 15-18, 79+ |
| Opera | 38+ |
| Safari | 10+ |
| iOS Safari | 10+ |
| Internet Explorer | Not supported* |
*To work with WebDataRocks in Internet Explorer, use WebDataRocks versions earlier than 1.4. The component’s version history is available on npm. See how to install a specific package version from npm.
This page contains information about browsers compatible with WebDataRocks.
Starting from version 1.4, WebDataRocks follows the ES6 standard. As a result, the component will work correctly only in browsers that fully support ES6. You can find these browsers and their versions in the below table:
| Browser | Version |
|---|---|
| Chrome | 51+ |
| Firefox | 54+ |
| Microsoft Edge | 15-18, 79+ |
| Opera | 38+ |
| Safari | 10+ |
| iOS Safari | 10+ |
| Internet Explorer | Not supported* |
*To work with WebDataRocks in Internet Explorer, use WebDataRocks versions earlier than 1.4. The component’s version history is available on npm. See how to install a specific package version from npm.
WebDataRocks allows visualizing the data from the pivot table using 3rd-party charting libraries. Feel free to use the following tutorials:
- Integration with amCharts
- Integration with Highcharts
- Integration with Google Charts
- Integration with FusionCharts
- Integration with any charting library
WebDataRocks allows visualizing the data from the pivot table using 3rd-party charting libraries. Feel free to use the following tutorials:
- Integration with amCharts
- Integration with Highcharts
- Integration with Google Charts
- Integration with FusionCharts
- Integration with any charting library
WebDataRocks allows visualizing the data from the pivot table using 3rd-party charting libraries. Feel free to use the following tutorials:
- Integration with amCharts
- Integration with Highcharts
- Integration with Google Charts
- Integration with FusionCharts
- Integration with any charting library
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
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!
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
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!