jsreports example

Grouping

This report takes a data source, groups it into multiple levels by different fields, and computes totals using aggregate functions in the footer sections.

The report is rendered into a <div> container below. Click the Edit button to open the report designer.

Source code snippets are shown below. View the source of this page for the full code.

The code

Running the report:

jsreports.render({
  report_def: reportdef,
  target: $(".report-output"),
  datasets: [{
    "id": "time",
    "name": "Time",
    "url": "time-data.json",
    "schema_url": "time-data-schema.json"
  }]
});

Opening the designer:

var designer = new jsreports.Designer({
  data_sources: [{
    "id": "time",
    "name": "Time",
    "url": "time-data.json",
    "schema_url": "time-data-schema.json"
  }],
  images: [{
    name: "ACME logo",
    url: "images/acme-logo.jpg"
  }],
  report_def: reportdef
});