webdatarocks / web-pivot-table

A feature-rich JS pivot grid library for creating interactive reports. Integrates with any front-end technology

About WebDataRocks Free Pivot Table

WebDataRocks is a free JavaScript pivot table component for online data visualization and analysis. This enterprise-featured tool easily creates interactive reports of your business data. With WebDataRocks, you get real-time reporting on any device you prefer (PC, tablet, mobile, etc.).

Supported data formats

WebDataRocks supports data in CSV and JSON formats. Data size should be up to 1MB.

Pivoting features

• Sorting
• Filtering
• Grouping fields in rows and columns
• Drill-down
• Aggregations
• Drill-through
• Calculated values
• Number formatting
• Conditional formatting

Additional options

• Custom CSS themes
• Language localization
• Handy Toolbar that gives access to the most popular pivoting features
• Integration with frameworks (Angular 5+, React, Vue, and other technologies)
• Integration with 3rd party charting libraries

Get started with WebDataRocks

1. Download WebDataRocks
2. Use WebDataRocks in your project

Resources

• Live demos
• Documentation
• Blog

Support

Feel free to ask WebDataRocks-related questions on StackOverflow.

web-pivot-table's Issues

Hint for users

Is it possible to make hint icons in the header table so that the user sees some kind of hint when hovering over it?. Like tihs

To use other fields than just one which is indicated with "measure" in "formula" to specify more complex conditions

"conditions": [	
    {
        "formula": "#value < 8",
        "measure": "time_info",
        "format": {
            "backgroundColor": "#FFFFFF"
        }
    }
]

I can use #value as a comparison argument but I need to express a more complex condition, how to reach other fields of the record?

Toolbar

How do I find the connect and local csv on the toolbar

Distinct count shows 0 if date mapping is present

It seems that the "Distinct Count" aggregation only works for values without a space character. As soon as a value contains a space, the aggregation result always seems to be 0.

getData() returns duplicate rows if 'Do Not Show Grand Totals' is selected

I think this codePen shows the issue. Maybe this is expected behavior, but thought I'd report it in case it's not.

https://codepen.io/Brett-Olges/pen/ZENQWNY

getData() returns the data from the pivot table, but if "Do Not Show Grand Totals" is selected as an option, then it seems like the data returns 2 sets of data, one of which is a duplicate?

Empty table if only one row of data

Above is the data that is given to WebDataRocks. There are two rows, the first is the name of headers (firstObject), the second is the only row with data.
This issue is persistent, doesn't depend on browser or browser version.

Everything will show up if I add one more row of data, making total of 2 data rows.

I could not make "conditions"."Hierarchy" parameter work

"conditions": [{
            "formula": "#value > 1",                      
            "hierarchy": "Country",
            "measure": "Discount",
            "format": { 
                "backgroundColor": "#C5E1A5",
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
    }]

Even though I provide "hierarchy" parameter, the formula is being applied to all hierarchy chain.

All code is as below;

var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	height: 395,
	report: {
        "slice": {
            "rows": [
                {
                    "uniqueName": "Country"
                },
                {
                    "uniqueName": "Category"
                }
            ],
            "columns":[
            { "uniqueName": "Color" }
            ],
        "measures": [
                {
                    "uniqueName": "Discount",
                    "aggregation": "sum"
                }
            ] ,
        },
        "conditions": [{
            "formula": "#value > 1",                       
            "hierarchy": "Country",
            "measure": "Discount",
            "format": { 
                "backgroundColor": "#C5E1A5",
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
        }],
        "dataSource": {
        "filename": "https://cdn.webdatarocks.com/data/data.csv"
        }
    }
});

To use “time” JSON type as “HH:MM”

How can I use "time" JSON type without :ss part.

Helper links :
The question on stackoverflow question https://stackoverflow.com/q/65407980/9851619
The JSON types doc page https://www.webdatarocks.com/doc/data-types-in-json/
"time" JSON type codepen example https://codepen.io/webdatarocks/pen/eLagqo

