jbPivot by

A simple jQuery pivot table widget

Download from GitHub »

Demo

You can drag and drop the titles and expand/collapse the groups

Usage Example

<!doctype html>
<html>
  <head>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script src="http://www.jbPivot.org/js/vendor/jbpivot.min.js"></script>
    <link rel="stylesheet" href="http://www.jbPivot.org/css/jbpivot.min.css">
  </head>
  <body>
      <div id="pivot1"></div>

      <script type="text/javascript">
        $(document).ready(function(){
          $("#pivot1").jbPivot({
             fields: {
               Gender : { field: 'gender', sort: "asc", showAll:true, agregateType: "distinct"},
               Age : { field: 'age', sort: "asc", age: "Age", showAll:true, agregateType: "distinct"},
               Eyes: { field: 'eyes', sort: "asc", showAll:false, agregateType: "distinct"},
               Count: { agregateType: "count", groupType:"none" },
            },
            xfields: [ "Gender","Eyes" ],
            yfields: [ "Age" ],
            zfields: [ "Count"],
            data: [
              {id:"1",gender:"male", age:"30-40",eyes:"green", v:"8"},
              {id:"2",gender:"male", age:"20-30",eyes:"brown", v:"7"},
              {id:"3",gender:"male", age:"30-40",eyes:"brown", v:"2"},
              {id:"4",gender:"female", age:"40-50",eyes:"brown", v:"5"},
              {id:"5",gender:"male", age:"30-40",eyes:"green", v:"7"},
              {id:"6",gender:"male", age:"30-40",eyes:"green", v:"9"},
              {id:"7",gender:"female", age:"40-50",eyes:"green", v:"8"},
              {id:"8",gender:"female", age:"50-60",eyes:"brown", v:"6"},
              {id:"9",gender:"male", age:"30-40",eyes:"brown", v:"9"},
              {id:"10",gender:"male", age:"40-50",eyes:"blue", v:"7"},
              {id:"11",gender:"male", age:"30-40",eyes:"blue", v:"4"},
              {id:"12",gender:"male", age:"20-30",eyes:"black", v:"2"}
            ]
          });
        });
      </script>
  </body>
</html>

Test it yourself »

License

Copyright 2013 Uniclau S.L. (www.uniclau.com)

If you need a comercial license, please contact us

Documentation

Please see the README file.

Contact

You can find us at info@uniclau.com