Read this blog post to know more about Report.js.
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.
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
2013 | 2014 | |
---|---|---|
My Count | 10 | |
My Sum | 15 | 20 |
For a brower example without ES6, check the demo
Install the dependencies
git clone https://github.com/youknowriad/report.js.git && cd report.js
npm install
bower install
npm test