Fusion Angular Gauge Chart example as ArcGauge in Jasper Reports | How to remove dial, pointer and show value with percentage for Angular Gauge Fusion widget in Jasper Reports

 In this post, you would learn how to implement a ArcGuage with value displayed with percentage (%) using Fusion Widget Pro - Angular Gauge chart. 

Problem Statement : 
Convert fusion widget "Angular Gauge" chart as "Arc Gauge" with percentage(%) value displayed OR say ArcGauge with progress from 1 to 100%. 

NOTE : Tap on to the images to get the original view of screenshots taken. 

Report Design:

Sample output

Key Implementations: 
1) Max and min values : 1 to 100 
    Once the color ranges applied the graph auto takes the range from 1 to 100 scale 

     

2) Remove Dial & Pointer 
Pointer : Give everything white colored as below to get rid of circular pointer

Dial: Give properties as shown below to get rid of Dial , Navigation : Widget Date > Anular Dials

3) Show Value ,  Font Size , Percentage Symbol 
Show value:  In the advaned properties add showValue=true (although you would have checkbox in the widget general properites. 

Font Size: As shown in below image , navigate to "Widget Configuration" > Common Options > Apply the size and color for value to be displayed as percentage

Percentage Symbol: 

In the advanced properties give numberSuffix="%"

All Advanced properties: 

JRXML : Developed using 7.8.0 professional version of Studio, it should work in same or higher versions. 

<?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="Angular Gauge Fusion Widget New" pageWidth="595" pageHeight="842" columnWidth="555" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" uuid="dcd1c309-22a0-4406-a92a-fcadefb6187c">
	<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/Test/Angular_Gauge_Fusion_Widget_New_files/main_jrxml"/>
	<property name="ireport.jasperserver.reportUnit" value="/EarthlySystemsReports/Test/Angular_Gauge_Fusion_Widget_New"/>
	<queryString language="SQL">
		<![CDATA[select 75 as value from customer limit 1]]>
	</queryString>
	<field name="value" class="java.lang.Integer">
		<property name="com.jaspersoft.studio.field.name" value="value"/>
		<property name="com.jaspersoft.studio.field.label" value="value"/>
	</field>
	<background>
		<band splitType="Stretch"/>
	</background>
	<summary>
		<band height="320" splitType="Stretch">
			<componentElement>
				<reportElement x="0" y="50" width="268" height="270" uuid="88e7e1c6-5a3a-4830-849e-3b4632885f18"/>
				<fw:angularGauge xmlns:fw="http://jaspersoft.com/fusion" xsi:schemaLocation="http://jaspersoft.com/fusion http://jaspersoft.com/schema/fusion.xsd">
					<dataset resetType="Report"/>
					<fw:dial>
						<fw:valueExpression><![CDATA[$F{value}]]></fw:valueExpression>
					</fw:dial>
				</fw:angularGauge>
			</componentElement>
			<componentElement>
				<reportElement x="290" y="50" width="268" height="270" uuid="8c9b13f3-f9ed-4c98-8962-d9583baac1dd"/>
				<fw:angularGauge xmlns:fw="http://jaspersoft.com/fusion" xsi:schemaLocation="http://jaspersoft.com/fusion http://jaspersoft.com/schema/fusion.xsd">
					<fw:widgetProperty name="showShadow">
						<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="setAdaptiveMin">
						<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="showTickMarks">
						<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="showLimits">
						<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="showTickValues">
						<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="pivotFillColor">
						<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="pivotBorderColor">
						<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="showGaugeBorder">
						<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="pivotFillAlpha">
						<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="pivotFillAngle">
						<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="pivotBorderAlpha">
						<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="gaugeBorderColor">
						<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="animation">
						<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="baseFontSize">
						<fw:propertyExpression><![CDATA[new Integer(35)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="baseFont">
						<fw:propertyExpression><![CDATA["Arial Black"]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="baseFontColor">
						<fw:propertyExpression><![CDATA[new java.awt.Color(-16777216)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="bgColor">
						<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="showValue">
						<fw:propertyExpression><![CDATA[true]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="numberSuffix">
						<fw:propertyExpression><![CDATA["%"]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="gaugeInnerRadius">
						<fw:propertyExpression><![CDATA[90]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="gaugeBorderAlpha">
						<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:widgetProperty name="paletteThemeColor">
						<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
					</fw:widgetProperty>
					<fw:colorRange color="#8CBD2A">
						<fw:minValueExpression><![CDATA[new Integer(0)]]></fw:minValueExpression>
						<fw:maxValueExpression><![CDATA[$F{value}]]></fw:maxValueExpression>
						<fw:labelExpression><![CDATA["green"]]></fw:labelExpression>
					</fw:colorRange>
					<fw:colorRange color="#E6E6E6">
						<fw:minValueExpression><![CDATA[$F{value}]]></fw:minValueExpression>
						<fw:maxValueExpression><![CDATA[new Integer(100)]]></fw:maxValueExpression>
						<fw:labelExpression><![CDATA["ash"]]></fw:labelExpression>
					</fw:colorRange>
					<dataset resetType="Report"/>
					<fw:dial>
						<fw:dialProperty name="borderColor">
							<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
						</fw:dialProperty>
						<fw:dialProperty name="bgColor">
							<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
						</fw:dialProperty>
						<fw:valueExpression><![CDATA[$F{value}]]></fw:valueExpression>
					</fw:dial>
				</fw:angularGauge>
			</componentElement>
			<textField>
				<reportElement x="0" y="10" width="270" height="30" uuid="086f3b75-085a-4088-9c29-5a0f7837ccc8"/>
				<textElement textAlignment="Center" verticalAlignment="Middle">
					<font size="12" isBold="true"/>
				</textElement>
				<textFieldExpression><![CDATA["Default Angular Gauge"]]></textFieldExpression>
			</textField>
			<textField>
				<reportElement x="290" y="10" width="270" height="30" uuid="3db4bc99-9491-4f9e-b23e-5fcfb90038ac"/>
				<textElement textAlignment="Center" verticalAlignment="Middle">
					<font size="12" isBold="true"/>
				</textElement>
				<textFieldExpression><![CDATA["Angular Gauge As Progress Guage"]]></textFieldExpression>
			</textField>
		</band>
	</summary>
</jasperReport>