jsreports home


This example shows how to embed charts in your reports. We take a data set, group it, and place a pie chart in the header section. The pie chart uses the rows in its group as values. For example, the top level grouping is "jobs." Each job has its own group with a group header and a chart. Because the second level grouping beneath each job group is by "task", the pie chart will have one row for each task appearing within that job. The value field of the chart, which corresponds to the pie slice size in the chart, is the Hours field -- in other words, each slice represents the total number of hours for that task, within the job.

Since there are multiple rows for a given task, the chart will aggregate values from the Hours fields by summing them.

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

View the source of this page for the full code.