For HTML-5 Stacked Percentage Bar Chart in Jaspersoft Design Studio
How to get percentage on bars ? When there are two percentages, for instance 0 and 100 - how to hide 0 and display only 100% on bar ? How to maintain fixed width for bars ?
Below image depicts how the visualization outputs before and after applying basic and advanced properties
Tap on the image for better visibility.
Below advanced properties makes the graph to look like on the right side graph
1) To get percentage on bars
plotOptions.series.dataLabels.enabled = true
2) To get the percentage on bars with value 0 disabled and 100 having percentage symbol
plotOptions.series.dataLabels.formatter="function(){ var val = this.y; if(val == 0){return '';} else return val+'%';}"
The equivalent java script for this is as follows.
function(){
var val =this.y;
if(val ==0){
return'';
}
else
return val+'%';
}
3) To fix the bar width give
plotOptions.bar.pointWidth=30
(Tap on the image for better visibility)
JRXML( Works on 7.9.0 Professional Studio or later)
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Jaspersoft Studio version 7.9.0.final using JasperReports Library version 6.16.0-48579d909b7943b64690c65c71e07e0b80981928 -->
<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="HTML-5StackedPercentageBarChart.jrxml"pageWidth="1200"pageHeight="842"columnWidth="1160"leftMargin="20"rightMargin="20"topMargin="20"bottomMargin="20"uuid="831cc732-af9c-4611-9fda-cc7946b3ba40">
<propertyname="com.jaspersoft.studio.data.sql.tables"value=""/>
<propertyname="com.jaspersoft.studio.data.defaultdataadapter"value="foodmartVeeraTraining"/>
<propertyname="ireport.jasperserver.url"value="http://localhost:8080/jasperserver-pro/"/>
<propertyname="ireport.jasperserver.user"value="superuser"/>
<propertyname="ireport.jasperserver.reportUnit"value="/Training2023/HTML_5StackedPercentageBarChart"/>
<propertyname="ireport.jasperserver.report.resource"value="/Training2023/HTML_5StackedPercentageBarChart_files/main_jrxml"/>
<propertyname="com.jaspersoft.studio.unit."value="pixel"/>
<propertyname="com.jaspersoft.studio.unit.pageHeight"value="pixel"/>
<propertyname="com.jaspersoft.studio.unit.pageWidth"value="pixel"/>
<propertyname="com.jaspersoft.studio.unit.topMargin"value="pixel"/>
<propertyname="com.jaspersoft.studio.unit.bottomMargin"value="pixel"/>
<propertyname="com.jaspersoft.studio.unit.leftMargin"value="pixel"/>
<propertyname="com.jaspersoft.studio.unit.rightMargin"value="pixel"/>
<propertyname="com.jaspersoft.studio.unit.columnWidth"value="pixel"/>
<propertyname="com.jaspersoft.studio.unit.columnSpacing"value="pixel"/>
<queryStringlanguage="SQL">
<![CDATA[(select 'Cate10' as Category, 'Series1' as Series, 40 as SeriesValue limit 1)
union all
(select 'Cate10' as Category, 'Series2' as Series, 60 as SeriesValue limit 1)
union all
(select 'Cate9' as Category, 'Series1' as Series, 10 as SeriesValue limit 1)
union all
(select 'Cate9' as Category, 'Series2' as Series, 90 as SeriesValue limit 1)
union all
(select 'Cate8' as Category, 'Series1' as Series, 100 as SeriesValue limit 1)
union all
(select 'Cate8' as Category, 'Series2' as Series, 0 as SeriesValue limit 1)
union all
(select 'Cate7' as Category, 'Series1' as Series, 45 as SeriesValue limit 1)
union all
(select 'Cate7' as Category, 'Series2' as Series, 55 as SeriesValue limit 1)
union all
(select 'Cate6' as Category, 'Series1' as Series, 80 as SeriesValue limit 1)
union all
(select 'Cate6' as Category, 'Series2' as Series, 20 as SeriesValue limit 1)
union all
(select 'Cate5' as Category, 'Series1' as Series, 15 as SeriesValue limit 1)
union all
(select 'Cate5' as Category, 'Series2' as Series, 85 as SeriesValue limit 1)
union all
(select 'Cate4' as Category, 'Series1' as Series, 90 as SeriesValue limit 1)
union all
(select 'Cate4' as Category, 'Series2' as Series, 10 as SeriesValue limit 1)
union all
(select 'Cate3' as Category, 'Series1' as Series, 25 as SeriesValue limit 1)
union all
(select 'Cate3' as Category, 'Series2' as Series, 75 as SeriesValue limit 1)
union all
(select 'Cate2' as Category, 'Series1' as Series, 24 as SeriesValue limit 1)
union all
(select 'Cate2' as Category, 'Series2' as Series, 76 as SeriesValue limit 1)
union all
(select 'Cate1' as Category, 'Series1' as Series, 34 as SeriesValue limit 1)
union all
(select 'Cate1' as Category, 'Series2' as Series, 66 as SeriesValue limit 1)]]>
</queryString>
<fieldname="category"class="java.lang.String">
<propertyname="com.jaspersoft.studio.field.name"value="category"/>
<propertyname="com.jaspersoft.studio.field.label"value="category"/>
</field>
<fieldname="series"class="java.lang.String">
<propertyname="com.jaspersoft.studio.field.name"value="series"/>
<propertyname="com.jaspersoft.studio.field.label"value="series"/>
</field>
<fieldname="seriesvalue"class="java.lang.Integer">
<propertyname="com.jaspersoft.studio.field.name"value="seriesvalue"/>
<propertyname="com.jaspersoft.studio.field.label"value="seriesvalue"/>
</field>
<background>
<bandsplitType="Stretch"/>
</background>
<title>
<bandheight="42"splitType="Stretch">
<textField>
<reportElementx="20"y="0"width="480"height="42"uuid="c437fc8c-354e-4dfe-b263-ff16f0e2b68d"/>
<textElementtextAlignment="Center"verticalAlignment="Middle">
<fontsize="13"isBold="true"/>
</textElement>
<textFieldExpression><![CDATA["HTML-5 Stacked Percentage Bar Chart - Before Applying Adv. Properties"]]></textFieldExpression>
</textField>
<textField>
<reportElementx="600"y="0"width="480"height="42"uuid="2f7f2d3a-5aa3-4d3b-8a88-77b097b3fdd7"/>
<textElementtextAlignment="Center"verticalAlignment="Middle">
<fontsize="13"isBold="true"/>
</textElement>
<textFieldExpression><![CDATA["HTML-5 Stacked Percentage Bar Chart - After Applying Adv. Properties"]]></textFieldExpression>
</textField>
</band>
</title>
<summary>
<bandheight="460"splitType="Stretch">
<propertyname="com.jaspersoft.studio.layout"value="com.jaspersoft.studio.editor.layout.FreeLayout"/>
<propertyname="com.jaspersoft.studio.unit.height"value="px"/>
<componentElement>
<reportElementx="600"y="0"width="480"height="460"uuid="31617bd0-29e7-494e-a309-e82ff9a918e9"/>
<hc:chartxmlns:hc="http://jaspersoft.com/highcharts"xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd"type="StackedPercentBar">
<hc:chartSettingname="default">
<hc:chartPropertyname="title.text"value=""/>
<hc:chartPropertyname="credits.enabled"value="false"/>
<hc:chartPropertyname="credits.href"value=""/>
<hc:chartPropertyname="credits.text"value=""/>
<hc:chartPropertyname="yAxis.title.text"value=""/>
<hc:chartPropertyname="chart.zoomType"value="xy"/>
<hc:chartPropertyname="colors_customSimpleMode"value="true"/>
<hc:chartPropertyname="colors">
<hc:propertyExpression><![CDATA[Arrays.asList("#009A17","#D64550","#90ed7d","#f7a35c","#8085e9","#f15c80","#e4d354","#2b908f","#f45b5b","#91e8e1")]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartPropertyname="plotOptions.series.dataLabels.enabled_customSimpleMode"value="true"/>
<hc:chartPropertyname="plotOptions.series.dataLabels.enabled">
<hc:propertyExpression><![CDATA[true]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartPropertyname="plotOptions.bar.pointWidth_customSimpleMode"value="true"/>
<hc:chartPropertyname="plotOptions.bar.pointWidth">
<hc:propertyExpression><![CDATA[30]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartPropertyname="com.jaspersoft.studio.highcharts.dataconfiguration.simple"value="true"/>
<hc:chartPropertyname="plotOptions.series.dataLabels.formatter">
<hc:propertyExpression><![CDATA["function(){ var val = this.y; if(val == 0){return '';} else return val+'%';}"]]></hc:propertyExpression>
</hc:chartProperty>
</hc:chartSetting>
<multiAxisData>
<multiAxisDataset>
<datasetresetType="Report"/>
</multiAxisDataset>
<dataAxisaxis="Rows">
<axisLevelname="Level1">
<labelExpression><![CDATA["Level Label expression"]]></labelExpression>
<axisLevelBucketorder="None"class="java.lang.Comparable">
<bucketExpression><![CDATA[$F{category}]]></bucketExpression>
</axisLevelBucket>
</axisLevel>
</dataAxis>
<dataAxisaxis="Columns">
<axisLevelname="Status">
<labelExpression><![CDATA[]]></labelExpression>
<axisLevelBucketorder="None"class="java.lang.Comparable">
<bucketExpression><![CDATA[$F{series}]]></bucketExpression>
</axisLevelBucket>
</axisLevel>
</dataAxis>
<multiAxisMeasurename="Measure1"class="java.lang.Number"calculation="Nothing">
<labelExpression><![CDATA[""]]></labelExpression>
<valueExpression><![CDATA[$F{seriesvalue}]]></valueExpression>
</multiAxisMeasure>
</multiAxisData>
<hc:seriesname="Measure1"/>
</hc:chart>
</componentElement>
<componentElement>
<reportElementx="20"y="0"width="480"height="460"uuid="38ecda02-7426-46af-96f2-e50ed771ee53">
<propertyname="com.jaspersoft.studio.unit.width"value="px"/>
<propertyname="com.jaspersoft.studio.unit.height"value="px"/>
</reportElement>
<hc:chartxmlns:hc="http://jaspersoft.com/highcharts"xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd"type="StackedPercentBar">
<hc:chartSettingname="default">
<hc:chartPropertyname="title.text"value=""/>
<hc:chartPropertyname="credits.enabled"value="false"/>
<hc:chartPropertyname="credits.href"value=""/>
<hc:chartPropertyname="credits.text"value=""/>
<hc:chartPropertyname="yAxis.title.text"value=""/>
<hc:chartPropertyname="chart.zoomType"value="xy"/>
</hc:chartSetting>
<multiAxisData>
<multiAxisDataset>
<datasetresetType="Report"/>
</multiAxisDataset>
<dataAxisaxis="Rows">
<axisLevelname="Level1">
<labelExpression><![CDATA["Level Label expression"]]></labelExpression>
<axisLevelBucketorder="None"class="java.lang.Comparable">
<bucketExpression><![CDATA[$F{category}]]></bucketExpression>
</axisLevelBucket>
</axisLevel>
</dataAxis>
<dataAxisaxis="Columns">
<axisLevelname="series">
<labelExpression><![CDATA[]]></labelExpression>
<axisLevelBucketorder="None"class="java.lang.Comparable">
<bucketExpression><![CDATA[$F{series}]]></bucketExpression>
</axisLevelBucket>
</axisLevel>
</dataAxis>
<multiAxisMeasurename="Measure1"class="java.lang.Number"calculation="Nothing">
<labelExpression><![CDATA[""]]></labelExpression>
<valueExpression><![CDATA[$F{seriesvalue}]]></valueExpression>
</multiAxisMeasure>
</multiAxisData>
<hc:seriesname="Measure1"/>
</hc:chart>
</componentElement>
</band>
</summary>
</jasperReport>