how to bind JSON data from ajax call to DataSource of pivot table webdatarocks. Here the data is not binding in the following code. Please help me

var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
report: {
dataSource: {
dataSourceType: "json",
data: getData()
},
"slice": {
"rows": [
{
"uniqueName": "RLI_RAV_GRP_DES"
}
],
"columns": [
{
"uniqueName": "LEVEL1"
},
{
"uniqueName": "LEVEL2"
}
],
"measures": [
{
"uniqueName": "Q1",
"aggregation": "sum"
},
{
"uniqueName": "Q2",
"aggregation": "sum"
},
{
"uniqueName": "Q3",
"aggregation": "sum"
},
{
"uniqueName": "Q4",
"aggregation": "sum"
}
]
},
options:
{
grid: {
title: "Sales Report"
}
}
}
});

    function getData() {
        $.ajax({
            type: "GET",
            url: "NACGSample.aspx/GetPivotReportList",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (msg) {
                return JSON.parse(msg.d);
                //return msg.d; 
            },
            error: function (msg) { return alert(msg); }
        });
    }

Function JSON DATA.txt

WebDataRocks(~1.3.3) grid\table not working properly on latest updated browsers

We are using WebDataRocks version 1.3.3 (with angular 10.0 and Node 16.2) It was working fine till mid of Dec-2023. But as browser version updated since then getting issues in Chrome, Edge and Firefox latest versions.(It works fine if we downgrade the Chrome to 119.0.x.x)

Issue : First column first rows Cell displays on whole grid size (please find below attached screenshot for more details)

It works fine on Chrome 119.0.x.x(please find below screenshot)

CommonJS or AMD dependencies can cause optimization bailouts

I get this warning every time I compile my project. Is there a way to solve this problem?

...webdatarocks.angular4.ts depends on 'webdatarocks'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Env:

$ npm list webdatarocks
...
└── [email protected]

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.5
Node: 14.15.3
OS: linux x64

Angular: 11.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.5
@angular-devkit/build-angular   0.1100.5
@angular-devkit/core            11.0.5
@angular-devkit/schematics      11.0.5
@angular/cdk                    11.0.3
@angular/flex-layout            11.0.0-beta.33
@angular/material               11.0.3
@schematics/angular             11.0.5
@schematics/update              0.1100.5
rxjs                            6.6.3
typescript                      4.0.5

'WebdatarocksPivotModule' does not appear to be an NgModule class

hi
i'm getting 'WebdatarocksPivotModule' does not appear to be an NgModule class when importing WebdatarocksPivotModule to the appmodule in angular , already installed ng-webdatarocks

`import { NgModule, isDevMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { HttpClientModule } from '@angular/common/http';
import { AuthRoutingModule } from './auth-routing.module';
import { WebdatarocksPivotModule } from 'ng-webdatarocks';

@NgModule({
declarations: [
AppComponent
],
imports: [

HttpClientModule,
BrowserModule,
WebdatarocksPivotModule,
AppRoutingModule,
AuthRoutingModule

],
providers: [

],
bootstrap: [AppComponent]
})
export class AppModule { }
`

SaveToBinary callback

Hello, I love your pivot table!
I am embedding it in a WebView in a mobile app. Exporting to a PDF or Excel don't work properly. For now, I am modifying the source to inject code to communicate with my native app.

I see that you have an unused export option saveToBinary. It's currently empty. What would be great if there was a callback on the Export or Save, and it would simply pass me the uint8array and I can handle it myself.

CSV

I can't seem to find my To Local CSV

Blank page in Export PDF

With version 1.4.7:
I have some problems with export PDF
There is still the problem with header on second page generated (see my last issue of november 2022).
There is also an empty page (the second page generated, again) if you create a pdf with only horizontal split pages.
If you create a 3x4 pages pdf there is a second wrong page that seems replicate value from fourth page. Generated PDF have 13 page!

