Add Goal Lines (or bands) to HTML5 Charts
Essentially, I am trying to create a Quadrant chart (Scatter) showing two years of assessment data. I need to add a benchmark line for each axis. I am pretty sure this is accomplished under the Advanced Chart Properties, but I cannot seem to get a line to show on either axis. Can anyone help?
-
Official comment
Creating PlotLines in HTML5 Charts
Creating plot lines in your charts requires a little bit of JavaScript, but don’t worry. All you have to do is copy and paste the JavaScript code, and enter a few simple values.
But first, you have to enable a property in Jaspersoft Studio in order to allow JavaScript functions.
Set JSS Property
Open JSS and go to “Properties” or “Preferences”. On a Mac, it’s “Preferences”, but on a PC, it might be “Properties”. I think it’s under the “Window” menu on a PC.
Once you have the Properties/Preferences window open:
- Unfold the Jaspersoft Studio Section
- Select “Properties”
- Click “Add:
- Paste in the following for “Property Name”:
com.jaspersoft.jasperreports.highcharts.function.properties.allowed
- Set the value to:
true
Add Plot Line to HTML5 Chart
Now, to add a plot line to your chart:
- Double-click on your chart
- Click Show Advanced Properties
- Click Add
- Set the Property name to:
xAxis.plotLines
- Copy & Paste the code below into the Property value field:
(function(){return [{value: 2,width: 5,color: 'black'}]})()
- Now, adjust the values to your liking.
- The “value” will determine where the plot line appears on the axis.
- The width & color are self explanatory 😀
- You can do the exact same thing for the yAxis. The only difference will be the Property name will be:
yAxis.plotLines
If you have any trouble, I am happy to help. Just book an appointment with me, and we’ll walk through it together. Please click this link to see my availability and book an appointment with me. Thanks!
Comment actions -
Yes, for sure.
Here’s how I would do it:
Step 1 - Create a Variable
- Create a variable named “Plot Line Value” (or something along those lines)
- Set the class of the variable to
java.lang.Integer
- Click the pencil icon to the right of the Expression field to summon the Expression Editor
- Enter an expression that looks something like this:
$F{Grade Level}.equals("K") ? 2 :$F{Grade Level}.equals("1") ? 3 :$F{Grade Level}.equals("2") ? 4 : null
I get the idea. Here, you are indicating the value of the plot line, for each grade level. So for Kindergarten, the value of the plot line will be 2, but for 1st Grade, the value of the plot line will be 3, etc.
- Click Finish
Step 2 - Use the Variable in the Property Value
- Double-click on your chart
- Select Show Advanced Properties
- Double-click on the
xAxis.plotLines
property that you added earlier. - Important: This time, check the Use an Expression box
- Click the pencil icon to summon the Expression Editor
- Enter the following code in your Expression Editor:
"(function(){return [{value:"+$V{Plot Line Value}+",width: 5,color: 'black'}]})()"
- Click Finish. Click Ok.
That’s it. Now the value of the plot line will be set dynamically for each grade level.
If you run into any issues, don’t hesitate to submit a help ticket by emailing: help@illuminateed.com.
I hope that helps!
Please sign in to leave a comment.
Comments
3 comments