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.

{{chart-view type='bar' data=data}}

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.

{{chart-view type='line' data=data options=options}}

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.

{{#timeline-view as |t|}}
    {{t.item type='point' start=start content="Visited 'Home' page"}}
    {{t.item type='point' start=start content="Visited 'About Us' page"}}
{{/timeline-view}}

And specify actions on timeline events.

{{#timeline-view on-timechange=(action 'timechange') as |t|}}
    {{t.item type='point' start=start content="Visited 'Home' page" on-select=(action 'select')}}
    {{t.item type='point' start=start content="Visited 'About Us' page" on-select=(action 'select')}}
{{/timeline-view}}

And specify custom options for the timeline. View the Vis.js documentation for detailed configuration options.

{{#timeline-view options=options as |t|}}
    ...
{{/timeline-view}}

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.

{{#network-view as |n|}}
    {{n.node id='a' label="Alexander"}}
    {{n.node id='m' label="Marcus"}}
    {{n.node id='j' label="Jonathan"}}
    {{n.edge from='a' to='j' label="likes"}}
{{/network-view}}

And specify actions on network nodes / edges.

{{#network-view on-zoom=(action 'zoom') as |n|}}
    {{n.node id='a' label="Alexander" on-select=(action 'select')}}
    {{n.node id='m' label="Marcus" on-select=(action 'select')}}
    {{n.node id='j' label="Jonathan" on-select=(action 'select')}}
    {{n.edge from='a' to='j' label="likes" on-select=(action 'select')}}
{{/network-view}}

And specify custom options for the network. View the Vis.js documentation for detailed configuration options.

{{#network-view options=options as |n|}}
    ...
{{/network-view}}

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)