Donut and Semi donut high charts (HTML-5) in Jasper Design Studio 6.x (or) How to convert semi pie or pie to semi donut or semi pie chart

Hi Folks,

As of Jasper 6.2 we do not have donut and semi donut high chart visualizations in it.

Using the available semi pie/circular chart and pie chart, we can convert them into semi donut and donut visualizations.
Kindly note that, this post will not tech you how to work with html-5 scripting but will tech you how to grab the properties from highcharts API and make use of them in Jasper Design Studio.

For doing it, we need to add series.innerSize=80% property in "Advanced properties section of both charts. (don't tick the check box).

Example works only in professional studio
Current example tested on : J.D.Studio Pro 6.2 and J.S 6.2 Pro .

NOTE : Click the images to get the best view of the content on them.
*** Sample output of the tip ***


1) Properties set on semi circular chart.

2) Properties set on pie chart

 I have also played with few other advanced and simple properties of semi circular & pie chart and would like to share the purpose of property and how the end use get benefited from it.

You can find all the properties in above two images. 

1) Selection of Slice (Slice will be separated from center) - This is useful for drill down reports - End user can easily understand on which slice he/she clicked.
2) Slice and Label connector line color (By default the chart will take the slice/sector color)
3) Slice shadow on hovering - (Build in property - tick the Show Showdow property from "Plot Options for Series")
4) Change the cursor Style when mouse hovered (better look and feel for the end user if it is a drill down parent report)
5) Percentages as labels.
6) Percentage and Value in Tool tip.
7) Title of Chart in middle of chart (Change X=0 and Y=0 in Chart title properties)


