Add Goal Lines (or bands) to HTML5 Charts



  • Official comment
    Franck Reyherme

    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”:
    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!

    Comment actions Permalink
  • Avatar
    Marianna Ripple

    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?

    Comment actions Permalink
  • Avatar
    Franck Reyherme

    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:

    I hope that helps!

    Comment actions Permalink

Please sign in to leave a comment.