Components
Created by Smart Sparrow

Pie chart

The Pie chart widget uses "pie slices" to show relative sizes of data.

 

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 Pie chart.
  4. The pie chart 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.

 

Capi Table

Property Purpose Acceptable Inputs Readable Writable
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 Acceptable Inputs Readable Writable
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