• Video Tutorials
• Frequently Asked Questions
• Creating an Interface
  • Actions and Navigation Components
    • Button
    • Timer
  • Advanced Components
    • Compare Runs Table
    • Histogram
    • Login Component
    • Run Table
  • Charts, Tables, and Data Components
    • Area Chart
    • Comparison Bar Chart
    • Data Table
    • Financial Table
    • Line Chart
    • Pie Chart
    • Sparkline
    • Time Bar Chart
    • Value
  • Decision Input Components
    • Checkbox Decision
    • Drawable Line Chart
    • Radio Button Decision
    • Scenario Selector
    • Slider Decision
    • Text Decision
  • Drawing Objects Components
  • Interface Designer Overview
  • Text, Images, and Video Components
    • Images
    • Text
    • Video
• Writing a Model
  • Language Overview
  • Function Reference
• Importing a Model From Another Program
  • Overview
  • Specific Programs

Histogram Component

The histogram component is used to display archived run results in the form of a histogram so that a facilitator can see the distribution of runs from within the group. The histogram properties allow you to assign score and metric variables, choose font styles, choose graph colors, and control the placement of the component on the canvas.

Access the histogram properties by clicking on the histogram after it has been placed on the canvas. The Histogram Settings tab will appear in the component panel displaying a stack of horizontal tabs that are labeled and categorized as follows:

• Series - Contains the property options used for creating and modifying one or more series.


• Title and Axes - Contains the property options used for naming the chart, customizing the labels, setting the numbering format, and adjusting the margin placement.
  
• Styles - Contains the property options used to control the color of the histogram, change the font styles of the labels on the chart, and to choose the colors for compared runs.
  
• Size, Position, and ToolTip - Contains the property options used to adjust the size and position of the histogram and provide tooltip information to the user.

Scroll down to view descriptions of all the histogram property options. Note that the property descriptions below are divided into the same categories found in the Histogram Settings tab.

Histogram Settings: Series

Click the 'Series' tab in the component panel to access the properties used to assign a variable to the graph and to create a range filter.

• Score Variable - Click the 'Score Variable' drop-down menu arrow, and then click 'Browse' to select the variable used to contain the score. The score variable is used to determine the best run from each user. Note that the ‘User Best’ checkbox must be selected in order to display only the best run results of each user (Must be a SaveResult in the model).
  
  
• Metric Variable - Click the ‘Metric Variable’ drop-down menu arrow, and then click ‘Browse’ to select the variable used to display the run results in the histogram (Must be a SaveResult in the model).
  
  
• Use Start Range - Place a check in the 'Use Start Range' checkbox to create a display filter by entering a minimum value for the metric variable in the ‘Start Range’ text entry box. The histogram will not display runs that are below the minimum value.
  
  
• Start Range - Place a check in the 'Use Start Range' to enable the ‘Start Range’ text entry box. Then, enter a number in the ‘Start Range’ text entry box to choose a minimum value for the metric variable. The histogram will not display runs that are below the minimum value.
  
  
• Use End Range - Place a check in the 'Use End Range' checkbox to create a display filter by entering a maximum metric value in the 'End Range' text entry box. The histogram will not display results that exceed the maximum metric value.
  
  
• End Range - Place a check in the 'Use End Range' checkbox to enable the 'End Range' text entry box. Then, enter a number in the 'End Range' text entry box to choose a maximum score requirement. The histogram will not display results that exceed the maximum metric value entered in the ‘End Range’ text entry box.
  
  
• User Best - Place a check in the 'User Best' checkbox to display only the user's best score.
  
  

Histogram Settings: Series Tab

Histogram Settings: Title and Axes

Click the 'Title and Axes' tab to access the properties used to name and label the histogram.

