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:
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
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.
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
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 -->
<jasperReportxmlns="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">
<propertyname="com.jaspersoft.studio.data.sql.tables"value=""/>
<propertyname="com.jaspersoft.studio.data.defaultdataadapter"value="foodmart"/>
<propertyname="ireport.jasperserver.url"value="http://localhost:8080/jasperserver-pro/"/>
<propertyname="ireport.jasperserver.user"value="superuser"/>
<propertyname="ireport.jasperserver.report.resource"value="/EarthlySystemsReports/Test/Angular_Gauge_Fusion_Widget_New_files/main_jrxml"/>
<propertyname="ireport.jasperserver.reportUnit"value="/EarthlySystemsReports/Test/Angular_Gauge_Fusion_Widget_New"/>
<queryStringlanguage="SQL">
<![CDATA[select 75 as value from customer limit 1]]>
</queryString>
<fieldname="value"class="java.lang.Integer">
<propertyname="com.jaspersoft.studio.field.name"value="value"/>
<propertyname="com.jaspersoft.studio.field.label"value="value"/>
</field>
<background>
<bandsplitType="Stretch"/>
</background>
<summary>
<bandheight="320"splitType="Stretch">
<componentElement>
<reportElementx="0"y="50"width="268"height="270"uuid="88e7e1c6-5a3a-4830-849e-3b4632885f18"/>
<fw:angularGaugexmlns:fw="http://jaspersoft.com/fusion"xsi:schemaLocation="http://jaspersoft.com/fusion http://jaspersoft.com/schema/fusion.xsd">
<datasetresetType="Report"/>
<fw:dial>
<fw:valueExpression><![CDATA[$F{value}]]></fw:valueExpression>
</fw:dial>
</fw:angularGauge>
</componentElement>
<componentElement>
<reportElementx="290"y="50"width="268"height="270"uuid="8c9b13f3-f9ed-4c98-8962-d9583baac1dd"/>
<fw:angularGaugexmlns:fw="http://jaspersoft.com/fusion"xsi:schemaLocation="http://jaspersoft.com/fusion http://jaspersoft.com/schema/fusion.xsd">
<fw:widgetPropertyname="showShadow">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="setAdaptiveMin">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="showTickMarks">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="showLimits">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="showTickValues">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="pivotFillColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="pivotBorderColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="showGaugeBorder">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="pivotFillAlpha">
<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="pivotFillAngle">
<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="pivotBorderAlpha">
<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="gaugeBorderColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="animation">
<fw:propertyExpression><![CDATA[Boolean.FALSE]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="borderColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="baseFontSize">
<fw:propertyExpression><![CDATA[new Integer(35)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="baseFont">
<fw:propertyExpression><![CDATA["Arial Black"]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="baseFontColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-16777216)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="bgColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="showValue">
<fw:propertyExpression><![CDATA[true]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="numberSuffix">
<fw:propertyExpression><![CDATA["%"]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="gaugeInnerRadius">
<fw:propertyExpression><![CDATA[90]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="gaugeBorderAlpha">
<fw:propertyExpression><![CDATA[new Integer(0)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:widgetPropertyname="paletteThemeColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:widgetProperty>
<fw:colorRangecolor="#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:colorRangecolor="#E6E6E6">
<fw:minValueExpression><![CDATA[$F{value}]]></fw:minValueExpression>
<fw:maxValueExpression><![CDATA[new Integer(100)]]></fw:maxValueExpression>
<fw:labelExpression><![CDATA["ash"]]></fw:labelExpression>
</fw:colorRange>
<datasetresetType="Report"/>
<fw:dial>
<fw:dialPropertyname="borderColor">
<fw:propertyExpression><![CDATA[new java.awt.Color(-1)]]></fw:propertyExpression>
</fw:dialProperty>
<fw:dialPropertyname="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>
<reportElementx="0"y="10"width="270"height="30"uuid="086f3b75-085a-4088-9c29-5a0f7837ccc8"/>
<textElementtextAlignment="Center"verticalAlignment="Middle">
<fontsize="12"isBold="true"/>
</textElement>
<textFieldExpression><![CDATA["Default Angular Gauge"]]></textFieldExpression>
</textField>
<textField>
<reportElementx="290"y="10"width="270"height="30"uuid="3db4bc99-9491-4f9e-b23e-5fcfb90038ac"/>
<textElementtextAlignment="Center"verticalAlignment="Middle">
<fontsize="12"isBold="true"/>
</textElement>
<textFieldExpression><![CDATA["Angular Gauge As Progress Guage"]]></textFieldExpression>
</textField>
</band>
</summary>
</jasperReport>