If you dont scroll untill the total row the width of column generated in PDF are wrong. See attached. If you scroll video untill total row and then generate PDF everything is ok.
Is there a javascript way to scroll untill the total row before sending export command? it's a workaround while waiting for a fix.

Internal error when filtering by column values

When selecting a column on the chart there an option to choose which values display. However these changes produce an error and then have no effect. This happens whether or not slice is defined.

missing column header in pdf

In export pdf only the second pages of pdf is missing the headers. You can see the example attached.

When you generate a 4 pages pdf (2 horizontal and 2 vertical) in PDF you will find 5 pages (one pages is a duplicate)

Webdatarocks uses associative array instead of object for storing column names and crashes when using a column name like "length"

The types property is defined here:

function b() {
    this._isComplete = !1;
    this.id = this.deleteId = "";
    this.levels = [];
    this._dimensions = new utils.AssociativeArray();
    this._measures = new utils.AssociativeArray();
    this._measureToHierarchyMap = {};
    this._hierarchyToMeasureMap = {};
    var a = new h.GenericHierarchy(e.Cube.MEASURES_NAME, e.Cube.MEASURES_NAME),
      c = new h.GenericDimension(e.Cube.MEASURES_NAME, e.Cube.MEASURES_NAME);
    c.type = e.types.DimensionType.MD_DIMTYPE_MEASURE;
    c.addHierarchy(a);
    this.addDimension(c);
    this.fields = new utils.AssociativeArray();
    this.types = [];
    this.id = this.deleteId = "";
  }

And used in the addDataField() method:

