Step 6 - Add & Configure Chart

Tutorial 1 for Pro Version: Aggregate and Visualize Your Data

Step 6 - Add HTML5 Chart to Summary Band; Configure Chart

• Navigate to the Palette tab in JSS

• Drag and Drop HTML5 Chart onto the Summary Band

• Select the Stacked Bar Percent Chart

  • Be sure to select "Stacked Bar Percent", not "Stacked Bar"

  • Feel free to use "Stacked Column Percent" if you prefer.

• Click OK

• Double-click on your chart

• Click Chart Data > Configuration

• Double-click on Level1 under Category Levels

Add Category Level

• Name your category field

  • The category field is your x-axis. In my example, the x-axis of my chart is the Site Name, so I need to set my category to the Current Site Name field.

• Click on the Pencil Icon next to the Expression field

• Remove the "Change Me" that is there by default

• Double-click on your x-axis (aka "category") field

  • Make sure you double-click on the field name

  • You should see $F{field_name} appear in the text box

• Click Finish

• Click OK

Add Series Levels

Set your Series Levels

• In a stacked bar chart, the "Series Levels" represent each bar in the stack.

• In my example, each bar in the stack represents a different performance level on the SBA state assessment.

Under Series Levels:,

• Click Add

• Name your Series Levels "PL" or "Performance Levels" (or whatever is appropriate for the data you're working with)

• Click the Pencil Icon next to the "Expression" field

• Double-click on $F{2014-2015 SBA Summative (Final) ELA Performance Level}

• Click Finish

• Set Value Class Name to java.lang.Integer

• Set the Order field to "Descending"

• Click OK

Key Concept

• Set your series levels with a numeric value. This will ensure the bars in your stack are sorted correctly.

• We will change the chart's labels later so that the chart displays the text value of your performance labels. But when you initially setup your chart, use a numeric value.

Add Measure

• Under "Measures", double-click on Measure1

• Name your measure "Students"

• Set the Label Expression

  • Set the "Label Expression" to "Level"

    • Make sure your text is surrounded by quotes.

  • The "Label Expression" will appear in the chart's legend

  • Feel free to customize the label expression to whatever you think is appropriate.

• Set the Calculation to Distinct Count (assuming you wanted an unduplicated count of students at each performance level).

• Click on the Pencil Icon next to the Value Expression field

• Remove "new Integer(1)" from the expression field

• Double-click on Student ID Field

• Click Finish

• Click OK

• Click OK

>> Continue to Step 7. >>