Jump to content
We've recently updated our Privacy Statement, available here ×
  • HTML5 Time Series Chart - How to Display Last 12 Months in xAxis


    asimkin
    • Features: Charts Version: v7.1 Product: JasperReports® Library

    Use Case

    User has a requirement to create a JRXML report with HTML5 Time Series Area Spline.

    He needs to display the data which is categorized using last 12 months i.e. if he runs the report on 20-DEC-2018, he should see data categorized monthly from January 2018 to December 2018,

    regardless if dataset contains data or not for each period.

    Also, the chart should always display each month on the axis.


    Resolution

    In order to display 12 months period in xAxis, xAxis.min and xAxis.max Highcharts properties should be specified as follows:

    <hc:chartProperty name="xAxis.min">

        <hc:propertyExpression><![CDATA[DATEVALUE(org.apache.commons.lang.time.DateUtils.addMonths(new Date(),-12))]]></hc:propertyExpression>

    </hc:chartProperty>

    <hc:chartProperty name="xAxis.max">

        <hc:propertyExpression><![CDATA[DATEVALUE(org.apache.commons.lang.time.DateUtils.addMonths(new Date(),0))]]></hc:propertyExpression>

    </hc:chartProperty>

    In order to make each month to be displayed in the axis, you can set xAxis.units property to have ticks for each month:

    <hc:chartProperty name="xAxis.units">

        <hc:propertyExpression><![CDATA[new Object[]{new Object[]{"month", new Object[]{1}}}]]></hc:propertyExpression>

    </hc:chartProperty>

     

    Find attached a sample report which demonstrates the solution.

    Although, the chart data contain only a few months, 12 months period displayed in the chart:

    timeserieschart_last12months.png.d19e24bfc9c18c8385a1d8ae9a21fe80.png

    Solution tested with TIBCO JasperReports® Server v.7.1.0

     


    Ref. Case 01491078


    s_lms_coursecompletion.jrxml


    User Feedback

    Recommended Comments

    I was hoping this article would help with grouping the data at Day/Month/Year level in the HTML5 timeseries. Unfortunately if I take the sample report attached here and add more data point per month, each data point from the DB will be displayed in the chart, with no aggregation even though the unit is set to "month" or "year" for example.

    Link to comment
    Share on other sites



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×
×
  • Create New...