Report.js

Why another library ?

Read this blog post to know more about Report.js.

Dependencies

Report.js depend on jQuery and Chart.js. Don't forget to add them to your page.

You may want to include the css delivered in the library to add some styles for the charts legend.

Usage

Report.js is written in EcmapScript 6, so you can use it in ES6 like this.

import {Renderer} from 'reportjs';

let renderer = new Renderer(),
    options = {
        data: {
            dimensions: [{ id: 'Measures'}, { id: 'Year' }],
            dimensionValues: [
                [{ id: 'count', caption: 'My Count' }, { id: 'sum', caption: 'My Sum' }],
                [{ id: '2013' }, { id: '2014' }]
            ],
            cells: [
                {value: 10, dimensionValues: [0, 0]},
                {value: 20, dimensionValues: [1, 1]},
                {value: 15, dimensionValues: [0, 1]}
            ]
        },
        layout: {
            type: 'table',
            rows: ['Measures'],
            columns: ['Measures', 'Category']
        }
    };

renderer.renderTo($('#mydiv'), options);

If you're using ES5 (current javascript supported by all the browsers), include the library. the library is loaded in the global variable "reportjs". See the complex example for more details.

The above example will output

For a brower example without ES6, check the demo

Contribute

Install the dependencies

git clone https://github.com/youknowriad/report.js.git && cd report.js
npm install
bower install

Tests

npm test