Created by Smart Sparrow

Multiple Charts

The charting component allows several series of data to be presented on a single chart. Several different formats can be overlayed on top of one another (eg, column, line, histogram, errorbar, pie, bar). Learners are able to turn a particular series of data on or off and mouse over particular data points to receive additional information. As a designer you can set the data series presented and the type of series used. It is also possible to add additional information by labelling data points and defining feature colours.


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 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. The charting component is set entirely via the options menu. You can use various fields here to change various qualities about the chart (eg, table title, subtitle, x and y axis titles, etc. ).
  4. Set the total number of data series you wish to feature in your chart using the ‘Graph.Total Series’ field.
  5. The table data is entered as a series of comma separated values in the ‘’ field (eg, - ‘1,4,3,5,2,4’)
  6. 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



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