• Chart Title - Enter a chart title for the histogram in the 'Chart Title' text entry box.
  
  
• (X-Axis) Title - Enter a title in the 'Title' text entry box to label the histogram X-axis.
  
  
• (X-Axis) Num Items - Enter the amount of bars to be display on the histogram in the ‘Num Items’ text entry box.
  
  
• (X-Axis) Grid Color - Click the 'Grid Color' box to choose a color for the vertical lines of the histogram grid.
  
  
• (Y-Axis) Title - Enter a title in the 'Title' text entry box to label the histogram Y-axis.
  
  
• (Y-Axis) Minimum - Enter a number in the 'Minimum' text entry box to appear at the bottom label of the histogram Y-axis.
  
  
• (Y-Axis) Maximum - To manually enter a maximum in the ‘Maximum’ text entry box, the ‘Auto Calculate Max’ checkbox (located below the 'Remove Label' button) must be unchecked.
  
  
• (Y-Axis) Num Labels - Enter a number in the 'Num Labels' text entry box to determine the number of labels for the histogram Y-axis.
  
  
• (Y-Axis) Grid Color - Click the 'Grid Color' box to choose a color for the horizontal lines of the histogram grid.
  
  
• Auto Calculate Max - Place a check in the 'Auto Calculate Max' checkbox to automatically generate the chart’s highest point in the Y-axis, which is equal to the highest point of the series.
  
  
• Auto Calculate Min - Place a check in the 'Auto Calculate Min' checkbox to automatically generate the lowest point in the histogram Y-axis, which is equal to the lowest point of the series.
  
  
• Show Zero Plane - Place a check in the 'Show Zero Plane' checkbox to display a line representing the zero point of the graph.
  
  
• Zero Plane Color - Click the 'Zero Plane Color' box to choose a color for the zero plane.
  
  
• X-Axis Color - Click the 'X-Axis Color' box to choose a color for the X-axis of the histogram.
  
  
• X-Axis Number Format - Use the 'X-Axis Number Format' text entry box to change the number format. For example, to change the default format to dollars, enter: $#,##0.
  
  
• Y-Axis Number Format - Use the 'Y-Axis Number Format' text entry box to change the number format. For example, to change the default format to dollars, enter: $#,##0.
  
  
• Y-Axis Color - Click the 'Y-Axis Color' box to choose a color for the Y-axis of the histogram.
  
  
• Y-Axis Rounding Increment - Enter the increment progression of the Y-axis in the 'Y-Axis Rounding Increment' text entry box (for example, entering a '1' will make the Y-axis increment progression be 1, 2, 3, 4 ...; entering a '2' will make the Y-axis increment progression be 2, 4, 6, 8...).
  
  
• Chart DataTip Number Format - Enter a new number format in the 'Chart DataTip Number Format' text entry box or enter a new format.
  
  
• Bar Gap - Enter a number in the 'Bar Gap' text entry box to determine the space between the series displayed in the histogram.
  
  
• Left Margin - Enter a number in the 'Left Margin' text entry box to control the margin distance between the left side of the histogram and the left side of the histogram border.
  
  
• Right Margin - Enter a number in the 'Right Margin' text entry box to control the margin distance between the right side of the histogram and the right side of the histogram border.
  
  
• Top Margin - Enter a number in the 'Top Margin' text entry box to control the margin distance of the top of the histogram from the top of the histogram border.
  
  
• Bottom Margin - Enter a number in the 'Bottom Margin' text entry box to control the margin distance of the bottom of the histogram and the bottom of the histogram border.
  
  

FAQs
How do I change the number format?

Histogram Settings: Title and Axes Tab

Histogram Settings: Styles

Click the 'Styles' tab in the component panel to access the properties used to control the color of the histogram, and to change the font of the labels on the chart.

• Grid Background Color - Click the 'Grid Background Color' box to choose a color for the histogram grid.
  
  
• Chart Background Color - Click the 'Chart Background Color' box to choose a color for the histogram background.
  
  
• Font Family - Click the ‘Font Family’ drop-down menu arrow to choose a font style for the histogram label.
  
  
• Series Color - Click the 'Series Color' box to choose a color for the series.
  
  
• Series Alpha - Enter a number in the 'Series Alpha' text entry box to adjust the opacity of the series.
  
  
• Animation Time - Enter a number of milliseconds in the 'Animation Time' text entry box to control the timing of the series line in the histogram.
  
  
  

Label Font Controls

• Label Font Size - Enter a number in the 'Label Font Size' text entry box to control the size of the X-axis and Y-axis increment labels.
  
  
• Label Font Color - Click on the 'Label Font Color' box to choose a color for the X-axis and Y-axis increment labels.

Axis Font Controls

• Axis Font Size - Enter a number in the ‘Axis Font Size' text entry box to control the size of the X-axis and Y-axis titles.
  
  
• Axis Font Color - Click on the ‘Axis Font Color' box to choose a color for the X-axis and Y-axis titles.

Title Font Controls

• Title Font Size - Enter a number in the ‘Title Font Size' text entry box to control the size of the histogram title.
  
  
• Title Font Color - Click on the ‘Title Font Color' box to choose a color for the histogram title.
  
  
• Show Border - Place a check in the 'Show Border' checkbox to place a border around the histogram.
  
  

Histogram Settings: Styles Tab

Histogram Settings: Size, Position, and ToolTip

Click the ‘Size, Position, and ToolTip’ tab in the component panel to access the properties used to adjust the size and position of the histogram and provide tooltip information to the user.

• X - Enter a number in the ‘X’ text entry box to adjust the left and right positioning of the histogram on the canvas. A higher number moves the histogram to the right, and a lower number moves the histogram to the left.
  
  
• Y - Enter a number in the ‘Y’ text entry box to adjust the up and down positioning of the histogram on the canvas. A larger number will lower the position, and a smaller number moves the histogram higher.
  
  
• Width - Enter a number in the ‘Width’ text entry box to adjust the histogram width.
  
  
• Height - Enter a number in the ‘Height’ text entry box to adjust the histogram height.
  
  
• Tab Index - Specifies the tab ordering of objects in a SWF file. The tabIe index property is -1 by default, meaning no tab index is set.
  
  
• Lock - Use the ‘Lock’ checkbox to lock the histogram ’s position in place on the canvas. A small lock icon will appear near the histogram. Click on the lock icon or uncheck the lock checkbox to unlock the histogram.
  
  
• Visible to Facilitator Only - Use the ‘Visible to Facilitator’ checkbox to restrict the histogram ‘s visibility to only be seen by facilitators.
  
  
• Tooltip - Enter in the details of the histogram in the ‘ToolTip’ text entry box. The details entered will appear on the screen when a user places their mouse cursor on or across the histogram.
  
  

Histogram Settings: Size, Position, and ToolTip Tab

Back | Forward | Main Page