Overview of HTML5 Charts

HTML5 charts are a flexible, interactive way to explore your data graphically. You can choose different levels of aggregation for rows and columns and create attractive interactive reports.

The following terminologies are used to describe HTML5 charts:

• Values: Static properties.
• Expressions: Dynamic properties.
• Categories: Rows. In a pie chart, the categories are the slices.
• Levels: Some chart types let you add multiple categories or series ranked hierarchically, with the topmost category set as Level 1. When you export a chart with multiple levels to JasperReports Server, users see a slider which they can use to select the level of aggregation. For example, you might have a chart that has three categories — Country, Region, and City — and users can choose a level for viewing the data.
• Measures: Measures contain summarized values. They are typically numeric fields that determine the length of bars, size of pie slices, location of points (in line charts), or the height of areas.
• Series Contributors: In the Design tab, these are defined at the measure level. In JRXML these are defined as Series.

In HTML5 Charts Jaspersoft Studio are similar to Ad Hoc charts in JasperReports Server.

Before you add a chart to your report, consider the best way to display your data. The following table describes the available chart types.

HTML5 Chart Types

Icon

Description

Column charts - Compare values displayed as columns

Column. Multiple measures of a group are depicted as individual columns.

Stacked Column. Multiple measures of a group are depicted as portions of a single column whose size reflects the aggregate value of the group.

Percent Column. Multiple measures of a group are depicted as portions of a single column of fixed size representing 100% of the amounts for a category. Used when you have three or more data series and want to compare distributions within categories and at the same time display the differences between categories.

Bar charts - Compare values displayed as bars

Bar. Graphically summarize and display categories of data to let users easily compare amounts or values among categories.

Stacked Bar. Multiple measures of a group are depicted as portions of a single bar whose size reflects the aggregate value of the group.

Percent Bar. Multiple measures of a group are depicted as portions of a single bar of fixed size representing 100% of the amounts for a category. Used when you have three or more data series and want to compare distributions within categories and at the same time display the differences between categories.

Line charts - Compare values displayed as points connected by lines

Line. Displays data points connected with straight lines, typically to show trends.

Spline. Displays data points connected with a fitted curve. Allow you to take a limited set of known data points and approximate intervening values.

Stacked Line. Displays series as a set of points connected by a line. Values are represented on the y-axis and categories are displayed on the x-axis. Lines do not overlap because they are cumulative at each point.

Stacked Spline. Displays series as a set of points connected with a fitted curve. Values are represented on the y-axis and categories are displayed on the x-axis. Lines do not overlap because they are cumulative at each point

Stacked Percent Line. A variation of a line chart in which each series adjoins but does not overlap the preceding series.

Stacked Percent Spline. A variation of a spline chart in which each series adjoins but does not overlap the preceding series.

Area charts - Compare values displayed as shaded areas. Compared to line charts, area charts emphasize quantities rather than trends.

Area. Displays data points connected with a straight line and a color below the line; groups are displayed as transparent overlays.

Stacked Area. Displays data points connected with a straight line and a solid color below the line; groups are displayed as solid areas arranged vertically, one on top of another.

Stacked Percent Area. Displays data points connected with a straight line and a solid color below the line; groups are displayed as portions of an area of fixed sized, and arranged vertically one on top of the another.

Area Spline. Displays data points connected with a fitted curve and a color below the line; groups are displayed as transparent overlays.

Stacked Area Spline. Displays a series as a set of points connected by a smooth line with the area below the line filled in. Values are represented on the y-axis and categories are displayed on the x-axis. Areas do not overlap because they are cumulative at each point.

Stacked Percent Area Spline. A variation of area spline charts that present values as trends for percentages, totaling 100% for each category.

Pie charts - Compare values displayed as slices of a circular graph

Pie. Multiple items of a single group are displayed as sectors of a circle.

Dual-Level Pie. A variation of pie charts that present grouped values in two concentric circles; the inner circle represents the coarsest grouping level in the data. In Jaspersoft Studio, note these rules about data configuration for dual-level pie charts:

