Wednesday, 14 January 2015

Tip : Intra charts/components linking technique in Jasper reports : HTML5 charts inter linking with in report in Jasper Studio 6.x

Happy new year...!!! - 2015

This post will give you the technique of inter relating components with in a report.
Software setup : Jasper Studio 6.x, Jasper Server 6.x, postgresql foodmart database.

Scenario :  2 charts in a report one is of pie chart and another is of bar chart.
Click on pie slice then the entire bar chart get reflected


JRXML File : 


<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Jaspersoft Studio version 6.0.0.final using JasperReports Library version 6.0.0  -->
<!-- 2015-01-14T17:25: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="1_Chart1" pageWidth="1000" pageHeight="842" whenNoDataType="AllSectionsNoDetail" columnWidth="960" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" uuid="6f3a2ac6-912f-47e4-8ea9-b3d9c12fcc34">
    <property name="com.jaspersoft.studio.unit." value="pixel"/>
    <property name="ireport.jasperserver.url" value="http://localhost:8080/jasperserver-pro/"/>
    <property name="ireport.jasperserver.user" value="jasperadmin|"/>
    <property name="ireport.jasperserver.report.resource" value="/Test/1_Chart1_files/main_jrxml"/>
    <property name="ireport.jasperserver.reportUnit" value="/Test/1_Chart1"/>
    <property name="com.jaspersoft.studio.data.defaultdataadapter" value="One Empty Record"/>
    <subDataset name="1_PieChart" uuid="79b56dcb-e731-4827-a1a3-1146339fe3f0">
        <property name="com.jaspersoft.studio.data.defaultdataadapter" value="foodmart"/>
        <parameter name="State" class="java.lang.String"/>
        <queryString>
            <![CDATA[SELECT
    c.state_province AS State,
    SUM(sf7.store_sales) StoreSales
FROM customer c
INNER JOIN sales_fact_1997 sf7 ON c.customer_id=sf7.customer_id
GROUP BY State]]>
        </queryString>
        <field name="state" class="java.lang.String"/>
        <field name="storesales" class="java.math.BigDecimal"/>
    </subDataset>
    <subDataset name="2_BarChart" uuid="0572b94e-1093-4dd6-b0e8-07508eef6e37">
        <property name="com.jaspersoft.studio.data.defaultdataadapter" value="foodmart"/>
        <parameter name="State" class="java.lang.String"/>
        <queryString language="SQL">
            <![CDATA[SELECT
    c.city AS city,
    SUM(sf7.store_sales) StoreSales
FROM customer c
INNER JOIN sales_fact_1997 sf7 ON c.customer_id=sf7.customer_id
WHERE c.state_province like  $P{State}
GROUP BY city limit 7]]>
        </queryString>
        <field name="city" class="java.lang.String"/>
        <field name="storesales" class="java.math.BigDecimal"/>
    </subDataset>
    <parameter name="State" class="java.lang.String" isForPrompting="false"/>
    <queryString>
        <![CDATA[]]>
    </queryString>
    <background>
        <band splitType="Stretch"/>
    </background>
    <title>
        <band height="37" splitType="Stretch"/>
    </title>
    <summary>
        <band height="313" splitType="Stretch">
            <componentElement>
                <reportElement x="0" y="0" width="380" height="313" uuid="6b65c0f7-e948-4d49-953c-309ba7f99d8c"/>
                <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.borderColor">
                            <hc:propertyExpression><![CDATA[new java.awt.Color(-1)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="chart.plotBorderColor">
                            <hc:propertyExpression><![CDATA[new java.awt.Color(-1)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="chart.plotBorderWidth">
                            <hc:propertyExpression><![CDATA[new Integer(1)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <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.showInLegend" value="true"/>
                        <hc:chartProperty name="title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="tooltip.borderColor">
                            <hc:propertyExpression><![CDATA[new java.awt.Color(-15462127)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="tooltip.borderWidth">
                            <hc:propertyExpression><![CDATA[new Integer(1)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="yAxis.title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                    </hc:chartSetting>
                    <multiAxisData>
                        <multiAxisDataset>
                            <dataset>
                                <datasetRun subDataset="1_PieChart" uuid="04425503-33fc-4874-8eb6-893cf3afd8d9"/>
                            </dataset>
                        </multiAxisDataset>
                        <dataAxis axis="Rows">
                            <axisLevel name="Level1">
                                <labelExpression><![CDATA["Level Label expression"]]></labelExpression>
                                <axisLevelBucket class="java.lang.String">
                                    <bucketExpression><![CDATA[$F{state}]]></bucketExpression>
                                    <bucketProperty name="State"><![CDATA[$F{state}]]></bucketProperty>
                                    <bucketProperty name="url"><![CDATA["/Test/1_Chart1"]]></bucketProperty>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
                        <multiAxisMeasure name="Measure1" class="java.math.BigDecimal" calculation="Nothing">
                            <labelExpression><![CDATA["Measure label expression"]]></labelExpression>
                            <valueExpression><![CDATA[$F{storesales}]]></valueExpression>
                        </multiAxisMeasure>
                    </multiAxisData>
                    <hc:series name="Measure1">
                        <hc:contributor name="SeriesItemHyperlink">
                            <hc:contributorProperty name="hyperlinkTarget" valueType="Constant" value="Self"/>
                            <hc:contributorProperty name="hyperlinkType" valueType="Constant" value="ReportExecution"/>
                            <hc:contributorProperty name="_report" valueType="Bucket" value="Level1.url"/>
                            <hc:contributorProperty name="State" valueType="Bucket" value="Level1.State"/>
                        </hc:contributor>
                    </hc:series>
                </hc:chart>
            </componentElement>
            <componentElement>
                <reportElement x="420" y="0" width="540" height="313" uuid="003a4ecc-845a-45ee-8d42-21dbad8e87b4"/>
                <hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="Column">
                    <hc:chartSetting name="default">
                        <hc:chartProperty name="chart.plotBorderColor">
                            <hc:propertyExpression><![CDATA[new java.awt.Color(-1)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="chart.plotBorderWidth">
                            <hc:propertyExpression><![CDATA[new Integer(1)]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <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="title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="yAxis.title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                    </hc:chartSetting>
                    <multiAxisData>
                        <multiAxisDataset>
                            <dataset>
                                <datasetRun subDataset="2_BarChart" uuid="f06690e2-a972-4556-a2ee-9881e880400a">
                                    <datasetParameter name="State">
                                        <datasetParameterExpression><![CDATA[$P{State}]]></datasetParameterExpression>
                                    </datasetParameter>
                                </datasetRun>
                            </dataset>
                        </multiAxisDataset>
                        <dataAxis axis="Rows">
                            <axisLevel name="Level1">
                                <labelExpression><![CDATA["Level Label expression"]]></labelExpression>
                                <axisLevelBucket class="java.lang.String">
                                    <bucketExpression><![CDATA[$F{city}]]></bucketExpression>
                                    <bucketProperty name="State"><![CDATA[$P{State}]]></bucketProperty>
                                    <bucketProperty name="url"><![CDATA["/Test/1_Chart1"]]></bucketProperty>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
                        <dataAxis axis="Columns"/>
                        <multiAxisMeasure name="Measure1" class="java.math.BigDecimal" calculation="Nothing">
                            <labelExpression><![CDATA["Cities"]]></labelExpression>
                            <valueExpression><![CDATA[$F{storesales}]]></valueExpression>
                        </multiAxisMeasure>
                    </multiAxisData>
                    <hc:series name="Measure1"/>
                </hc:chart>
            </componentElement>
        </band>
    </summary>
</jasperReport>


Output :
Image 1 :  Perform Click on OR state
 Image 2:  Perform Click on CA State
Image 3 : Perform Click on WA state


Core part : 
1) Right click pie chart -> Go to Chart Data -> Then to Configuration.
2) In category levels  double click on Level1 to open its bucket information & properties.
3) In bucket properties you need to give 2 parameters. one is State parameter(create it with String type) and url (the path of the same report)parameter as shown in below image

State = $F{state}
url = "/Test/1_chart1"



4) Go to value section ( talking about core part ) go to Advanced properties and configure below things one by one.
   hyperlinkTarget[SeriesItemHyperlink]
   hyperlinkType[SeriesItemHyperlink]
_report[SeriesItemHyperlink]
State[SeriesItemHyperlink]


Image is shown below
   hyperlinkTarget[SeriesItemHyperlink]








   hyperlinkType[SeriesItemHyperlink]

 _report[SeriesItemHyperlink]


 State[SeriesItemHyperlink]
                                                


Thanks for referring this post, hope it might helpful to some one :-)

 Limitations/Notes :
1) Currently we can hyperlink target is Self  hence the entire report get refreshes with the passed parameter
2) Earlier in 5.5 Jasper Server we had content_frames to link to reports on legacy dashboard designer.
3) Point 2 can be achievable in 6.x Jaspersoft in Embedding BI using visualize.js scripting. 
Cheers..!!!
at

3 comments:

  1. UnknownTuesday, 16 February 2016 at 16:47:00 GMT+5:30

    Hi Sadakar,

    We tried the exact steps what you wrote above but we are unable to the inner relation between the two graphs. We get output of two reports but when we click on pie chart we did not find any interaction on bar chart. Could you help me please.

    Regards,
    Ranjith Kumar.Y

    ReplyDelete
  2. Sadakar PochampalliWednesday, 17 February 2016 at 00:03:00 GMT+5:30

    Hi Ranjith,
    Could you take the JRXML from this page and try using the same in your environment with foodmart db.

    If you are using professional or enterprise jasper there are variety of ways in achieving the same.
    1) On dashboard designer you have dashlets interlinking by passing parameters (6.1 or later).
    2) Using visualize.js you can write a web page to have inter linking of chart components.

    Thanks,
    Sadakar

    ReplyDelete
  3. UnknownWednesday, 17 February 2016 at 17:31:00 GMT+5:30

    Hi Sadakar,

    We are using professional jasper studio. We are unable to create the food mart db in our environment. Please find the below jrxml that i created. Please look into that and let me know any encountered issues.

































































































































































    Regards,
    Ranjith Kumar.Y

    ReplyDelete

Subscribe to: Post Comments (Atom)