ANSWERED: Swap left and right yAxis scales on multi axis HTML5 chart in Studio 6.1.0

[jed.allen]

So this took me a while to figure out so I thought I'd share my solution here in case anyone else runs into this problem.

Situation:  I have a multi axis chart, ColumnLine, with two yAxis metrics.  The xAxis is a monthly scale in the form MMM-YY for a period of 13 months starting with "last month".  The two yAxis measures are "number of visitors" to a website, and "amount saved" by those visitors.  Both of these values are being reported to Google Universal Analytics as Page Hit data and a Custom Dimension, respectively.  (I wrote a custom Data Adapter that connects to Google UA and performs a RESTful query to get this data back out, but that is not in the scope of this article).  We are using Jaspersoft Server 6.0.0 running on Amazon Web Services.

My issue arose when our marketing department insisted that the "money saved" measure be the bar in the graph, and the "number of visitors" be the line in the graph, and the scale for "visits" be on the left and "money saved" on the right.  When the chart was created in Jaspersoft Studio, it automagically put the "money saved" on the left and "visits" on the right.  What I want to do is similar to the functionality presented here, but done through Studio.  Here is the solution to swap them:

1. Right click the chart in the "design" tab of Jaspersoft Studio and select "Edit Chart Properties"
2. Click the "Show Advanced Properties" button
3. Click "add"
4. Make sure the "Use an expression" box is unchecked
5. For property name, put "yAxis.opposite" (without quotes)
6. For Property Value put "true" (without quotes)
7. Click ok

Now, if you were to preview your chart, you would see that both of the yAxis scales are on the right hand side.  This is because Studio tries to be clever and will automatically put the second measure on the right hand side, in the background.  Overriding this behavior is a bit tricky, because in at the properties level you cannot access the second yAxis properties in the way you would hope.  (i.e., setting a yAxis[1].opposite property or something)

My solution was to do the following to get the secondary yAxis over to the left:

1. Edit the WEB-INFclassesjasperreports.properties file and add the following line, and restart the server:
   1. This directory resides in /usr/share/tomcat7/webapps/jasperserver-pro on AWS for me, but may vary based on your installation
2. Go back to Jaspersoft Sudio, go to Show Advanced Properties for your chart, and add the following property:
   1. Property name: chart.events.load
   2. Property value: function(event) {this.yAxis[1].update({opposite: false});}
3. This will cause the chart to render with both yAxis on the right, but then use a JSON call to modify the chart properties after loading to move the secondary yAxis from the right to the left of the chart.
4. You can use this method to dynamically change any aspect of the chart after rendering, in case your problem is a little different than mine.

I hope that helps someone.  Good luck!

[I.Hamann]

Hi there,

This site is also very helpful when you want to change anything on the secondary yAxis.

http://community.jaspersoft.com/blog/playing-advanced-properties-dual-axis-high-chart-japser-studio-6x-or-later-how-control-y-axes

best regards,

Iris