Skip to content

dancgray/adapt-chartjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

adapt-chart

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.

Installation

Attributes

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"
    }
}

JSON Examples

Accessibility

Limitations


Version number: 0.0.1 adapt learning logo 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