Login Register

Documentation

Graph

Description

The Graph addon allows inserting a ready-made bar graph into a presentation.

Properties

The list starts with the common properties. Learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Is not an activity When this option is selected, no points and errors are reported in Error Checking mode
X axis description indicates the description shown near the X axis
Y axis description indicates the description shown near the Y axis
Y axis maximum value indicates the maximum value that could be shown on the graph, which can have a fractional part.
Y axis minimum value indicates the minimum value that could be shown on the graph, which can have a fractional part.
Y axis grid step indicates how often to draw horizontal grid lines, which can have a fractional part.
Interactive indicates if the user can change the graph columns' values by clicking above or below them
Interactive step indicates value that will be added/removed to a clicked column, can have fractional part
Data Graph data, in CSV format. For instance:
"1", "2", "3", "4"
"2", "-2", "-6", "8"
"12", "4", "6", "8"
Each row has to have an equal number of columns. Values have to be placed in quotes. Values can have a fractional part.
Series colors list containing colors for bars, colors have to be defined in any notation that browsers understand, the number of colors must be equal to the number of columns in the data.
Answers List of objects containing correct answer and example answer status. Used only if the interactive property is set to true.
Show X axis bars descriptions indicates if there should be a description shown below each bar (column)
X axis bars descriptions list of descriptions to show below each of bar (column). Used only if the "Show X axis bars descriptions" property is set to true. Amount of items must be equal to the number of bars on the graph
Show X axis series descriptions indicates if there should be a description shown below each of the series.
X axis series descriptions list of descriptions to show below each series. Used only if the "Show X axis series descriptions" property is set to true. The number of items must be equal to the number of series.
Decimal separator By default, the decimal separator in Graph is a dot character. When this field is filled with, e.g., a comma, all settings (i.e,. the Y-axis minimum and maximum values, interactive step) containing the dot character will have it replaced with a comma.
Y axis values Shows/hides cyclic or custom values on the Y axis. You can specify single values, e.g., "2;3;-5", cyclic values, e.g., "2*", or mixed values, e.g,. "2*;5;3;-3.5;7.1*". Cyclic value means that every n-th occurrence will be shown.

CSS classes

Class name Description
.graph_serie_size indicates the look of a series (rows from the "data" property). If you want to add margin between each of the series, use "left" CSS property with a fixed value in pixels
.graph_value_size indicates the look of values, represented as vertical bars (rows' items from the "data" property). If you want to add margin between each of the bars, use "left" CSS property with a fixed value in pixels
.graph_container_outer indicates the look of the outermost container of the graph
.graph_container_inner indicates the look of the container that provides a margin between the outer container and the graph. The default margin is 10px. If you want to adjust it, use "top", "left", "right", and "bottom" CSS properties
.graph_grid indicates the look of the container that contains the grid, use the "display" CSS property to disable the grid
.graph_grid_block_above indicates the look of the grid lines that are located above the X axis, use "border-top" CSS property to change the look of the grid line
.graph_grid_block_below indicates the look of the grid lines that are located below the X axis, use "border-bottom" CSS property to change the look of the grid line
.graph_grid_description indicates the look of the Y axis values, located on the left side of the Y axis, near grid lines
.graph_axis_description indicates the look of axes' descriptions
.graph_axis_x_description indicates the look of axis X description
.graph_axis_y_description indicates the look of axis Y description
.graph_value_element indicates the look of bars.

Note about borders: if you want to set a border, use this CSS class to set only "border-left" and "border-right". As the top and bottom borders can affect the positioning of elements, bars that represent positive values should have a set only top border, and bars that represent negative values should have a set only bottom border. For such purpose, please use .graph_value_element_positive and .graph_value_element_negative classes, respectively.

Note about errors: if you want to style bars during error checking mode, use .graph_value_element_valid and .graph_value_element_invalid, respectively, for valid and invalid elements. Rules for borders also apply during this mode.
.graph_value_element_valid see .graph_value_element
.graph_value_element_invalid see .graph_value_element
.graph_value_element_positive indicates the look of bars that represent positive values. Please see note in .graph_value_element

Note about errors: if you want to style bars during error checking mode, use .graph_value_element_positive_valid and .graph_value_element_positive_invalid, respectively, for valid and invalid elements. Rules for borders also apply during this mode.
.graph_value_element_positive_valid see .graph_value_element_positive
.graph_value_element_positive_invalid see .graph_value_element_positive
.graph_value_element_negative indicates the look of bars that represent negative values. Please see note in .graph_value_element

Note about errors: if you want to style bars during error checking mode, use .graph_value_element_negative_valid and .graph_value_element_negative_invalid, respectively, for valid and invalid elements. Rules for borders also apply during this mode.
.graph_value_element_negative_valid see .graph_value_element_negative
.graph_value_element_negative_invalid see .graph_value_element_negative
.graph_column_description indicates the style of description placed below each bar (column) if they are enabled
.graph_serie_description indicates the style of description placed below each series if they are enabled

Supported commands

Command name Params Description
show - Shows the addon.
hide - Hides the addon.
getValue index Returns the current value of the column with the given index. Index can be from 1 to a number of columns (regardless of a number of series).
isAllOK - Returns true if all columns are set correctly.

Examples

1.1. Make bigger spaces between series and smaller between bars: 

.graph_xx {
}

.graph_xx .graph_serie_size {
    left: 12px;
}

.graph_xx .graph_value_size {
    left: 2px;
}

1.2. Make bars' borders pink on invalid answers and yellow on valid answers: 

.graph_xx {
}

.graph_xx .graph_value_element_valid {
    border-left-color: yellow;
    border-right-color: yellow;
}

.graph_xx .graph_value_element_positive_valid {
    border-top-color: yellow;
}

.graph_xx .graph_value_element_negative_valid {
    border-bottom-color: yellow;
}

.graph_xx .graph_value_element_invalid {
    border-left-color: pink;
    border-right-color: pink;
}

.graph_xx .graph_value_element_positive_invalid {
    border-top-color: pink;
}

.graph_xx .graph_value_element_negative_invalid {
    border-bottom-color: pink;
}

Events (scripting)

When a bar's value is increased or decreased by the user, it sends an event with the following arguments:

If all columns are in the correct position, then the item value is 'all'.
Parameter Value
source ID of this instance of addon
item Clicked bar ID in format:
            SERIE_ID COLUMN_ID
where:
  • SERIE_ID is a row index, counted from 0
  • COLUMN_ID is a column index in a particular row, counted from 0
value New value associated with the clicked column.

If you are using Advanced Connector, please note that due to Regular Expression syntax, which has special meaning for "-" and "." characters, you need to escape them with a backslash. For example:
  • if you want to match the value of -10, you should write "\-10",
  • if you want to match value 20.5, you should write "20\.5".
(in both examples, quotes are used only to distinguish value from description; do not copy them to Advanced Connector's script).

If 'Decimal separator' property was filled, new value will contain specified decimal separator.
If all columns are in the correct position, then the value is empty ('').
score 1 if column is correct, 0 if column is incorrect
If all columns are in the correct position, then the score value is empty ('').

Demo presentation

Demo presentation contains examples of how to use the Graph addon.