Jump to content
Changes to the Jaspersoft community edition download ×
  • How to Specify Tick Marks in HTML5 Chart Y-Axis


    tchen
    • Features: Charts Version: v6.3 Product: JasperReports® Library
    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


    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    This is now closed for further comments

×
×
  • Create New...