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 X axis
Y axis description indicates the description shown near Y axis
Y axis maximum value indicates the maximum value that could be shown on the graph, can have fractional part
Y axis minimum value indicates the minimum value that could be shown on the graph, can have fractional part
Y axis grid step indicates how often draw horizontal grid lines, can have fractional part
Interactive indicates if user can change 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 equal amount of columns. Values have to be placed in quotes. Values can have fractional part.
Series colors list containing colors for bars, colors have to be defined in any notation that browsers understand, amount of colors must be equal to amount of columns in data
Answers List of objects containing correct answer and example answer status. Used only if interactive property is set to true.
Show X axis bars descriptions indicates if there should be description shown below each bar (column)
X axis bars descriptions list of descriptions to show below each of bar (column). Used only if "Show X axis bars descriptions" property is set to true. Amount of items must be equal to amount of bars on the graph
Show X axis series descriptions indicates if there should be description shown below each of series
X axis series descriptions list of descriptions to show below each serie. Used only if "Show X axis series descriptions" property is set to true. Amount of items must be equal to amount 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 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 series (rows from the "data" property). If you want to add margin between each of the series, use "left" CSS property with 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 fixed value in pixels
.graph_container_outer indicates the look of the most outer container of the graph
.graph_container_inner indicates the look of the container that provides a margin between outer container and the graph. 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 grid, use "display" CSS property to disable grid
.graph_grid_block_above indicates the look of the grid lines that are located above X axis, use "border-top" CSS property to change look of the grid line
.graph_grid_block_below indicates the look of the grid lines that are located below X axis, use "border-bottom" CSS property to change look of the grid line
.graph_grid_description indicates the look of the Y axis values, located on the left side of 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 border, use this CSS class to set only "border-left" and "border-right". As top and bottom border can affect positioning of elements, bars that represent positive values should have set only top border and bars that represent negative values should have 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 apply also 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 apply also 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 apply also 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 style of description placed below each bar (column) if they are enabled
.graph_serie_description indicates style of description placed below each serie if they are enabled

Supported commands

Command name Params Description
show - Shows the addon.
hide - Hides the addon.
getValue index Returns current value of column with given index. Index can be from 1 to number of columns (regardless of 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 following arguments:

If all columns are in correct position then 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 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 backshlash. For example:
  • if you want to match 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 correct position then value is empty ('').
score 1 if comuln is correct, 0 if column is incorrect
If all columns are in correct position then score value is empty ('').

Demo presentation

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