Components
Created by Smart Sparrow

Histogram

This widget allows you to graph series of data using bars of different heights. A histogram is used for continuous data, where the bins represent ranges of data, while a bar chart is a plot of categorical variables.

 

Unique ways to use this widget

There are multiple ways you can use this widget to assess learner knowledge. For example:

  • Ask students to make observations based on your chart. They can provide their observations using other widgets such as free form text inputs, multiple choice questions, number sliders, etc.
  • Ask students what is wrong with a chart shown, based on previously learned or provided information.
  • Ask students to select the most appropriate type of graph to display information you provide (as specific graphs are generally best used for different things).

 

Have a play

 

Basic setup instructions

  1. This component can be found in the Author. Insert the Charts widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. Set the Serie type to histrogram.
  4. The histogram widget is set entirely via the options menu. You can use various fields here to change various qualities about the chart (eg, title, subtitle etc. ).
  5. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.

 

Other options

  • Using the ‘Series N.labels’ field you can specify the text labels for the different data points within that series using a string of comma separated labels.
  • Using the ‘Series N.colours’ field you can specify the colours of different data points or columns in your series by entering a string of comma separated html colour codes. For example, if you wanted to highlight the three highest numbers in the data series (2,7,8,9,1,3) by putting these in red (and the others in black) your ‘Series 1.colours’ would look like this – (black,red,red,red,black,black) or (#000000,#ff0000,#ff0000,#ff0000,#000000,#000000)
  • It is possible to show a trend line for each series by turning on Series N.showTrendLine

 

Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
Graph.title
Title of the graph
String
Graph.subtitle
Subtitle of the graph
String
Graph.x Axis Title
X axis title
String
Graph.x Axis Categories
X axis categories
String
Graph.y Axis Title
Y axis title
String
Graph.y Axis Minimum
Y axis minimum value
String
Graph.y Axis Maximum
Y axis maximum value
String
Graph.Total Series
Count number of series - graph lines
Number
Graph.Use Dual Axis
Will use or not dual axis
Boolean
Graph.Show Legend
Will show or hide the legend on the chart
Boolean
Graph.Graph Config
The highcharts configuration of the graph
String
Graph.y Axis Second Title
Y Axis Second Title
String
Graph.y Axis Second Minimum
Y Axis Second Minimum
Number
Graph.y Axis Second Maximum
Y Axis Second Maximum
Number
Series {index}.name
Name of the specific graph series instance
String
Series {index}.type
Graph series instance type
line
pie
bar
column
errorbar
histogram
scatter
Series {index}.data
Graph series instance data values
String
Series {index}.labels
Graph series instance data labels
String
Series {index}.colour
Graph series instance data color
String
Series {index}.colours
Graph series instance data colors
String
Series {index}.showLabels
Whether or not to show labels for specific graph series instance
Boolean
Series {index}.showTrendLine
Whether or not to show trend line for specific graph series instance
Boolean
Property Purpose Type
Graph.title
Title of the graph
String
Graph.subtitle
Subtitle of the graph
String
Graph.x Axis Title
X axis title
String
Graph.x Axis Categories
X axis categories
String
Graph.y Axis Title
Y axis title
String
Graph.y Axis Minimum
Y axis minimum value
String
Graph.y Axis Maximum
Y axis maximum value
String
Graph.Total Series
Count number of series - graph lines
Number
Graph.Use Dual Axis
Will use or not dual axis
Boolean
Graph.Show Legend
Will show or hide the legend on the chart
Boolean
Graph.Graph Config
The highcharts configuration of the graph
String
Graph.y Axis Second Title
Y Axis Second Title
String
Graph.y Axis Second Minimum
Y Axis Second Minimum
Number
Graph.y Axis Second Maximum
Y Axis Second Maximum
Number
Series {index}.name
Name of the specific graph series instance
String
Series {index}.type
Graph series instance type
line
pie
bar
column
errorbar
histogram
Series {index}.data
Graph series instance data values
String
Series {index}.labels
Graph series instance data labels
String
Series {index}.colour
Graph series instance data color
String
Series {index}.colours
Graph series instance data colors
String
Series {index}.showLabels
Whether or not to show labels for specific graph series instance
Boolean
Series {index}.showTrendLine
Whether or not to show trend line for specific graph series instance
Boolean
Property Purpose Type
Graph.title
Title of the graph
String
Graph.subtitle
Subtitle of the graph
String
Graph.x Axis Title
X axis title
String
Graph.x Axis Categories
X axis categories
String
Graph.y Axis Title
Y axis title
String
Graph.y Axis Minimum
Y axis minimum value
String
Graph.y Axis Maximum
Y axis maximum value
String
Graph.Total Series
Count number of series - graph lines
Number
Graph.Use Dual Axis
Will use or not dual axis
Boolean
Graph.Show Legend
Will show or hide the legend on the chart
Boolean
Graph.Graph Config
The highcharts configuration of the graph
String
Graph.y Axis Second Title
Y Axis Second Title
String
Graph.y Axis Second Minimum
Y Axis Second Minimum
Number
Graph.y Axis Second Maximum
Y Axis Second Maximum
Number
Series {index}.name
Name of the specific graph series instance
String
Series {index}.type
Graph series instance type
line
pie
bar
column
errorbar
histogram
Series {index}.data
Graph series instance data values
String
Series {index}.labels
Graph series instance data labels
String
Series {index}.colours
Graph series instance data colors
String
Series {index}.showLabels
Whether or not to show labels for specific graph series instance
Boolean
Series {index}.showTrendLine
Whether or not to show trend line for specific graph series instance
Boolean

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services