Created by Smart Sparrow

Line Chart

The line chart widget displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments. A line chart is often used to visualize a trend in data over intervals of time – a time series – thus the line is often drawn chronologically.


Unique ways to use this widget

There are multiple ways you can use this widget. 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 Line chart.
  4. The line 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.
  • 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