Report.js

View the Project on GitHub youknowriad/report.js

Complex Example

Graph Line Example

Graph Bar Example

Graph Radar Example

Graph Pie Example

Graph Doughnut Example

Graph Polar Area Example

Table example with rowspans and colspans

var renderer = new reportjs.reportjs.Renderer(),
    adapter = new reportjs.reportjs.JQueryAdapter(),
    options = {
        data: {
            dimensions: [{ id: 'Measures'}, { id: 'Year' }, { id: 'Month' }, { id: 'Category' }],
            dimensionValues: [
                [{ id: 'count', caption: 'My Count' }, { id: 'sum', caption: 'My Sum' }],
                [{ id: '2013' }, { id: '2014' }],
                [{ id: 'January' }, { id: 'February' }, { id: 'March' }],
                [{ id: 'Category 1' }, { id: 'Category 2' }]
            ],
            cells: [
                {value: 10, dimensionValues: [0, 0, 0, 0]},
                {value: 20, dimensionValues: [0, 0, 0, 1]},
                {value: 15, dimensionValues: [0, 0, 1, 0]},
                {value: 15, dimensionValues: [0, 0, 2, 0]},
                {value: 10, dimensionValues: [0, 1, 0, 0]},
                {value: 20, dimensionValues: [0, 1, 0, 1]},
                {value: 15, dimensionValues: [0, 1, 1, 0]},
                {value: 15, dimensionValues: [0, 1, 2, 0]},
                {value: 10, dimensionValues: [1, 1, 0, 0]},
                {value: 20, dimensionValues: [1, 1, 0, 1]},
                {value: 15, dimensionValues: [1, 1, 1, 0]},
                {value: 15, dimensionValues: [1, 1, 2, 0]},
                {value: 10, dimensionValues: [1, 0, 0, 0]},
                {value: 20, dimensionValues: [1, 0, 0, 1]},
                {value: 15, dimensionValues: [1, 0, 1, 0]},
                {value: 15, dimensionValues: [1, 0, 2, 0]}
            ]
        },
        layout: {
            type: 'table',
            rows: ['Year', 'Month'],
            columns: ['Measures', 'Category']
        }
    },
    table = renderer.render(options);
adapter.renderTableTo($('#mydiv'), table);

The result