ember-charts
An addon for working with charts, timelines, and networks in an Ember.js app.
Usage
Installation
ember install @abcum/ember-charts
Introduction
The ember-charts addon adds functionality for working with chart.js charts, and vis.js timeline and networks, enabling complex and advanced visualisation of analytical data, time-series data, event-data, and networked graph data.
Examples
Charts
Create a basic chart. The chart type can be one of: pie, bar, line, radar, bubble, doughnut, polarArea.
export default Ember.Controller.extend({
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
}
})
And specify custom options a basic line chart.
export default Ember.Controller.extend({
options: {
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}
}
})
For detailed information on configuration options, look at the Chart.js documentation pages.
Timelines
Create a basic event timeline.
And specify actions on timeline events.
And specify custom options for the timeline. View the Vis.js documentation for detailed configuration options.
import vis from 'vis.js';
export default Ember.Controller.extend({
options: {
start: vis.moment().subtract(6, 'months').format(),
end: vis.moment().add(6, 'week').format(),
width: '100%',
height: '100%',
align: 'left',
orientation: 'top',
showCurrentTime: true,
autoResize: true,
selectable: false,
editable: false,
zoomMin: 3600000,
zoomMax: 31560000000,
}
})
Timeline events
These action attributes are able to be set on a timeline.
Attribute | Description |
---|---|
on-click |
Called when the user clicks on the timeline. |
on-dblclick |
Called when the user double-clicks on the timeline. |
on-contextmenu |
Called when the user right-clicks on the timeline. |
on-timechange |
Called when the user is moving the timeline range. |
on-timechanged |
Called once when the user has finished moving the timeline range. |
on-rangechange |
Called when the user is dragging the custom time bar. |
on-rangechanged |
Called once when the user has finished dragging the custom time bar. |
Timeline item events
These action attributes are able to be set on a timeline item.
Attribute | Description |
---|---|
on-click |
Called when the user clicks on an item. |
on-dblclick |
Called when the user double-clicks on an item. |
on-contextmenu |
Called when the user right-clicks on an item. |
on-mouseover |
Called when the user moves the mouse over an item. |
on-mouseout |
Called when the user moves the mouse away from an item. |
on-select |
Called when the user selects an item. |
Networks
Create a basic graph network.
And specify actions on network nodes / edges.
And specify custom options for the network. View the Vis.js documentation for detailed configuration options.
import vis from 'vis.js';
export default Ember.Controller.extend({
options: {
autoResize: true,
width: '100%',
height: '100%',
interaction: {
zoomView: false,
},
nodes: {
shape: 'box',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Helvetica'
},
},
edges: {
scaling: {
min: 5,
max: 15,
},
font: {
size: 10,
face: 'Helvetica',
},
},
physics: {
stabilization: true,
solver: 'repulsion',
barnesHut: {
damping: 0.5,
avoidOverlap: 1,
}
},
}
})
Network events
These action attributes are able to be set on a network.
Attribute | Description |
---|---|
on-zoom |
Called when the user changes the zoom level of the network |
on-click |
Called when the user clicks on the network. |
on-dblclick |
Called when the user double-clicks on the network. |
on-contextmenu |
Called when the user right-clicks on the network. |
Network node/edge events
These action attributes are able to be set on a network node, or network edge.
Attribute | Description |
---|---|
on-click |
Called when the user clicks on an node or edge. |
on-dblclick |
Called when the user double-clicks on an node or edge. |
on-contextmenu |
Called when the user right-clicks on an node or edge. |
on-select |
Called when the user selects an node or edge. |
Development
-
make install
(install bower and ember-cli dependencies) -
make upgrade
(upgrade ember-cli to the specified version) -
make tests
(run all tests defined in the package)