• Only one measure is displayed (the first)
• The last row level is rendered as the outer pie
• The next to last row level is rendered as the inner pie; if only one row level is defined, the inner pie consists of a single section representing the total
Semi-Pie. Multiple measures of a group are displayed as sectors of a half-circle.

Scatter and Bubble Charts - Show the extent of correlation, if any, between the values of observed quantities.

Scatter. Displays a single point for each point in a data series without connecting the points.

Bubble. Compares the relationships between three measures displayed on the x-y axis. The location and size of each bubble indicates the relative values of each data point

Multi-Axis Charts - Compare trends in two or more data sets whose numeric range differ greatly.

Multi-Axis Column. A column chart with two series and two axis ranges.

Multi-Axis Line. A line chart with two series and two axis ranges.

Multi-Axis Spline. A spline chart with two series and two axis ranges.

Combination Charts - Display multiple data series in a single chart, combining the features of a area, bar, column, or line charts.

Column Line. Combines the features of a column chart with a line chart.

Column Spline. Combines the features of a column chart with a spline chart.

Stacked Column Line. Combines the features of a stacked column chart with a line chart.

Stacked Column Spline. Combines the features of a stacked column chart with a line chart.

Time Series Charts - Illustrate data points at successive time intervals. Also called Fever Chart.

Time Series Area. Displays data points over time connected with a straight line and a color below the line.

Time Series Area Spline. Displays data points over time connected with a fitted curve and a color below the line.

Time Series Line. Displays data points over time connected with straight lines.

Time Series Spline. Displays data points over time connected with a fitted curve.

Spider Charts - Display data in line or data bars arranged on a circular spider web chart. Also called a Radar Chart.

Spider Column. Plots one or more series over multiple common quantitative variables by providing axes for each variable arranged as spokes around a central point. The column variation of spider charts displays values as bars that extend out from the central point towards the edges of the circular web. The bar's length indicates the relative value.

Spider Line. Plots one or more series over multiple common quantitative variables by providing axes for each variable arranged as spokes around a central point. The line variation of spider charts displays values as points arranged around the circular web. The data points are joined by a line. Each point's distance from the central point indicates the relative value.

Spider Area. Plots one or more series over multiple common quantitative variables by providing axes for each variable arranged as spokes around a central point. The area variation of spider charts is similar to the line variation, but the shape defined by the line that connects each series' points is filled with color.
Range Charts
Heat Map. Represents data in a matrix format, using color coding to show values.
Time Series Heat Map. Represents data across time in a heat map, using color coding to show values.
Dual Measure Tree Map. Displays data as color-coded rectangles; the size of each rectangle is proportional to the first measure and the color represents the second measure.
Tree Map. Displays data as rectangles; the size of each rectangle is proportional to the measure of the data it represents. The tree map displays nested rectangles when you have more than one field; the parent rectangle represents the leftmost measure while the nested rectangles represent the current level of aggregation. Click on a parent rectangle to drill down to the nest rectangles
One Parent Tree Map. Displays data as nested rectangles; the size of each rectangle is proportional to the measure of the data it represents. The nested rectangles represent the current level of aggregation while the larger rectangle represents the parent level in the hierarchy. Click on a parent rectangle to drill down to the nest rectangles.
Tile Map. Displays data in the form of tiles aligned on a grid to create a pattern. The related data measure is displayed on each tile.
Gauge Charts

Gauge. Displays a single data value as a portion of a circle; the length of the circle is the data's numeric value proportional to the maximum size defined for the measure.

• One or more Measures required in the Columns location.
• One or more Fields required in the Columns location.
• Define the minimum and maximum sizes, color stops, and layout on the Appearance tab.

Multi-level Gauge. Displays one or more data values as concentric circles; each circle represents a measure and the length of the circle is the data's numeric value proportional to the maximum size defined for the measures.

• Two or more Measures required in the Columns location.
• One or more Fields required in the Columns location.
• Define the minimum and maximum sizes, color stops, and layout on the Appearance tab.

Arc Gauge. Displays a single data value as a portion of a semi-circular arc; the length of the arc is the data's value proportional to the maximum size defined for the measure.

• One or more Measures required in the Columns location.
• One or more Fields required in the Rows location.
• Define the minimum and maximum sizes, color stops, and layout on the Appearance tab.