b.prototype.addDataField = function (a, c) {
    void 0 === c && (c = "");
    var b = {},
      d;
    for (d in a) b[d] = a[d];
    b.hasOwnProperty("uniqueName") || (b.uniqueName = c);
    (b.hasOwnProperty("caption") && "" != b.caption) || (b.caption = c);
    "" == c && (c = b.uniqueName);
    d = e.types.DataFieldType.STRING;
    b.hasOwnProperty("type") && (d = String(b.type).trim().toLowerCase());
    b.type = d;
    var k;
    b.hasOwnProperty("hierarchy")
      ? (k = this.findDimension(b.hierarchy))
      : d == e.types.DataFieldType.LEVEL &&
        b.hasOwnProperty("hierarchy") &&
        (k = this.findDimension(b.hierarchy));
    null == k &&
      ((k = e._structure.GenericDimension.fromObject(b)),
      b.hasOwnProperty("hierarchy") && (k.uniqueName = b.hierarchy),
      (k.caption = b.hasOwnProperty("caption")
        ? b.caption
        : b.hasOwnProperty("hierarchy")
        ? b.hierarchy
        : k.caption),
      d == e.types.DataFieldType.LEVEL &&
        b.hasOwnProperty("hierarchy") &&
        (k.uniqueName = b.hierarchy),
      this.addDimension(k));
    this.types[c] = d;
...

The offending line is the last one, in which c is a string name, and is being stored in the types array. This means you get errors like:

Uncaught RangeError: Invalid array length

When working with a dataset that has "length" as the column name

Sorting by date bug ( desc or asc ) in Web-datarocks pivot tables

Looks like there bug is the sorting the data ( Date type ) in web-data-rock table with sort: "desc" or "asc"

Please find code-pen with above issue :

https://codepen.io/BALAJIVP/pen/WNZJBjO

Thank you

Support for weighted Average of two columns

Is there any support possible for weighted average score calculation? Is it possible?

Pivot table

Can't get highcharts instance inside webdatarocks object

TS2503: Cannot find namespace 'WebDataRocks'.

I have a react application and I'm trying to use WebDataRocks to render data from my bd. But, when I try to build I'm getting an error that says:

...node_modules/react-webdatarocks/build/index.d.ts(3,48):

TS2503: Cannot find namespace 'WebDataRocks'.

I tried many stuff, but I still receive the error. The only thing that's working is when I add a flag of ignoring the typescript type of and index.d.js. But, I can't change the modules because it's not gonna work when I send the code for prod area.

My guess is the file should be .tsx, not ts. But, again I can't change the modules.

Any thoughts?

Math operations

Hello!When working with your library on my website, I came across such a problem - when dividing a number by 0, the result of a mathematical calculation is the number 0.00011, which is not correct. What is it about and can you fix it?

WEBDATAROCKS for ANGULAR UNIVERSAL

Hi,

My project is based on ANGULAR 9 with UNIVERSAL and I need to install and work with WEBDATAROCKS. While I installed and build my project I ended up with the following error as

_at webpack_require (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:26:30)
at Module../node_modules/ng-webdatarocks/fesm2015/ng-webdatarocks.js (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:211104:70)
at webpack_require (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:26:30)
at Object../src/app/app.component.ts (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:237581:12)
at webpack_require (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:26:30) at Object../src/app/app.module.ts (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:237710:25)
at webpack_require (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:26:30)
at Object../src/app/app.server.module.ts (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:237832:22)

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:64286_

_C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:228691
WEBPACK_AMD_DEFINE_RESULT !== undefined && (module.exports = WEBPACK_AMD_DEFINE_RESULT));a.WebDataRocks=b()})(window,function(){return function(a){'use strict';var n;
^

ReferenceError: window is not defined
at Object. (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:228691:123)
at Object../src/app/app.server.module.ts (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:237809:22)
at webpack_require (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:26:30)
at Object../src/main.server.ts (C:\Self\TFS\CRMMVC01\AngularFirebase\testProject\dist\testProject\server\main.js:237892:27)

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:52135_

What should I do now and can u just guide me how to install for ANGULAR UNIVERSAL based projects

React Save Method

How do I access the SAVE method using the react framework?

Can't hide columns when there are ReportFilters(flat form)

Steps to reproduce the issue:

1º Enter the link:
https://jsfiddle.net/6nL2xeat/

2º Change layout to "Flat form"

3º Go to Fields, uncheck column "Destination"

As you can see, the Destination column does not disappear but moves to the last position

Version 1.3.3 error cannot read property preventDefault pressing arrow key

When I press the arrow key i get this error:
line 1256
char 115
cannot read property 'preventDefault' on null or undefined element

What I'm doing wrong?

Column keeps expanding in small screen ration

Export to Excel. Header not added to Exported file

Hello,

I have encountered an issue where headers and footers are not added when exporting data to Excel.

Example
You can see a live demonstration of the issue in this CodePen example.

Steps to Reproduce

1. Open the provided CodePen link.
2. Export the displayed data to Excel. (Works correct with PDF)
3. Notice that the exported Excel file lacks the specified headers and footers.

Expected Behavior
The exported Excel file should include the designated headers and footers as specified in the export settings.

Any guidance or suggestions on how to resolve this issue would be greatly appreciated. Thank you for your assistance!

Error with the chart when adding filter

When I try to add a filter to a report that has a chart, it shows me this error

webdatarocks.js:1030 Uncaught TypeError: Cannot read properties of undefined (reading '2')

I have reproduced the error here
https://codepen.io/soskr/pen/popVOMj

The error only occurs when I try to define the slice property on the chart

Fails to open local csv file

webdatarocks.js:1410 Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
at u (webdatarocks.js:1410:20947)
at o.readAsText (webdatarocks.js:1410:21595)
at k.load (webdatarocks.js:103:305)
at d.n0 (webdatarocks.js:537:242)
at k. (webdatarocks.js:536:467)
at k.na (webdatarocks.js:15:234)
at k.Oa (webdatarocks.js:16:226)
at k.S_ (webdatarocks.js:102:494)
at HTMLInputElement. (webdatarocks.js:102:357)