Jump to content
JasperReports Library 7.0 is now available ×

  • How to Specify Tick Marks in HTML5 Chart Y-Axis

    Tom C

    By Tom C

      • Features: Charts Version: v6.3 Product: JasperReports® Library
     Share
    Requirement:

    User has a HTML5 Area Chart Report displayed as the following:

    screenshot1(2).png.a130775f1cf3c58f4b1fe1b95b78db2a.png
     
    Their requirement is to manipulate y-axis labels in HTML charts to start with 250 tick mark and increment by 250 interval, such as 250, 500, 750, ... etc.
     
    Resolution:
     

    User can use yAxis.tickPositions (http://api.highcharts.com/highcharts/yAxis.tickPositions) to plot tick marks in the chart y-axis using a array listing the values. For example:

    tickPositions: [0, 1, 2, 4, 8]

     

    This can be implemented in JasperReports using chart advanced properties:

    screenshot2(5).png.98c697849e525ab6c259220b9e2c49c3.png
     

    Sample Report Template:

    <?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Jaspersoft Studio version 6.3.0.final using JasperReports Library version 6.3.0  -->
<!-- 2016-08-29T11:36:13 -->
<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="Demo" pageWidth="595" pageHeight="842" columnWidth="595" leftMargin="0" rightMargin="0" topMargin="5" bottomMargin="0" uuid="518c9783-f52b-470d-8d6d-d8a79ae8e962">
    <property name="com.jaspersoft.studio.data.sql.tables" value=""/>
    <property name="com.jaspersoft.studio.data.defaultdataadapter" value="JRSrepo.xml"/>
    <property name="com.jaspersoft.studio.unit." value="inch"/>
    <property name="com.jaspersoft.studio.unit.pageHeight" value="inch"/>
    <property name="com.jaspersoft.studio.unit.pageWidth" value="inch"/>
    <property name="com.jaspersoft.studio.unit.topMargin" value="inch"/>
    <property name="com.jaspersoft.studio.unit.bottomMargin" value="inch"/>
    <property name="com.jaspersoft.studio.unit.leftMargin" value="inch"/>
    <property name="com.jaspersoft.studio.unit.rightMargin" value="inch"/>
    <property name="com.jaspersoft.studio.unit.columnWidth" value="inch"/>
    <property name="com.jaspersoft.studio.unit.columnSpacing" value="inch"/>
    <style name="Table_TH" mode="Opaque" backcolor="#F0F8FF">
        <box>
            <pen lineWidth="0.5" lineColor="#B5B0B0"/>
            <topPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <leftPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <bottomPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <rightPen lineWidth="0.5" lineColor="#B5B0B0"/>
        </box>
    </style>
    <style name="Table_TD" mode="Opaque" backcolor="#FFFFFF">
        <box>
            <pen lineWidth="0.5" lineColor="#B5B0B0"/>
            <topPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <leftPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <bottomPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <rightPen lineWidth="0.5" lineColor="#B5B0B0"/>
        </box>
    </style>
    <style name="Table_CH" mode="Opaque" backcolor="#BFE1FF">
        <box>
            <pen lineWidth="0.5" lineColor="#B5B0B0"/>
            <topPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <leftPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <bottomPen lineWidth="0.5" lineColor="#B5B0B0"/>
            <rightPen lineWidth="0.5" lineColor="#B5B0B0"/>
        </box>
    </style>
    <style name="Table 1_TH" mode="Opaque" backcolor="#F0F8FF">
        <box>
            <pen lineWidth="0.5" lineColor="#D7DBDD"/>
            <topPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <leftPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <bottomPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <rightPen lineWidth="0.5" lineColor="#D7DBDD"/>
        </box>
    </style>
    <style name="Table 1_CH" mode="Opaque" backcolor="#5DADE2">
        <box>
            <pen lineWidth="0.5" lineColor="#D7DBDD"/>
            <topPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <leftPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <bottomPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <rightPen lineWidth="0.5" lineColor="#D7DBDD"/>
        </box>
    </style>
    <style name="Table 1_TD" mode="Opaque" backcolor="#A6ACAF">
        <box>
            <pen lineWidth="0.5" lineColor="#D7DBDD"/>
            <topPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <leftPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <bottomPen lineWidth="0.5" lineColor="#D7DBDD"/>
            <rightPen lineWidth="0.5" lineColor="#D7DBDD"/>
        </box>
    </style>
    <style name="Table 2_TH" mode="Opaque" backcolor="#F0F8FF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 2_CH" mode="Opaque" backcolor="#BFE1FF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 2_TD" mode="Opaque" backcolor="#D4CFCF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 3_TH" mode="Opaque" backcolor="#F0F8FF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 3_CH" mode="Opaque" backcolor="#BFE1FF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 3_TD" mode="Opaque" backcolor="#C2BCBC">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 4_TH" mode="Opaque" backcolor="#F0F8FF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 5_TH" mode="Opaque" backcolor="#F0F8FF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 5_CH" mode="Opaque" backcolor="#79B5ED">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 5_TD" mode="Opaque" backcolor="#FFFFFF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <style name="Table 6_TH" mode="Opaque" backcolor="#F0F8FF">
        <box>
            <pen lineWidth="0.5" lineColor="#000000"/>
            <topPen lineWidth="0.5" lineColor="#000000"/>
            <leftPen lineWidth="0.5" lineColor="#000000"/>
            <bottomPen lineWidth="0.5" lineColor="#000000"/>
            <rightPen lineWidth="0.5" lineColor="#000000"/>
        </box>
    </style>
    <subDataset name="Dataset4" uuid="c5e56e97-cc1b-400c-aa74-41f36898fb42">
        <property name="com.jaspersoft.studio.data.defaultdataadapter" value="JRSrepo.xml"/>
        <property name="com.jaspersoft.studio.data.sql.tables" value=""/>
        <queryString>
            <![CDATA[select week_num, metric1, metric2,'#00ff00' as SeriesColor,'#0000ff' as SeriesColor2
from (
select '01' as week_num, 300.00 as metric1, 500.00 as metric2
union all
select '02' as week_num, 350.00 as metric1, 600.00 as metric2
union all
select '03' as week_num, 400.00 as metric1,700.00 as metric2
union all
select '04' as week_num,450.00 as metric1, 800.00 as metric2
union all
select '05' as week_num, 500.00 as metric1,900.00 as metric2
union all
select '06' as week_num, 550.00 as metric1,1000.00 as metric2
  union all
select '07' as week_num, 600.00 as metric1,1100.00 as metric2
  union all
select '08' as week_num, 650.00 as metric1,1200.00 as metric2
  union all
select '09' as week_num, 600.00 as metric1,1300.00 as metric2
  union all
select '10' as week_num, 750.00 as metric1,1400.00 as metric2
) t]]>
        </queryString>
        <field name="week_num" class="java.lang.String"/>
        <field name="metric1" class="java.math.BigDecimal"/>
        <field name="metric2" class="java.math.BigDecimal"/>
        <field name="seriescolor" class="java.lang.String"/>
        <field name="seriescolor2" class="java.lang.String"/>
    </subDataset>
    <queryString>
        <![CDATA[select '01' as week_num, 100.50 as metric1, 200.50 as metric2,'#00ff00' as SeriesColor,'#0000ff' as SeriesColor2]]>
    </queryString>
    <field name="week_num" class="java.lang.String"/>
    <field name="metric1" class="java.math.BigDecimal"/>
    <field name="metric2" class="java.math.BigDecimal"/>
    <field name="seriescolor" class="java.lang.String"/>
    <field name="seriescolor2" class="java.lang.String"/>
    <background>
        <band splitType="Stretch"/>
    </background>
    <detail>
        <band height="424" splitType="Stretch">
            <printWhenExpression><![CDATA[$V{REPORT_COUNT} == 1]]></printWhenExpression>
            <componentElement>
                <reportElement x="30" y="72" width="530" height="308" uuid="c6ad4866-0a02-43ab-b62d-89dae7f420bf"/>
                <hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="Area">
                    <hc:chartSetting name="default">
                        <hc:chartProperty name="chart.showAxes">
                            <hc:propertyExpression><![CDATA[Boolean.TRUE]]></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="legend.floating">
                            <hc:propertyExpression><![CDATA[Boolean.FALSE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="legend.verticalAlign">
                            <hc:propertyExpression><![CDATA["top"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="plotOptions.series.connectNulls">
                            <hc:propertyExpression><![CDATA[Boolean.TRUE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="plotOptions.series.cursor">
                            <hc:propertyExpression><![CDATA["pointer"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="plotOptions.series.showCheckBox">
                            <hc:propertyExpression><![CDATA[Boolean.TRUE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="xAxis.title.text">
                            <hc:propertyExpression><![CDATA["Week # , 2016"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="yAxis.title.text">
                            <hc:propertyExpression><![CDATA["# completed profiles"]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="yAxis.title.style.color" value="#4572A7"/>
                        <hc:chartProperty name="xAxis.title.style.color" value="#4572A7"/>
                        <hc:chartProperty name="yAxis.tickPositions">
                            <hc:propertyExpression><![CDATA[Arrays.asList(250, 500, 750, 1000, 1250, 1500)]]></hc:propertyExpression>
                        </hc:chartProperty>
                    </hc:chartSetting>
                    <multiAxisData>
                        <multiAxisDataset>
                            <dataset>
                                <datasetRun subDataset="Dataset4" uuid="fb7c3e5a-b71e-477e-96df-255213becb3e"/>
                            </dataset>
                        </multiAxisDataset>
                        <dataAxis axis="Rows">
                            <axisLevel name="Week">
                                <labelExpression><![CDATA["Level Label expression"]]></labelExpression>
                                <axisLevelBucket class="java.lang.Integer">
                                    <bucketExpression><![CDATA[$F{week_num}]]></bucketExpression>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
                        <dataAxis axis="Columns"/>
                        <multiAxisMeasure name="total # of completed profiles" class="java.lang.Integer" calculation="Nothing">
                            <labelExpression><![CDATA["total # of completed profiles"]]></labelExpression>
                            <valueExpression><![CDATA[$F{metric1}]]></valueExpression>
                        </multiAxisMeasure>
                        <multiAxisMeasure name="# of subscribed profiles" class="java.lang.Integer" calculation="Nothing">
                            <labelExpression><![CDATA["# of subscribed profiles"]]></labelExpression>
                            <valueExpression><![CDATA[$F{metric2}]]></valueExpression>
                        </multiAxisMeasure>
                    </multiAxisData>
                    <hc:series name="# of subscribed profiles">
                        <hc:contributor name="SeriesProperty">
                            <hc:contributorProperty name="color" valueType="Expression">
                                <hc:valueExpression><![CDATA[$F{seriescolor}]]></hc:valueExpression>
                            </hc:contributorProperty>
                        </hc:contributor>
                    </hc:series>
                    <hc:series name="total # of completed profiles">
                        <hc:contributor name="SeriesProperty">
                            <hc:contributorProperty name="color" valueType="Expression">
                                <hc:valueExpression><![CDATA[$F{seriescolor2}]]></hc:valueExpression>
                            </hc:contributorProperty>
                        </hc:contributor>
                    </hc:series>
                </hc:chart>
            </componentElement>
            <textField>
                <reportElement x="30" y="16" width="310" height="20" forecolor="#4572A7" uuid="f02183c3-b479-44af-ac13-906f2a0287cd"/>
                <textElement>
                    <font fontName="Arial" size="14"/>
                    <paragraph lineSpacing="Single"/>
                </textElement>
                <textFieldExpression><![CDATA["All Completed Profiles"]]></textFieldExpression>
            </textField>
            <textField>
                <reportElement x="31" y="42" width="310" height="20" forecolor="#5F99F5" uuid="cd669590-c30f-4707-a33b-cc2e35590724">
                    <printWhenExpression><![CDATA[$V{REPORT_COUNT} == 1]]></printWhenExpression>
                </reportElement>
                <textElement>
                    <font fontName="Arial" size="14"/>
                    <paragraph lineSpacing="Single"/>
                </textElement>
                <textFieldExpression><![CDATA["Completed Vs Subscribed Weeks"]]></textFieldExpression>
            </textField>
        </band>
    </detail>
</jasperReport>

     

    Report Output:

    screenshot3(2).png.eee2a5f0261e768daa8cb2b8f055c8b7.png


    ===========================================

    TTC-20160829-70845

     Share
    Go to entries

    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