Jump to content
Changes to the Jaspersoft community edition download ×
  • Javascript in a report - Switching column order in an chart


    Raphaël Peguet

    There is more and more way to increase interactivity in a report or a Dashboard with JasperReports Server and its API but sometimes it's hard to see how to add interactivity in a report without going through the server and running the query again which would be both affecting the performance and impacting hardware sizing mostly in high concurrency environments.

    To avoid a full refresh of the report the obvious choice would be to use JavaScript but this involves some small tricks when using JasperReports.

    This article will go through the simple steps of building a report that would let us control the order of an HTML 5 charts without executing the report another time and thus running the query.

    Audience & Product used

    Developers with basic knowledge of TIBCO Jaspersoft Studio and JasperReports Server will have no problem following this article.
    We used the latest JasperReport Server v. 6.2.1 and Jaspersoft Studio 6.2.1 to build this article but it is expected this would work for older as well as future versions.

    Requirements

    We want to build a simple report including a bar chart. The chart will be built using the pro HTML5 charting library and will display the sales of stores.
    The key here will be the capability to change the order of the bars from alphabetical order to ordering by sales numbers for each store (Store which sells the most to the least).

    The query

    An export of the report is attached to this article. It is using the Foodmart datasource (Part of the samples if you installed JasperReports Server using the installer).
    In Jaspersoft Studio query the data aggregating the sales for each store and ordering by sales.

    ScreenShot2016-04-11at18_33_42.png.5cdd5fe7f26da731875e813ea5f9c9a0.png
     

    Build the chart

    We will add 2 charts on top of each other one with the default ordering (by Sales values) and one forcing ordering by Store name. Both charts will use the same dataset so that the query will be executed only once. The aim is that using JavaScript we will be able to hide one chart and display the one underneath without executing the report a second time.

      - Add a frame in the report and an HTML5 Bar Chart within the frame.
    In our example we will be passing the Stores as Levels and the Sales as Measures using the main dataset.
    ScreenShot2016-04-12at10_09_42.png.64babfe925de40f07da894c0603f8e55.png
     
    Notes:
    • The Frame is important as we will give an HTML ID to the frame to control it using Javascript.
    • The Frame and Chart can be placed anywhere although the simplest would be in the Summary band to avoid the need to change execution time.
    Useful tips:
    • Use the size to container property to fit the chart within the Frame and the Frame within the Band.
    • Set Layout of the Frame to "Grid Layout" in Appearance tab so that resizing the frame will automatically resize it's content proportionally.

      - Give an ID to the Frame using the property net.sf.jasperreports.export.html.id (more details at http://community.jaspersoft.com/wiki/properties-how-use-additional-properties-build-enhanced-reports). For example CHART1.
    ScreenShot2016-04-12at10_27_31.png.93380ab8433ac0ab5f626864cf776be1.png

      - Copy the Frame and paste it in the same band exactly overlapping the first one
      - Change the ID of the Frame to an other one i.e. CHART2
      - Place the second Frame to the Back

    Useful tips:
    • Use the Location x and y properties to control it
      - Edit the chart in the CHART2 Frame and change the order in the Category Levels Store from None to Ascending
    ScreenShot2016-04-12at10_41_19.png.36d362feab622361c2e23d0f692fea5c.png
     

    Build the Button

    The button will execute the JavaScript hiding or displaying the chart we want. So we also want to switch which button is displayed when we switch charts.
    Add 2 text fields embedded within a Frame each on top of each other similarly to what we've done with charts and give IDs to the frames.

      - For each text fields, we will define the hyperlink to execute our JavaScript call.
      - In the Hyperlink tab of the properties of the text field for the button:
               *  Select Link type Reference
               *  Reference Expression is as follows (make sure your HTML IDs are correct)

    "javascript:(function(){document.getElementById('CHART1').style.display='none';document.getElementById('BUTTON2').style.display='none'})();"

    ScreenShot2016-04-12at11_57_35.png.f910d0e2be1075ab54c888b41e41384b.png

    Summary and Troubleshooting

    You will need to deploy the report to the server to test the functionality. It will obviously only work when exported in web format.

    If the behavior is not as expected you may check the HTML generated. There might be more than one element with the same HTML ID or the order of Frames and Button could be wrong.


    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    This is now closed for further comments

×
×
  • Create New...