Jump to content
We've recently updated our Privacy Statement, available here ×

  • 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

    sadakar
     Share

     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:

     

    design.png
    Sample output

     

    angular%2Bgauge.png

    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 
         
    green.png

    ash.png

    2) Remove Dial & Pointer 
    Pointer : Give everything white colored as below to get rid of circular pointer
    pointer.png
    Dial: Give properties as shown below to get rid of Dial , Navigation : Widget Date > Anular Dials
    dial.png

    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

    cp.png

    Percentage Symbol: 
    In the advanced properties give numberSuffix="%"

    All Advanced properties: 
    advaned%2Bproperties.png



    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>
     Share
    Go to blogs

    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    This is now closed for further comments

×
×
  • Create New...

© 2024 Cloud Software Group,
Inc. All rights reserved.

Products

Explore