ArcGuage HTML-5 chart example in jaspersoft reports | How to format "DataLabel" for ArcGuage chart in Jaspersoft Design Studio ?

Sadakar Pochampalli
JasperSoft BI Suite Tutorials - Sadakar Pochampalli )

Hi, 
In this post, you would lean how to implement "ArcGuage" HTML-5 chart in jasper reports. 

1.  Drag and Drop "ArcGauge" from HTML-5 charts. 
2. Configure query value or modify existing value for "Measure". 
3. Apply advanced properties for the chart. 

Example Developed on :
7.8 TIBCO Jaspersoft Studio Professional and expect to work on same on higher versions. 
7.8 Enterprise JasperReports Server

Design: 


Output: 


Key implementations: (or Advanced Properties Applied on ArcGuage chart)

1. Format -->75%

plotOptions.solidgauge.dataLabels.format = "{point.y}%"  (Use Expression)



2. fontSize --> 20px
plotOptions.solidgauge.dataLabels.fontSize=20px (with out expression checked)


3.Datalabel.y --> 10
plotOptions.solidgauge.dataLabels.y=10 (with expression checked)


JRXML:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Jaspersoft Studio version 7.8.0.final using JasperReports Library version 6.14.0-2ab0d8625be255bf609c78e1181801213e51db8f -->
<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="GuagueCharts" pageWidth="595" pageHeight="842" columnWidth="555" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" uuid="f27937b3-0ad1-4a1e-a658-f3719eeec5fa">
<property name="com.jaspersoft.studio.data.sql.tables" value=""/>
<property name="com.jaspersoft.studio.data.defaultdataadapter" value="foodmart"/>
<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="/EarthlySystemsReports/GuagueCharts_files/main_jrxml"/>
<property name="ireport.jasperserver.reportUnit" value="/EarthlySystemsReports/GuagueCharts"/>
<queryString language="SQL">
<![CDATA[select 1 as One]]>
</queryString>
<field name="one" class="java.lang.Integer">
<property name="com.jaspersoft.studio.field.name" value="one"/>
<property name="com.jaspersoft.studio.field.label" value="one"/>
</field>
<title>
<band height="433" splitType="Stretch">
<componentElement>
<reportElement x="360" y="130" width="190" height="190" uuid="903e1a78-2f90-4af9-a8fa-5d005b912bc6"/>
<hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="ArcGauge" evaluationTime="Report">
<hc:chartSetting name="default">
<hc:chartProperty name="title.text" value=""/>
<hc:chartProperty name="credits.enabled" value="false"/>
<hc:chartProperty name="credits.href" value=""/>
<hc:chartProperty name="credits.text" value=""/>
<hc:chartProperty name="yAxis.title.text" value=""/>
<hc:chartProperty name="chart.zoomType" value="xy"/>
<hc:chartProperty name="yAxis.labels.y">
<hc:propertyExpression><![CDATA[-45]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="colors_customSimpleMode" value="true"/>
<hc:chartProperty name="colors">
<hc:propertyExpression><![CDATA[Arrays.asList("#FFBA2C","#434348","#90ed7d","#f7a35c","#8085e9","#f15c80","#e4d354","#2b908f","#f45b5b","#91e8e1")]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="chart.borderRadius_measureUnit" value="{&quot;key&quot;:&quot;px&quot;,&quot;name&quot;:&quot;px&quot;}"/>
<hc:chartProperty name="chart.borderRadius_customSimpleMode" value="true"/>
<hc:chartProperty name="chart.borderRadius">
<hc:propertyExpression><![CDATA[0]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="chart.borderWidth_measureUnit" value="{&quot;key&quot;:&quot;px&quot;,&quot;name&quot;:&quot;px&quot;}"/>
<hc:chartProperty name="chart.borderWidth_customSimpleMode" value="true"/>
<hc:chartProperty name="chart.borderWidth">
<hc:propertyExpression><![CDATA[0]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="chart.plotBorderWidth_measureUnit" value="{&quot;key&quot;:&quot;px&quot;,&quot;name&quot;:&quot;px&quot;}"/>
<hc:chartProperty name="chart.plotBorderWidth_customSimpleMode" value="true"/>
<hc:chartProperty name="chart.plotBorderWidth">
<hc:propertyExpression><![CDATA[0]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="plotOptions.series.lineWidth_measureUnit" value="{&quot;key&quot;:&quot;px&quot;,&quot;name&quot;:&quot;px&quot;}"/>
<hc:chartProperty name="plotOptions.series.lineWidth_customSimpleMode" value="true"/>
<hc:chartProperty name="plotOptions.series.lineWidth">
<hc:propertyExpression><![CDATA[2]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="plotOptions.solidgauge.rounded_customSimpleMode" value="true"/>
<hc:chartProperty name="plotOptions.solidgauge.rounded">
<hc:propertyExpression><![CDATA[true]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="plotOptions.solidgauge.dataLabels.style.fontSize" value="20px"/>
<hc:chartProperty name="plotOptions.solidgauge.dataLabels.y_customSimpleMode" value="true"/>
<hc:chartProperty name="plotOptions.solidgauge.dataLabels.y">
<hc:propertyExpression><![CDATA[10]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="plotOptions.solidgauge.dataLabels.format">
<hc:propertyExpression><![CDATA[" {point.y} % "]]></hc:propertyExpression>
</hc:chartProperty>
</hc:chartSetting>
<multiAxisData>
<multiAxisDataset>
<dataset resetType="Report"/>
</multiAxisDataset>
<dataAxis axis="Rows">
<axisLevel name="Level1">
<labelExpression><![CDATA["Level Label expression"]]></labelExpression>
<axisLevelBucket class="java.lang.Comparable">
<bucketExpression><![CDATA["Change Me"]]></bucketExpression>
</axisLevelBucket>
</axisLevel>
</dataAxis>
<dataAxis axis="Columns"/>
<multiAxisMeasure name="Measure1" class="java.lang.Number" calculation="Nothing">
<labelExpression><![CDATA["!MEASURE LABEL!"]]></labelExpression>
<valueExpression><![CDATA[new Integer(75)]]></valueExpression>
</multiAxisMeasure>
</multiAxisData>
<hc:series name="Measure1"/>
</hc:chart>
</componentElement>
<componentElement>
<reportElement x="20" y="130" width="190" height="190" uuid="4e9d2f6d-3ed7-432f-b03f-692decdd6abf"/>
<hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="ArcGauge" evaluationTime="Report">
<hc:chartSetting name="default">
<hc:chartProperty name="title.text" value=""/>
<hc:chartProperty name="credits.enabled" value="false"/>
<hc:chartProperty name="credits.href" value=""/>
<hc:chartProperty name="credits.text" value=""/>
<hc:chartProperty name="yAxis.title.text" value=""/>
<hc:chartProperty name="chart.zoomType" value="xy"/>
<hc:chartProperty name="com.jaspersoft.studio.highcharts.dataconfiguration.simple" value="true"/>
</hc:chartSetting>
<multiAxisData>
<multiAxisDataset>
<dataset resetType="Report"/>
</multiAxisDataset>
<dataAxis axis="Rows">
<axisLevel name="Level1">
<labelExpression><![CDATA["Level Label expression"]]></labelExpression>
<axisLevelBucket class="java.lang.Comparable">
<bucketExpression><![CDATA["Change Me"]]></bucketExpression>
</axisLevelBucket>
</axisLevel>
</dataAxis>
<multiAxisMeasure name="Measure1" class="java.lang.Number" calculation="Nothing">
<labelExpression><![CDATA["!MEASURE LABEL!"]]></labelExpression>
<valueExpression><![CDATA[new Integer(75)]]></valueExpression>
</multiAxisMeasure>
</multiAxisData>
</hc:chart>
</componentElement>
<textField>
<reportElement x="20" y="25" width="524" height="30" uuid="f7ce943c-5507-4840-b765-50dda242be63"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font size="14" isBold="true"/>
</textElement>
<textFieldExpression><![CDATA["ArcGauge Example in Jaspersoft Reports"]]></textFieldExpression>
</textField>
<textField>
<reportElement x="20" y="100" width="190" height="30" uuid="0a91f891-9ee2-40c0-8922-777a80a66441"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font size="14" isBold="true"/>
</textElement>
<textFieldExpression><![CDATA["From"]]></textFieldExpression>
</textField>
<textField>
<reportElement x="354" y="100" width="190" height="30" uuid="889ebff8-e786-427d-ac3f-33ae603875b2"/>
<textElement textAlignment="Center" verticalAlignment="Middle">
<font size="14" isBold="true"/>
</textElement>
<textFieldExpression><![CDATA["TO"]]></textFieldExpression>
</textField>
</band>
</title>
</jasperReport>
Feedback
randomness