-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Optional Extra Renderers
In addition to the built-in table, heatmap and table-barchart renderers, PivotTable.js ships with a few optional extra renderers that add charting or TSV export support.
You can also find third-party renderers such as Subtotal.js, NovixPivotJS and the NReco extensions
Plotly Charts (demo)
In order to use these, in addition to including the plotly_renderers.js file, you must first include Plotly in your <head>:
<script src="https://cdn.plot.ly/plotly-basic-latest.min.js"></script>Finally, you must pass into pivotUI() some of the renderers that plotly_renderers.js makes available at $.pivotUtilities.plotly_renderers.
The Plotly renderers all accept a plotly key in the rendererOptions object. This key is merged into the layout parameter passed to Plotly.newPlot() and can be used to control plot size, margins, fonts, axes, legend, background colours etc. Full documentation for the layout object is here: https://plot.ly/javascript/reference/#layout
The Plotly renderers all accept a plotlyConfig key in the rendererOptions object. This key is used as the config parameter passed to Plotly.newPlot() and can be used to control various aspects of the interactivity/behaviour of the chart, including the modebar. Full documentation for the config object is here: https://plot.ly/javascript/configuration-options/
C3 Charts (demo)
In order to use these, in addition to including the c3_renderers.js file, you must first include D3 and C3 in your <head>:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>Finally, you must pass into pivotUI() some of the renderers that c3_renderers.js makes available at $.pivotUtilities.c3_renderers.
The C3 renderers all accept a c3 key in the rendererOptions object. This key is merged into the object passed into c3.generate() and can be used to control chart size, axis formatting, legend, colours etc. Full documentation for the parameters accept can be found here: http://c3js.org/reference.html
An example of how to control the size of a C3 chart is here: https://pivottable.js.org/examples/scatter.html and custom colours here: https://pivottable.js.org/examples/c3.html
D3 Visualizations (demo)
In order to use these, in addition to including the d3_renderers.js file, you must first include D3 in your <head>:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>Finally, you must pass into pivotUI() some of the renderers that d3_renderers.js makes available at $.pivotUtilities.d3_renderers.
The D3 renderers accept a d3 key in the rendererOptions object. This object can have width and height keys to control the size of the visualization.
Exporting to TSV (demo)
In order to use these, in addition to including the export_renderers.js file, you must pass into pivotUI() some of the renderers that export_renderers.js makes available at $.pivotUtilities.export_renderers.
The TSV Export renderers read no keys in the rendererOptions object.
Google Charts (demo)
In order to use these, in addition to including the gcharts_renderers.js file, you must first include the Google JS API in your <head>:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>And include this call somewhere early on in your Javascript code:
google.load("visualization", "1", {packages:["corechart", "charteditor"]});Finally, you must pass into pivotUI() some of the renderers that gcharts_renderers.js makes available at $.pivotUtilities.gchart_renderers.
The Google Chart renderers accept a gchart key in the rendererOptions object. This object is merged into the value passed to the options parameter of google.visualization.ChartWrapper and can be used to control width, height, colour and styling information for the chart. A full reference for bar chart options is here https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options and line chart options are here https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options