This is a container for displaying Chart.js charts in the Adapt framework and authoring tool. You will need to read the Chart.js documentation to create charts using this plugin.
core model attributes: These are inherited by every Adapt component. Read more.
_component (string): This value must be: chart
.
_classes (string): CSS class name to be applied to Chart’s containing div. The class must be predefined in one of the Less files. Separate multiple classes with a space.
_layout (string): This defines the horizontal position of the component in the block. Acceptable values are full
, left
or right
.
instruction (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.
_chartType (string): Select the type of chart to display.
_height (number): Set the height of the chart
data (object): Set datasets and labels. See Chart.js documentation for details.
and/or
dataURL (URL): URL of a data file to load. Note: the format of this file must be a raw json array of numbers, the same as if you were simply typing it in, e.g. "[65, 59, 90, 81, 56, 55, 40]"
Line chart example for authoring tool:
{
"labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
"datasets": [{
"label": "My First dataset",
"backgroundColor": "rgba(179,181,198,0.2)",
"borderColor": "rgba(179,181,198,1)",
"pointBackgroundColor": "rgba(179,181,198,1)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgba(179,181,198,1)",
"data": [65, 59, 90, 81, 56, 55, 40]
}, {
"label": "My Second dataset",
"backgroundColor": "rgba(255,99,132,0.2)",
"borderColor": "rgba(255,99,132,1)",
"pointBackgroundColor": "rgba(255,99,132,1)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgba(255,99,132,1)",
"data": [28, 48, 40, 19, 96, 27, 100]
}]
}
_options (object): Add specifc chart options here. See Chart.js docs.
Line chart example for authoring tool:
{
"title": {
"display": true,
"text": "Custom Chart Title"
}
}
Version number: 0.0.1
Framework versions: 2.0
Author / maintainer: Dan Gray contributors
Accessibility support: No
RTL support: No
Cross-platform coverage: Chrome, Firefox (ESR + latest version), Edge 12, IE 11, IE10, IE Mobile 11, Safari for iPhone (iOS 8+9), Safari for iPad (iOS 8+9), Safari 8