Cynteka Pivot Table

Cynteka Pivot Table is a jQuery plugin for websites. It supports all usual pivot table's features: data rotating, dragging and dropping fields, summarization etc.

Learn more on Github » Download Follow @ukman

Demo

Simple example

This example demonstrates basic plugin's features.

Start demo

Ajax Lazy Loading Support

This example uses Google Spreadsheet Json API as datasource.

Start Demo

Custom Renderer

User can specify custom cell renderer and change cell html.

Start Demo

Getting Started

In order to start using the pivot table just include plugin's files into your webpage and invoke it. 

					
<html>
    <head>
    
    	<!-- Include jQuery and jQuery UI with css files -->
        <script src='http://code.jquery.com/jquery-2.1.0.min.js' type="text/javascript"></script>

        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"></link>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

        <!-- Include jQuery Cookie plugin -->
        <script src='//cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.js' type="text/javascript"></script>
    					
        <!-- Include jQuery Cynteka Pivot plugin -->
        <link rel="stylesheet" media="screen" href="css/jquery.cy-pivot.css"></link>
        <script src="js/jquery.cy-pivot.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
    	        $("#pivot").cypivot({
    	        	// Params go here. See Constructor params
    	        	// ...
    	        });
            });
        </script>
        
    </head>
    <body>
        <div id="pivot"></div>
    </body>
<html>

Documentation

Browser Compatibility

Constructor 


$("#pivot").cypivot({ /* Params go here ... */ });
Parameter Type Description
configuration boolean
or
object 		If true then user can reconfigurate column/row dimensions. If false user can not do this. If you want to allow the user to reconfigurate only columns or rows, use the the following way: 
	
$("#pivot").cypivot({
  configuration : {horizontalDimensions : true, verticalDimensions : false}
  ...
});
data array of objects Array of data to be used for pivoting. E.g. 
	
var data = [
    {
	    employee : 1,	
	    department : 1,
	    year : 2013,
	    month : 1,
	    day : 10,
	    amount : 34	
    },
    {
	    employee : 20,	
	    department : 2,
	    year : 2013,
	    month : 2,
	    day : 15,
	    amount : 50	
    },
    // etc ...
];
$("#pivot").cypivot({
    data : data
});
dataCellRenderer function(items, colContext, rowContext, opts) The function that create html for a cell specified by colContext/rowContext params. E.g. 

dataCellRenderer : function(items, colContext, rowContext, opts) {
	var html = "";
	for(var i = 0; i < opts.valueDataFields.length; i++) {
		var valueDataField = opts.valueDataFields[i];
		var val = items['default'].sum[valueDataField];
		var signClass = '';
		if(val < 0) {
			signClass = 'negative-value'
		}
		if(val > 0) {
			signClass = 'positive-value'
		}
		if(val == 0) {
			signClass = 'zero-value'
		}
		html = html + "" + val + " ";
	}				
	return html;
},
// ...
dimensions map of objects Map of dimension descriptors. E.g. 
	
var dimensions = {
    employee : {
        label :'Employee', 
        values : function(context) {
            return [
                {id:1, label:'John Brown'}, 
                {id:2, label:'Bill Green'}, 
                {id:3, label:'Daniel White'}
            ];
        },
    },
    department : {
        label :'Department', 
        values : function(context) {
            return [
                {id:1, label:'Accounting'}, 
                {id:2, label:'Logistics'}, 
                {id:3, label:'Administration'}
            ];
        },
    },
    // etc ...
};
$("#pivot").cypivot({
    data : data,
    dimensions : dimensions
});
horizontalDimensions array of strings Array of dimension's names that should be used for rows. E.g. 

$("#pivot").cypivot({
    data : data,
    dimensions : dimensions,
    horizontalDimensions : ['company', 'department', 'employee']
});
valueDataFields array of strings Array of fields in data objects that should be used as value fields. E.g. 

$("#pivot").cypivot({
    data : data,
    dimensions : dimensions,
    valueDataFields : ["inputAmount", "outputAmount"]
});
verticalDimensions array of strings Array of dimension's names that should be used for columns. E.g. 

$("#pivot").cypivot({
    data : data,
    dimensions : dimensions,
    verticalDimensions : ['year', 'month', 'day']
});

Methods

Method Params Description
reload newData array of objects Refreshes all data within pivot table. E.g. 

var newData = [
  {
    year : 2014,
    month : {id : 1, label : 'January'},
    day : 20,
    company : {id : 1, label : 'Jack and sons'},
    department : {id : 1, label : 'Administration'},
    employee : {id : 1, label : 'Jack'},
    hours : 8
  }
];							
$('#pivot').cypivot('reload', newData);

Download

You can download zip file or download archive from Github repository.

About

The plugin is developed in Cynteka company by Sergey Grigorchuk.