Creating Multiple Plotbands in HTML5 (Highcharts)

Posted on July 22, 2014 at 8:11am
1
Hello All,
 
I'm running Jaspersoft Studio 5.6, and am creating a HTML5 (highcharts) line chart. 
 
I would like to create a set of horizontal plotbands in my chart, similar to the attached image.
 
 
Using the highcharts API reference (http://api.highcharts.com/highcharts), I can generate a single plotband using the following syntax in the JRXML file:
 
<hc:chartProperty name="yAxis.plotBands.color">
<hc:propertyExpression><![CDATA["#E3FFC5"]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="yAxis.plotBands.from">
<hc:propertyExpression><![CDATA[new Integer(0)]]></hc:propertyExpression>
</hc:chartProperty>
<hc:chartProperty name="yAxis.plotBands.to">
<hc:propertyExpression><![CDATA[new Integer(50)]]></hc:propertyExpression>
</hc:chartProperty>
And as expected, this produces a single y-axis plotband from 0 to 50.
 
My question is this: how can I generate an additional plotband in the same chart, say from 60 - 80?
 
If I attempt to replicate the code above, it's simply reinterpreted as the same attributes, but with different (newer) values.
 
The issue has to do with how to correctly interpret the JSON of the highcharts plotBands call. What I need to do is get the following JSON syntax into proper JRXML format:
 
plotBands: [{
                color: '#E3FFC5',
                from: '0',
                to: '50'
            }, {
                color: '#E3FFC5',
                from: '60',
                to: '80'
            }]
 
In this case, I want to create an array of object (and not an array of array which is often used). Something like java.util.Arrays.asList([list of JSON plotBand objects]).
 
Thanks much.
richbl's picture
richbl
39
Joined: May 22 2014 - 7:14pm
Last seen: 2 years 2 months ago

Hi, I just ran into this same problem.   Did you ever find an answer to this.

 

judy.leblanc - 5 years 1 day ago
add comment

2 Answers:

1
Posted on December 19, 2014 at 1:07pm

An array of objects for something like yAxis.plotLines, or plotBands, and setting such values as properties is not currently supported. There is a feature request for this ability, specifically for plotlines.

There is a workaround that might help in some scenarios or help give you some ideas. 

First, "com.jaspersoft.jasperreports.highcharts.function.properties.allowed" must be set to true in your jasperreports.properties (in your client as well as JRS), then use a function to return the values. 


The following would return a single line. 
(function(){return [{value: 0.696, width: 1, color: 'green', dashStyle: 'dash', label: { text: 'Latest value', align: 'right', y: 12, x: 0 }]})() 

Attached is an example of doing something similar with plotLines, with a TimeSeriesLine chart using our sample foodmart tables, it has two lines. 

Attachments: 
AttachmentSize
Binary Data jrxml with two plotlines4.22 KB
ghudson_1's picture
ghudson_1
24745
Joined: Oct 30 2012 - 12:51pm
Last seen: 6 days 4 hours ago
0
Posted on September 7, 2016 at 7:16am

May i know where we can get this  jasperreports.properties  file in Jasper Studio?

 

raghavmish's picture
raghavmish
3
Joined: Jul 20 2016 - 10:54pm
Last seen: 3 years 1 month ago
Feedback