Advanced formatting with new HTML5 charts. Jaspersoft’s new HTML5 Pro charts allow you to create dynamic, visually appealing interactive content.
Advanced options can help you get the most out of them.
iReport Professional version5.0 introduced Jaspersoft’s new HTML5 charting library.
This entirely new set of interactive charts is not only visually attractive, it combines advanced chart capabilities with a rich set of supported user interactions including the ability to change the chart type on the fly. Let’s take a look at some of these new features as they appear when creating your content in iReport and when rendered on the JasperReports Server.
Below is an example of a simple and rather plain HTML5 chart.
The standard default settings provide a clean and readable, if not exciting, default set of visual settings. The most commonly used settings and rendering options can be accessed through the Chart Settings menu. This setting dialog can be access via the HTML5 Chart context menu (right click on the chart while it’s the active component in the designer). While these cover most of the settings required to customize the look and feel of many charts there are more sophisticated settings that can only be configured using the Advanced Options dialog.
Click the Show Advanced Options button located to the lower right of the Chart Setting dialog.
For a list of the available options, consult the Highcharts API reference at http://api.highcharts.com/highcharts. By expanding the available options, the hierarchy of settings can be viewed. When setting a Property Name, access a nested setting using the “.” character.
Another example modifies the yAxis label for a chart:
When entering an advanced setting, be sure to differentiate between a value and an expression. In general, a numeric setting can be considered a value and other types, an expression. Setting parameters must be either be of a native Java type or explicitly cast to a Java language construct. Note the setting in the example below: the gradient definition is explicitly cast to an array and returned as a list.
Currently iReport does not allow a Javascript function as a setting. Functions are first class constructs in Javascript without an analog in Java. As a result, they will be interpreted as strings and surrounded with quotes.
As an example, when setting a plot area a gradient resulting in the background in the chart to the left.
Note the JSON formatted settings in the Javascript constructor.
To configure the same settings using iReport, two settings must be added via the Advanced Options dialog. The first is featured in next example dialog. The gradient setting is nested within the chart and background color settings and is therefore defined as chart.backgroundColor.linearGradient. As noted previously, all settings must be cast, either explicitly or implicitly to a Java data type. The gradient takes an array as a parameter and therefore must explicitly be returned as a list, using the static java.util.Arrays.asList method.
To render the gradient, a second setting must be added to define stops - chart.backgroundColor.stops. This setting requires an array of arrays and is expressed through the nested use of java.util.Arrays.
Boolean values must also be explicitly returned as a Java Boolean class using the static field Boolean.TRUE (or Boolean.FALSE).
Below is the finished chart, customized through the use of advanced options followed by the source JRXML.
<!--?xml version="1.0" encoding="UTF-8"?-->
<jasperreport bottommargin="20" columnwidth="984" leftmargin="20"
name="ChartingNumber1" pageheight="842" pagewidth="1024"
rightmargin="20" topmargin="20"
uuid="b805407a-9ca3-4b37-945a-37e767cd090f"
xmlns="http://jasperreports.sourceforge.net/jasperreports"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemalocation="http://jasperreports.sourceforge.net/jasperreports
http://jasperreports.sourceforge.net/xsd/jasperreport.xsd">
<property name="ireport.zoom" value="1.0" />
<property name="ireport.x" value="0" />
<property name="ireport.y" value="0" />
<querystring>
<!--[CDATA[
SELECT sum(store_sales) store_sales, sum(store_cost) store_cost, store_type
FROM "public"."sales_fact_1998" sales
JOIN "public"."store" store ON (sales.store_id = store.store_id)
GROUP BY store_type]]-->
</querystring>
<field class="java.math.BigDecimal" name="store_sales" />
<field class="java.math.BigDecimal" name="store_cost" />
<field class="java.lang.String" name="store_type" />
<title />
<summary>
<band height="300" splittype="Stretch">
<componentelement>
<reportelement height="300"
uuid="2b74e453-cd88-476e-ae4b-786bd34d8383" width="800" x="0" y="0" />
<hc:chart type="Column" xmlns:hc="http://jaspersoft.com/highcharts"
xsi:schemalocation="http://jaspersoft.com/highcharts
http://jaspersoft.com/schema/highcharts.xsd">
<hc:chartsetting name="default">
<hc:chartproperty name="xAxis.labels.rotation" value="45" />
<hc:chartproperty name="credits.href" value="http://www.jaspersoft.com" />
<hc:chartproperty name="credits.text" value="Jaspersoft" />
<hc:chartproperty name="chart.shadow">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="chart.showAxes">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="chart.borderRadius">
<hc:propertyexpression>
<!--[CDATA[3]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="chart.zoomType" value="xy" />
<hc:chartproperty name="chart.plotShadow">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="subtitle.style.color" value="#FFFFFF" />
<hc:chartproperty name="legend.borderRadius">
<hc:propertyexpression>
<!--[CDATA[3]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="tooltip.useHTML">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="plotOptions.column.selected">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="tooltip.borderColor" value="#006666" />
<hc:chartproperty name="chart.backgroundColor.linearGradient">
<hc:propertyexpression>
<!--[CDATA[java.util.Arrays.asList(0,0,500,500)]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="chart.backgroundColor.stops">
<hc:propertyexpression>
<!--[CDATA[java.util.Arrays.asList(
java.util.Arrays.asList(0, "#b5bdc8"),
java.util.Arrays.asList(0.36,"#828c95"),
java.util.Arrays.asList(1,"#28343b"))]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="xAxis.labels.style.color">
<hc:propertyexpression>
<!--[CDATA["#FFFFFF"]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="legend.floating">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="legend.align">
<hc:propertyexpression>
<!--[CDATA["center"]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="legend.shadow">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="legend.y">
<hc:propertyexpression>
<!--[CDATA[-200]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="colors">
<hc:propertyexpression>
<!--[CDATA[java.util.Arrays.asList(
"#AA4643","#89A54E","#3D96AE",
"#80699B","#4572A7","#DB843D",
"#92A8CD","#A47D7C","#B5CA92")]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="title.style.color" value="#CCCCCC" />
<hc:chartproperty name="title.text" value="A More Sophisticated and Interesting Chart" />
<hc:chartproperty name="tooltip.shared">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="legend.backgroundColor" value="#FFFFFF" />
<hc:chartproperty name="exporting.enabled">
<hc:propertyexpression>
<!--[CDATA[Boolean.TRUE]]-->
</hc:propertyexpression>
</hc:chartproperty>
<hc:chartproperty name="xAxis.labels.style.fontSize" value="11" />
<hc:chartproperty name="yAxis.title.text">
<hc:propertyexpression>
<!--[CDATA["Dollars"]]-->
</hc:propertyexpression>
</hc:chartproperty>
<multiaxisdata>
<multiaxisdataset>
<dataaxis axis="Rows">
<axislevel name="Store Type">
<labelexpression>
<!--[CDATA["Store32Type"]]-->
</labelexpression>
<axislevelbucket class="java.lang.Comparable">
<bucketexpression>
<!--[CDATA[$F{store_type}]]-->
</bucketexpression>
</axislevelbucket>
</axislevel>
</dataaxis>
<dataaxis axis="Columns">
<multiaxismeasure calculation="Nothing"
class="java.lang.Number"
name="Store Sales">
<labelexpression>
<!--[CDATA["Sales"]]-->
</labelexpression>
<valueexpression>
<!--[CDATA[$F{store_sales}]]-->
</valueexpression>
</multiaxismeasure>
<multiaxismeasure calculation="Nothing"
class="java.lang.Number"
name="Cost">
<labelexpression>
<!--[CDATA["Cost"]]-->
</labelexpression>
<valueexpression>
<!--[CDATA[$F{store_cost}]]-->
</valueexpression>
</multiaxismeasure>
</dataaxis>
</multiaxisdataset>
</multiaxisdata>
<hc:series name="f" />
<hc:series name="S" />
<hc:series name="St" />
<hc:series name="Sto" />
<hc:series name="Stor" />
<hc:series name="Store" />
<hc:series name="Store " />
<hc:series name="Store s" />
<hc:series name="Store sa" />
<hc:series name="Store sal" />
<hc:series name="Store sale" />
<hc:series name="Store sales" />
<hc:series name="Store ales" />
<hc:series name="Store Sales" />
</hc:chartsetting>
</hc:chart>
</componentelement>
</band>
</summary>
Recommended Comments
There are no comments to display.