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 --> <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="HTML-5StackedPercentageBarChart.jrxml" pageWidth="1200" pageHeight="842" columnWidth="1160" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" uuid="831cc732-af9c-4611-9fda-cc7946b3ba40"> <property name="com.jaspersoft.studio.data.sql.tables" value=""/> <property name="com.jaspersoft.studio.data.defaultdataadapter" value="foodmartVeeraTraining"/> <property name="ireport.jasperserver.url" value="http://localhost:8080/jasperserver-pro/"/> <property name="ireport.jasperserver.user" value="superuser"/> <property name="ireport.jasperserver.reportUnit" value="/Training2023/HTML_5StackedPercentageBarChart"/> <property name="ireport.jasperserver.report.resource" value="/Training2023/HTML_5StackedPercentageBarChart_files/main_jrxml"/> <property name="com.jaspersoft.studio.unit." value="pixel"/> <property name="com.jaspersoft.studio.unit.pageHeight" value="pixel"/> <property name="com.jaspersoft.studio.unit.pageWidth" value="pixel"/> <property name="com.jaspersoft.studio.unit.topMargin" value="pixel"/> <property name="com.jaspersoft.studio.unit.bottomMargin" value="pixel"/> <property name="com.jaspersoft.studio.unit.leftMargin" value="pixel"/> <property name="com.jaspersoft.studio.unit.rightMargin" value="pixel"/> <property name="com.jaspersoft.studio.unit.columnWidth" value="pixel"/> <property name="com.jaspersoft.studio.unit.columnSpacing" value="pixel"/> <queryString language="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> <field name="category" class="java.lang.String"> <property name="com.jaspersoft.studio.field.name" value="category"/> <property name="com.jaspersoft.studio.field.label" value="category"/> </field> <field name="series" class="java.lang.String"> <property name="com.jaspersoft.studio.field.name" value="series"/> <property name="com.jaspersoft.studio.field.label" value="series"/> </field> <field name="seriesvalue" class="java.lang.Integer"> <property name="com.jaspersoft.studio.field.name" value="seriesvalue"/> <property name="com.jaspersoft.studio.field.label" value="seriesvalue"/> </field> <background> <band splitType="Stretch"/> </background> <title> <band height="42" splitType="Stretch"> <textField> <reportElement x="20" y="0" width="480" height="42" uuid="c437fc8c-354e-4dfe-b263-ff16f0e2b68d"/> <textElement textAlignment="Center" verticalAlignment="Middle"> <font size="13" isBold="true"/> </textElement> <textFieldExpression><![CDATA["HTML-5 Stacked Percentage Bar Chart - Before Applying Adv. Properties"]]></textFieldExpression> </textField> <textField> <reportElement x="600" y="0" width="480" height="42" uuid="2f7f2d3a-5aa3-4d3b-8a88-77b097b3fdd7"/> <textElement textAlignment="Center" verticalAlignment="Middle"> <font size="13" isBold="true"/> </textElement> <textFieldExpression><![CDATA["HTML-5 Stacked Percentage Bar Chart - After Applying Adv. Properties"]]></textFieldExpression> </textField> </band> </title> <summary> <band height="460" splitType="Stretch"> <property name="com.jaspersoft.studio.layout" value="com.jaspersoft.studio.editor.layout.FreeLayout"/> <property name="com.jaspersoft.studio.unit.height" value="px"/> <componentElement> <reportElement x="600" y="0" width="480" height="460" uuid="31617bd0-29e7-494e-a309-e82ff9a918e9"/> <hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="StackedPercentBar"> <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="colors_customSimpleMode" value="true"/> <hc:chartProperty name="colors"> <hc:propertyExpression><![CDATA[Arrays.asList("#009A17","#D64550","#90ed7d","#f7a35c","#8085e9","#f15c80","#e4d354","#2b908f","#f45b5b","#91e8e1")]]></hc:propertyExpression> </hc:chartProperty> <hc:chartProperty name="plotOptions.series.dataLabels.enabled_customSimpleMode" value="true"/> <hc:chartProperty name="plotOptions.series.dataLabels.enabled"> <hc:propertyExpression><![CDATA[true]]></hc:propertyExpression> </hc:chartProperty> <hc:chartProperty name="plotOptions.bar.pointWidth_customSimpleMode" value="true"/> <hc:chartProperty name="plotOptions.bar.pointWidth"> <hc:propertyExpression><![CDATA[30]]></hc:propertyExpression> </hc:chartProperty> <hc:chartProperty name="com.jaspersoft.studio.highcharts.dataconfiguration.simple" value="true"/> <hc:chartProperty name="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> <dataset resetType="Report"/> </multiAxisDataset> <dataAxis axis="Rows"> <axisLevel name="Level1"> <labelExpression><![CDATA["Level Label expression"]]></labelExpression> <axisLevelBucket order="None" class="java.lang.Comparable"> <bucketExpression><![CDATA[$F{category}]]></bucketExpression> </axisLevelBucket> </axisLevel> </dataAxis> <dataAxis axis="Columns"> <axisLevel name="Status"> <labelExpression><![CDATA[]]></labelExpression> <axisLevelBucket order="None" class="java.lang.Comparable"> <bucketExpression><![CDATA[$F{series}]]></bucketExpression> </axisLevelBucket> </axisLevel> </dataAxis> <multiAxisMeasure name="Measure1" class="java.lang.Number" calculation="Nothing"> <labelExpression><![CDATA[""]]></labelExpression> <valueExpression><![CDATA[$F{seriesvalue}]]></valueExpression> </multiAxisMeasure> </multiAxisData> <hc:series name="Measure1"/> </hc:chart> </componentElement> <componentElement> <reportElement x="20" y="0" width="480" height="460" uuid="38ecda02-7426-46af-96f2-e50ed771ee53"> <property name="com.jaspersoft.studio.unit.width" value="px"/> <property name="com.jaspersoft.studio.unit.height" value="px"/> </reportElement> <hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="StackedPercentBar"> <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:chartSetting> <multiAxisData> <multiAxisDataset> <dataset resetType="Report"/> </multiAxisDataset> <dataAxis axis="Rows"> <axisLevel name="Level1"> <labelExpression><![CDATA["Level Label expression"]]></labelExpression> <axisLevelBucket order="None" class="java.lang.Comparable"> <bucketExpression><![CDATA[$F{category}]]></bucketExpression> </axisLevelBucket> </axisLevel> </dataAxis> <dataAxis axis="Columns"> <axisLevel name="series"> <labelExpression><![CDATA[]]></labelExpression> <axisLevelBucket order="None" class="java.lang.Comparable"> <bucketExpression><![CDATA[$F{series}]]></bucketExpression> </axisLevelBucket> </axisLevel> </dataAxis> <multiAxisMeasure name="Measure1" class="java.lang.Number" calculation="Nothing"> <labelExpression><![CDATA[""]]></labelExpression> <valueExpression><![CDATA[$F{seriesvalue}]]></valueExpression> </multiAxisMeasure> </multiAxisData> <hc:series name="Measure1"/> </hc:chart> </componentElement> </band> </summary> </jasperReport>
No comments:
Post a Comment