Code Monkey home page Code Monkey logo

pivot.js's Introduction

Welcome to Pivot.js

Pivot.js is a simple way for you to get to your data. It allows for the creation of highly customizable unique table views from your browser.

In data processing, a pivot table is a data summarization tool found in data visualization programs such as spreadsheets or business intelligence software. Among other functions, pivot-table tools can automatically sort, count, total or give the average of the data stored in one table or spreadsheet. It displays the results in a second table (called a "pivot table") showing the summarized data.

In our case, results (or the pivot-table) will be displayed as an HTML table pivoting from the input data (CSV or JSON). Without further ado let's get to usage.

View an example or view the Docs for more information.

#Usage

Step one is to initialize the pivot object. It expects the following attributes:

  • csv - which should contain a valid string of comma separated values. It is important to note that you must include a header row in the CSV for pivot to work properly (you'll understand why in a minute).
  • json - which should contain a valid JSON string. At this time this string must be an array of arrays, and not an array of objects (storing the field names with each row consumes significantly more space).
  • fields - which should be an array of objects. This is used to instruct pivot on how to interact with the fields you pass in. It keys off of the header row names. And is formated like so:
 [ {name: 'header-name', type: 'string', optional_attributes: 'optional field' },
 {name: 'header-name', type: 'string', optional_attributes: 'optional field' }]

(See more about fields in Section below)

  • filters (default is empty) - which should contain any filters you would like to restrict your data to. A filter is defined as an object like so:
{zip_code: '34471'}

Those are the options that you should consider. There are other options that are well covered in the spec.

A valid pivot could then be set up from like so.

var field_definitions = [{name: 'last_name',   type: 'string',   filterable: true},
        {name: 'first_name',        type: 'string',   filterable: true},
        {name: 'zip_code',          type: 'integer',  filterable: true},
        {name: 'pseudo_zip',        type: 'integer',  filterable: true },
        {name: 'billed_amount',     type: 'float',    rowLabelable: false},
        {name: 'last_billed_date',  type: 'date',     filterable: true}

// from csv data:
var csv_string  =  "last_name,first_name,zip_code,billed_amount,last_billed_date\n" +
                   "Jackson,Robert,34471,100.00,\"Tue, 24 Jan 2012 00:00:00 +0000\"\n" +
                   "Jackson,Jonathan,39401,124.63,\"Fri, 17 Feb 2012 00:00:00 +0000\""

pivot.init({csv: csv_string, fields: field_definitions});

// from json data:
var json_string = '[["last_name","first_name","zip_code","billed_amount","last_billed_date"],' +
                    ' ["Jackson", "Robert", 34471, 100.00, "Tue, 24 Jan 2012 00:00:00 +0000"],' +
                    ' ["Smith", "Jon", 34471, 173.20, "Mon, 13 Feb 2012 00:00:00 +0000"]]'

pivot.init({json: json_string, fields: field_definitions});

Wiki

Articles

Authors

Pivot.js is the work of Robert Jackson and Jonathan Jackson.

License

This software is licensed under a modified BSD license.

See LICENSE for more details.

pivot.js's People

Contributors

rondale-sc avatar rwjblue avatar alexgann avatar

Watchers

Christian Hochfilzer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.