Frequently Asked Questions

Nicolas Kruchten edited this page Jul 30, 2018 · 81 revisions

Getting help

Question: How can I get help with PivotTable.js?

Answer: Please see the support guidelines.


Question: How can I contribute to PivotTable.js?

Answer: Please see the contribution guidelines.

Custom treatment for a given column

Related Issues: #900, #910

Question: Can I apply custom formatting to one column? Can I have one column which is computed differently from the others?

Current answer: No. All cells in the output are computed and formatted the same way: they are either all sums or all averages etc.

Can't pass same parameters to pivot() and pivotUI()

Related Issues: #456, #451, #446

Question: Why can't I call pivot() with the same parameters as pivotUI() and vice versa?

Current answer: These two functions do different things and so take different parameters.

  • pivotUI() takes aggregators/renderers objects and aggregatorName/rendererName keys, because it must display a list of aggregators and renderers in its UI, while pre-loading with a specific aggregator and renderer.
  • pivot() on the other hand takes a pair of aggregator/renderer functions in order to generate its output. (pivot() also takes an aggregatorName parameter but this is used only as a label in certain renderers.)

Note: if you want to use pivotUI() but in certain cases just hide the UI, you can use the new showUI parameter.

Multiple Aggregators in the UI and Renderers

Related Issues: #30, #73

Question: How can I use multiple aggregators? For example, showing a table which has sum(x) and avg(x) or sum(x) and sum(y)?

Current answer: PivotTable.js currently supports only one Aggregator in the drag'n'drop UI and in the built-in Renderer. I'm not sure how to gracefully support the creation of multiple Aggregators in the UI at the moment, nor am I clear on how Renderers like the Google Chart Renderers would support multiple Aggregators. If you need this feature you could implement your own custom Aggregator which displays multiple values, or your own custom Renderer using the built-in Table Renderer as a starting point (like the person who shared their work in issue #30) but if you need UI support you may need to modify the UI code.

Accessing/saving PivotTable State

Related Issues: saved search

Question: How can I access the user-selected options and/or state of the PivotTable?

Current answer: you can pass in a parameter to pivotUI() called onRefresh which is a function which will be called with the current configuration every time the user changes anything in the UI. If you call pivotUI() with this configuration and the same input, it will restore this state. This can be used to store the configuration in a cookie, or save/reload state etc. You can see an example of this in action here.

Server-side integration

Related Issues: #150

Question: Can I integrate PivotTable.js with an OLAP Server? Can some of the computation be done server-side?

Current answer: PivotTable.js is designed to be a browser-side component, and requires all the data that it is to operate on to be supplied up front in the browser: no AJAX-style interactions once loaded. In that sense, you can integrate this library with any server which is able to provide data in a compatible format, but there is no 'deep' integration beyond the original data load. Architecturally, this kind of deep integration would require a major rewrite, and this is not in the plans. That said, some people in #150 seem to have gotten somewhere with different server-side models.

Input Data Size

Related Issues: #36, #90, #203

Question: How big can the input data be?

Current answer: the best answer so far is "try it and see", as the performance of the system will depend on the machine/browser being used, the exact nature of the aggregators etc. It's proven difficult to give rules of thumb for estimating what will work well beyond 100,000 records, but certainly up to that point results seem satisfactory for most applications.

Hiding Totals in the Table Renderer

Related Issues: #500, #445, #382, #255

Question: Can I hide the totals in the built-in table renderer?

Current answer: Yes, with the following CSS, or using the rowTotals and/or colTotals renderer options.

.pvtTotal, .pvtTotalLabel, .pvtGrandTotal {display: none}

Pagination in the Table Renderer

Related Issues: #476, #477, #286

Question: Can I paginate the results in the built-in table renderer?

Current answer: This is not a supported feature of any built-in renderer. If you need this you will need to write your own renderer or apply a jQuery transformation to the output of the built-in ones using another library.

Sorting in built-in Table Renderer

Related Issues: #48, #44

Question: How can I sort the table by cell value or using my own sorting function in the built-in Table Renderer?

Current answer: The little arrow icons near the aggregator dropdown allow you to sort renderer output either by row/column key (the default) or by rol/column total. It is not currently possible to order by arbitrary columns, although there is a commercial third-party plugin to do so, available at

Drilldown in built-in Table Renderer

Related Issues: #33, #45, #55

Question: How can I get 'drilldown' functionality in the built-in Table Renderer so that when I click or double-click on a cell, the relevant records are somehow made visible?

Current answer: The table renderer supports a clickCallback parameter which you can see in action in this example.

Subtotals with Expand/Collapse in built-in Table Renderer

Related Issues: #25, #26

Question: How can I display subtotals in the built-in Table Renderer?

Current answer: The built-in Table Renderer doesn't support subtotals. However, the excellent Subtotal.js plugin for this library provides a set of Renderers that do!

Heatmap Colour Scale

Related Issues: #496, #449, #433, #338

Question: How can I get a different colour scale than the default white-to-red?

Current answer: You can use the rendererOptions.heatmap.colourScaleGenerator parameter to specify a custom colour scale. See the Montreal Weather example.

Exporting Renderer output to Excel or Images

Related Issues: #58, #187, #112, #204

Question: How can I export the output of the built-in Table Renderer to Excel? How can I export the output of the Google Charts Renderer to PNGs?

Current answer: I think that this feature is a bit out of scope for this library, given the variety of possible Renderers. There is, however, an optional export_renderers file, which will generate TSV output similar to the Table Renderer, which can be copy-pasted to Excel (see example). If the export_renderers add-on doesn't meet your needs, you could add extra code to your page to extract the information you want from the DOM and export to whatever target you are wanting, or you could implement your own renderer which includes an export function.

Supporting Charting library X (ChartJS, HighCharts etc)

Related Issues: #200, #193, #160

Question: PivotTable.js ships with supported Google Charts and D3/C3 renderers, but there are many other visualization systems out there. How can I use/are there plans to support my favourite visualization system?

Current answer: It is not a stated goal of this project to support every visualization library, but rather to structure the input for such libraries, so if you really want to use a specific visualization system, your best bet is to use the Google Chart or D3/C3 renderers as a starting point to creating your own.

I chose Google Charts initially because it was the only library available at that time that supported line/bar/stacked charts with basically identical input formats and provided decent tooltip and legend support. I added C3 support because that library met the above requirements, while being self-hostable (you don't need to request the javascript from Google).

Note that the third-party NovixPivotJS plugin adds support for Highcharts.

Supporting Framework X (React, Angular etc)

Question: I'm trying to use PivotTable.js with Framework X, how can I do it? Is PivotTable.js compatible with Framework X?

Current answer: It is not a stated goal of this project to support every Javascript framework directly, but rather to create a building block that is easy to integrate. The integration is your job :)

Regarding specific frameworks, for React there is a successor project to this one by the same author called react-pivottable and for Angular, various community members have been successful and have documented their efforts.

Pie Charts in the chart renderers

Related Issues: #66, #188

Question: Why aren't Pie Charts included in the chart renderers?

Current answer: Pie Charts give wrong/misleading output in Google Charts if activated naively (see my reply to this PR) so they are not included.

In order for Pie Charts to be first class citizens in PivotTable.js, we would have to be able to display multiple pie charts at once (sharing legends!), based on what the user put in the 'columns' section of the UI, but neither Google Charts nor C3 easily make it possible to do this at the moment. Plotly does handle it but with poor labeling support.

Charts size, colour, legend and other options

Question: How can I control the size, colour, legend and other chart options?

Current answer: See the rendererOptions sections of the Optional Extra Renderers documentation for the chart engine you are using.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.