JRXML
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Jaspersoft Studio version 6.2.0.final using JasperReports Library version 6.2.0  -->
<!-- 2016-01-29T01:49:52 -->
<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="SemiCircularChart" pageWidth="12000" pageHeight="842" columnWidth="11960" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" uuid="5d646afa-9cdc-41f7-aa48-8d901762ed99">
    <property name="com.jaspersoft.studio.data.defaultdataadapter" value="foodmart"/>
    <property name="com.jaspersoft.studio.data.sql.tables" value=""/>
    <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"/>
    <property name="ireport.jasperserver.url" value="http://localhost:8081/jasperserver-pro/"/>
    <property name="ireport.jasperserver.user" value="superuser"/>
    <property name="ireport.jasperserver.report.resource" value="/Explore/Reports/Semi_Donut_and_Donut_Chart_Examples_files/main_jrxml"/>
    <property name="ireport.jasperserver.reportUnit" value="/Explore/Reports/Semi_Donut_and_Donut_Chart_Examples"/>
    <property name="net.sf.jasperreports.export.pdf.encrypted" value="true"/>
    <queryString>
        <![CDATA[SELECT member_card,SUM(num_cars_owned) FROM customer GROUP BY member_card]]>
    </queryString>
    <field name="member_card" class="java.lang.String"/>
    <field name="sum" class="java.lang.Long"/>
    <background>
        <band splitType="Stretch"/>
    </background>
    <title>
        <band height="31" splitType="Stretch"/>
    </title>
    <summary>
        <band height="329" splitType="Stretch">
            <componentElement>
                <reportElement x="0" y="0" width="555" height="329" uuid="f42805af-d872-4e9b-be4d-f29ede7935fe"/>
                <hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="SemiPie">
                    <hc:chartSetting name="default">
                        <hc:chartProperty name="chart.zoomType">
                            <hc:propertyExpression><![CDATA["xy"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="credits.enabled">
                            <hc:propertyExpression><![CDATA[false]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="credits.href">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="credits.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="series.innerSize" value="70%"/>
                        <hc:chartProperty name="title.style.color">
                            <hc:propertyExpression><![CDATA[new java.awt.Color(-16111803)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.style.fontSize">
                            <hc:propertyExpression><![CDATA["12px"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.text">
                            <hc:propertyExpression><![CDATA["Member Card Wise Cars"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.verticalAlign">
                            <hc:propertyExpression><![CDATA["middle"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.y">
                            <hc:propertyExpression><![CDATA[new Integer(40)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="yAxis.title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="chart.backgroundColor">
                            <hc:propertyExpression><![CDATA[new java.awt.Color(-855822)]]></hc:propertyExpression>
                        </hc:chartProperty>
                    </hc:chartSetting>
                    <multiAxisData>
                        <multiAxisDataset/>
                        <dataAxis axis="Rows">
                            <axisLevel name="Level1">
                                <labelExpression><![CDATA["Level Label expression"]]></labelExpression>
                                <axisLevelBucket class="java.lang.String">
                                    <bucketExpression><![CDATA[$F{member_card}]]></bucketExpression>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
                        <multiAxisMeasure name="Measure1" class="java.lang.Integer" calculation="Nothing">
                            <labelExpression><![CDATA["Number Of Cars : "]]></labelExpression>
                            <valueExpression><![CDATA[$F{sum}]]></valueExpression>
                        </multiAxisMeasure>
                    </multiAxisData>
                    <hc:series name="Measure1"/>
                </hc:chart>
            </componentElement>
            <componentElement>
                <reportElement x="600" y="0" width="435" height="329" uuid="ee3464c8-c006-4cd9-abb7-f77b32ae46a9"/>
                <hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="Pie">
                    <hc:chartSetting name="default">
                        <hc:chartProperty name="chart.backgroundColor">
                            <hc:propertyExpression><![CDATA[new java.awt.Color(-855822)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="chart.type" value="pie"/>
                        <hc:chartProperty name="chart.zoomType">
                            <hc:propertyExpression><![CDATA["xy"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="credits.enabled">
                            <hc:propertyExpression><![CDATA[false]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="credits.href">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="credits.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="plotOptions.pie.cursor" value="pointer"/>
                        <hc:chartProperty name="plotOptions.pie.dataLabels.connectorColor" value="yellow"/>
                        <hc:chartProperty name="plotOptions.pie.dataLabels.enabled" value="false"/>
                        <hc:chartProperty name="plotOptions.pie.dataLabels.format">
                            <hc:propertyExpression><![CDATA[" {point.percentage:.1f} %"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="plotOptions.pie.showInLegend" value="true"/>
                        <hc:chartProperty name="plotOptions.series.allowPointSelect">
                            <hc:propertyExpression><![CDATA[Boolean.TRUE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="plotOptions.series.showCheckBox">
                            <hc:propertyExpression><![CDATA[Boolean.TRUE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="series.innerSize" value="80%"/>
                        <hc:chartProperty name="title.style.color">
                            <hc:propertyExpression><![CDATA[new java.awt.Color(-16369815)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.style.fontSize">
                            <hc:propertyExpression><![CDATA["12px"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.text">
                            <hc:propertyExpression><![CDATA["NO.Of.Cars"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.verticalAlign">
                            <hc:propertyExpression><![CDATA["middle"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.y">
                            <hc:propertyExpression><![CDATA[new Integer(0)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="tooltip.pointFormat">
                            <hc:propertyExpression><![CDATA["{series.name}: <b>{point.percentage:.1f}%</b>" +"("+$F{sum}+")"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="tooltip.shared">
                            <hc:propertyExpression><![CDATA[Boolean.TRUE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="tooltip.useHTML">
                            <hc:propertyExpression><![CDATA[Boolean.TRUE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="yAxis.title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                    </hc:chartSetting>
                    <multiAxisData>
                        <multiAxisDataset/>
                        <dataAxis axis="Rows">
                            <axisLevel name="Level1">
                                <labelExpression><![CDATA["Level Label expression"]]></labelExpression>
                                <axisLevelBucket class="java.lang.String">
                                    <bucketExpression><![CDATA[$F{member_card}]]></bucketExpression>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
                        <multiAxisMeasure name="Measure1" class="java.lang.Integer" calculation="Nothing">
                            <labelExpression><![CDATA["No.Of Cars"]]></labelExpression>
                            <valueExpression><![CDATA[$F{sum}]]></valueExpression>
                        </multiAxisMeasure>
                    </multiAxisData>
                    <hc:series name="Measure1"/>
                </hc:chart>
            </componentElement>
        </band>
    </summary>
</jasperReport>
 
References : 
http://www.highcharts.com/demo/pie-semi-circle