How to configure Highcharts Gauge Chart

Use Case

In the following scenario, the user's requirements were to configure a Gauge chart max value based on a report variable, and also to draw a plotline based on a static value. So the output would look something like this:

http://jsfiddle.net/wjaq4da2/57/

Solution

The correct approach for this in TIBCO JasperReports^® is to pass property values as a function which returns an object with the desired values. The tricky part is, however,  that there are several properties to be configured: the max value and the plot line. Both of them are related to yAxis property, and if you pass two separate functions for two instances of this property, one will override the other and as a result one of the two will be ignored. So what you want to do instead is pass a function that returns an object with ALL the values required for yAxis. For example, in our case described above it can be: 

<hc:chartProperty name="yAxis"> 
   <hc:propertyExpression>
      <![CDATA["function(){return {plotLines: [{color: 'green', value: 77, dashStyle: 'longdashdot', width: 2}], max: " + $V{myGaugeMaxValue} + "}}()"]]>
   </hc:propertyExpression> 
</hc:chartProperty> 

In the example above, as a value for yAxis we pass an object with two properties: plotLines property array with one plot line, and max property which will read value from $V{myGaugeMaxValue} variable.

Another important note: make sure that function properties are enabled for Highcharts, both in Jaspersoft Studio and in JasperReports Server. The functions are enabled by adding the following property:

com.jaspersoft.jasperreports.highcharts.function.properties.allowed=true

In Jaspersoft Studio the property can be added under Window->Preferences->JasperSoft Studio->Properties. On the Server this property needs to be defined in ../WEB-INF/classes/jasperreports.properties file.