Hi folks,
In this post, you would see how to work with SparkLine widget in Jaspersoft reports. I'd be explaining core points as steps in this article.
The aim of the post is to develop a report which would have below look and feel with sparkline widget.
1) Write below query in Query editor of the JRXML
Sample query:
(SELECT 'text' AS text1, 'text' AS text2, 10 AS value1, 20 AS value2, 30 AS value3, 40 AS value4, 1234 AS value FROM customer limit 1)
UNION ALL
(SELECT 'text' AS text1, 'text' AS text2, 34 AS value1, 54 AS value2, 12 AS value3, 78 AS value4, 1234 AS value FROM customer limit 1)
UNION ALL
(SELECT 'text' AS text1, 'text' AS text2, 43 AS value1, 76 AS value2, 21 AS value3, 40 AS value4, 1234 AS value FROM customer limit 1)
UNION ALL
(SELECT 'text' AS text1, 'text' AS text2, 40 AS value1, 20 AS value2, 12 AS value3, 43 AS value4, 1234 AS value FROM customer limit 1)
UNION ALL
(SELECT 'text' AS text1, 'text' AS text2, 65 AS value1, 21 AS value2, 87 AS value3, 45 AS value4, 1234 AS value FROM customer limit 1)
Sample output of the above query:
2) Drag and drop SparkLine widget from the "Widget Pro" section of the Palette.
3) Our goal to get the spark lines in details of the report, so the report design should look like below
i.e., keep spark line widget graph in detail band
4) Edit widget properties to provide the values for lines plotting on visualization. Usually, in a normal line chart we take category and values to plot lines but in case of spark lines we take directly the numeric columns say value1, value2, value3 and value4 from the sample query.
IMP NOTE : Ensure that Reset Type = None in "Widget Data" section of "Dataset"
IMP NOTE: Take a look at the Basic and Advanced properties of Widget graph to get the exact look and feel as shown in this article in the top image.
5) Save the report and publish it to jasperserver and you would be able to see the report output as shown in very first image of the post.
JRXML : ( Supported in 6.4.2 Professional)
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Jaspersoft Studio version 6.4.2.final using JasperReports Library version 6.4.1 -->
<jasperReport 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" name="SparkLineWidgetDemo" pageWidth="595" pageHeight="842" columnWidth="555" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" uuid="a3ce0107-9a6a-4388-a083-a433148b1fc7">
<property name="com.jaspersoft.studio.data.defaultdataadapter" value="foodmartlatha"/>
<property name="com.jaspersoft.studio.data.sql.tables" value=""/>
<property name="ireport.jasperserver.url" value="http://localhost:8080/jasperserver-pro/"/>
<property name="ireport.jasperserver.user" value="superuser"/>
<property name="ireport.jasperserver.report.resource" value="/EarthlySystems/SparkLineWidgetDemo_files/main_jrxml"/>
<property name="ireport.jasperserver.reportUnit" value="/EarthlySystems/SparkLineWidgetDemo"/>
<queryString>
<![CDATA[(SELECT 'text' AS text1, 'text' AS text2, 10 AS value1, 20 AS value2, 30 AS value3, 40 AS value4, 1234 AS value FROM customer limit 1)
UNION ALL
(SELECT 'text' AS text1, 'text' AS text2, 34 AS value1, 54 AS value2, 12 AS value3, 78 AS value4, 1234 AS value FROM customer limit 1)
UNION ALL
(SELECT 'text' AS text1, 'text' AS text2, 43 AS value1, 76 AS value2, 21 AS value3, 40 AS value4, 1234 AS value FROM customer limit 1)
UNION ALL
(SELECT 'text' AS text1, 'text' AS text2, 40 AS value1, 20 AS value2, 12 AS value3, 43 AS value4, 1234 AS value FROM customer limit 1)
UNION ALL
(SELECT 'text' AS text1, 'text' AS text2, 65 AS value1, 21 AS value2, 87 AS value3, 45 AS value4, 1234 AS value FROM customer limit 1)]]>
</queryString>
<field name="text1" class="java.lang.String"/>
<field name="text2" class="java.lang.String"/>
<field name="value1" class="java.lang.Integer"/>
<field name="value2" class="java.lang.Integer"/>
<field name="value3" class="java.lang.Integer"/>
<field name="value4" class="java.lang.Integer"/>
<field name="value" class="java.lang.Integer"/>
<title>
<band height="30" splitType="Stretch">
<textField>
<reportElement x="0" y="0" width="555" height="30" uuid="afa9e0e5-7363-4dd3-9b8f-cf0b78ac465d"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font size="18" isBold="true"/>
</textElement>
<textFieldExpression><![CDATA["Spark Line Widget Graph Demo"]]></textFieldExpression>
</textField>
</band>
</title>
<columnHeader>
<band height="30" splitType="Stretch">
<staticText>
<reportElement x="0" y="0" width="100" height="30" uuid="e9309669-8240-4ba6-99ca-5dcb335ac043"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font isBold="true"/>
</textElement>
<text><![CDATA[Text1]]></text>
</staticText>
<staticText>
<reportElement x="100" y="0" width="100" height="30" uuid="be44cc9b-56da-4d81-93d4-2f41f83f2fb9"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font isBold="true"/>
</textElement>
<text><![CDATA[Text2]]></text>
</staticText>
<staticText>
<reportElement x="400" y="0" width="150" height="30" uuid="d0b9756c-cd17-46d7-ae12-813f35f8fbf0"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font isBold="true"/>
</textElement>
<text><![CDATA[Value]]></text>
</staticText>
<staticText>
<reportElement x="200" y="0" width="200" height="30" uuid="723477ea-8530-4357-84a1-952cc53ddb03"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font isBold="true"/>
</textElement>
<text><![CDATA[Spark Line Graph]]></text>
</staticText>
</band>
</columnHeader>
<detail>
<band height="38" splitType="Stretch">
<componentElement>
<reportElement isPrintRepeatedValues="false" x="200" y="0" width="200" height="30" uuid="e6e7f751-bf9e-4678-918c-e9cf18584ec4">
<property name="com.jaspersoft.studio.unit.y" value="pixel"/>
</reportElement>
<fw:sparkLine xmlns:fw="http://jaspersoft.com/fusion" xsi:schemaLocation="http://jaspersoft.com/fusion http://jaspersoft.com/schema/fusion.xsd">
<fw:widgetProperty name="showCloseValue">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="showHighLowValue">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="showLowAnchor">
<fw:propertyExpression><![CDATA[Boolean.TRUE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="showCloseAnchor">
<fw:propertyExpression><![CDATA[Boolean.TRUE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="anchorColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-16154438)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="anchorRadius">
<fw:propertyExpression><![CDATA[new Integer(2)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="showHighAnchor">
<fw:propertyExpression><![CDATA[Boolean.TRUE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="showOpenAnchor">
<fw:propertyExpression><![CDATA[Boolean.TRUE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="openColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-16759166)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="closeColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-16759166)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="highColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-16759166)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="lowColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-16759166)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="lineColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-10987173)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="lineThickness">
<fw:propertyExpression><![CDATA[new Integer(1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="anchorSides">
<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="showBorder">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="borderColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="borderThickness">
<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="bgColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-2105118)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="periodLength">
<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="periodColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="drawAnchors">
<fw:propertyExpression><![CDATA[Boolean.TRUE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="showOpenValue">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetProperty name="connectNullData">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:valuesDataset>
<dataset resetType="None"/>
<fw:valueExpression><![CDATA[$F{value1}]]></fw:valueExpression>
<fw:valueExpression><![CDATA[$F{value2}]]></fw:valueExpression>
<fw:valueExpression><![CDATA[$F{value3}]]></fw:valueExpression>
<fw:valueExpression><![CDATA[$F{value4}]]></fw:valueExpression>
</fw:valuesDataset>
</fw:sparkLine>
</componentElement>
<textField>
<reportElement x="0" y="0" width="100" height="30" uuid="4f213fe8-8d1e-449c-87ba-ae38a3dbad53"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font isBold="false"/>
</textElement>
<textFieldExpression><![CDATA[$F{text1}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="100" y="0" width="100" height="30" uuid="d6db57ae-f3e8-4a49-beb8-61f7e2d40600"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font isBold="false"/>
</textElement>
<textFieldExpression><![CDATA[$F{text2}]]></textFieldExpression>
</textField>
<textField>
<reportElement x="400" y="0" width="150" height="30" uuid="afb01f97-c840-4687-b167-1a4152cfd1f2"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{value}]]></textFieldExpression>
</textField>
</band>
</detail>
</jasperReport>
I hope this example helps someone in community.!
- Sadakar Pochampalli
No comments:
Post a Comment