Add Goal Lines (or bands) to HTML5 Charts

Follow

Marianna Ripple

March 09, 2018 15:58

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?

0

• Official comment

  

  Franck Reyherme March 09, 2018 21:50

  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:

  1. Unfold the Jaspersoft Studio Section
  2. Select “Properties”
  3. Click “Add:
  4. Paste in the following for “Property Name”: com.jaspersoft.jasperreports.highcharts.function.properties.allowed
  5. 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!

  Permalink
• 

  Marianna Ripple March 14, 2018 12:30

  Can these goal lines be conditional... If I am rendering the chart of assessment data by grade level, can the goal lines change on that condition?

  0

  Permalink
• 

  Franck Reyherme March 15, 2018 19:45

  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!

  0

  Permalink

Please sign in to leave a comment.