A lightweight EmberJS component which provides bindings for FusionCharts JavaScript Charting Library. It easily adds rich and interactive charts to any ambitious Ember application.
- Github Repo: https://github.com/fusioncharts/ember-fusioncharts
- Documentation: https://www.fusioncharts.com/dev/getting-started/ember/your-first-chart-using-ember
- Support: https://www.fusioncharts.com/contact-support
- FusionCharts
- Official Website: https://www.fusioncharts.com/
- Official NPM Package: https://www.npmjs.com/package/fusioncharts
- Issues: https://github.com/fusioncharts/ember-fusioncharts/issues
- Getting Started
- Quick Start
- Going Beyond Charts
- Usage and Integration of FusionTime
- For Contributors
- Licensing
- Ember.js v4.12 or above
- Ember CLI v4.12 or above
- Node.js v18 or above
- Node.js, NPM/Yarn installed globally in your OS.
- FusionCharts and Ember installed in your project, as detailed
Direct Download All binaries are located on our github repository.
Install from NPM
To install ember-fusioncharts
to any existing ember project, run:
For Modern Ember CLI:
$ npm install ember-fusioncharts --save
For Earlier Ember CLI (and addon developers):
$ npm install ember-fusioncharts --save-dev
$ ember g ember-fusioncharts
Then install fusioncharts
to your project:
$ npm install fusioncharts --save
Then import fusioncharts
library to your ember-cli-build.js
build file:
/* eslint-env node */
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
// Add options here
});
// Import fusioncharts library
app.import('node_modules/fusioncharts/fusioncharts.js');
app.import('node_modules/fusioncharts/fusioncharts.charts.js');
app.import('node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js');
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree();
};
After installing ember-fusioncharts
, create a simple component(e.g. chart-viewer
, also you can use it anywhere in your application) to show your interactive charts, run:
$ ember g component chart-viewer
Write your chart logic in chart-viewer.js
file:
import Component from '@ember/component';
const myDataSource = {
chart: {
caption: "Harry's SuperMart",
subCaption: 'Top 5 stores in last month by revenue',
numberPrefix: '$',
theme: 'fint'
},
data: [
{
label: 'Bakersfield Central',
value: '880000'
},
{
label: 'Garden Groove harbour',
value: '730000'
},
{
label: 'Los Angeles Topanga',
value: '590000'
},
{
label: 'Compton-Rancho Dom',
value: '520000'
},
{
label: 'Daly City Serramonte',
value: '330000'
}
]
};
export default Component.extend({
title: 'Ember FusionCharts Sample',
width: 600,
height: 400,
type: 'column2d',
dataFormat: 'json',
dataSource: myDataSource
});
And use fusioncharts-xt
component in your chart-viewer.hbs
template to show your charts:
<h1>{{ title }}</h1>
{{fusioncharts-xt width=width height=height type=type dataFormat=dataFormat
dataSource=dataSource}}
Then, use chart-viewer
component in your application.hbs
template:
{{chart-viewer}} {{outlet}}
In your component file:
import Component from '@ember/component';
export default Component.extend({
width: 600,
height: 400,
type: 'column2d',
dataFormat: 'json',
dataSource: {
chart: {
caption: 'Countries With Most Oil Reserves [2017-18]',
subCaption: 'In MMbbl = One Million barrels',
xAxisName: 'Country',
yAxisName: 'Reserves (MMbbl)',
numberSuffix: 'K',
theme: 'fusion'
},
data: [
{
label: 'Venezuela',
value: '290'
},
{
label: 'Saudi',
value: '260'
},
{
label: 'Canada',
value: '180'
},
{
label: 'Iran',
value: '140'
},
{
label: 'Russia',
value: '115'
},
{
label: 'UAE',
value: '100'
},
{
label: 'US',
value: '30'
},
{
label: 'China',
value: '30'
}
]
},
events: null,
message: 'Hover on the plot to see the value along with the label',
init() {
this._super(...arguments);
const self = this;
this.set('events', {
dataplotRollOver: function(eventObj, dataObj) {
self.set(
'message',
'You are currently hovering over ' +
dataObj.categoryLabel +
' whose value is ' +
dataObj.displayValue
);
},
dataPlotRollOut: function(eventObj, dataObj) {
self.set(
'message',
'Hover on the plot to see the value along with the label'
);
}
});
}
});
In your template file:
{{fusioncharts-xt width=width height=height type=type dataFormat=dataFormat
dataSource=dataSource events=events}}
<p>{{ message }}</p>
Using this example when you hover on a dataplot you will get to see the value and label of the dataplot underneath the chart.
To attach event listeners to FusionCharts, you can use the events
attribute in the fusioncharts-xt
template.
In your template file:
{{fusioncharts-xt width=width height=height type=type dataFormat=dataFormat
dataSource=dataSource events=events}}
From fusioncharts@3.13.3-sr.1
and ember-fusioncharts@2.0.0
, You can visualize timeseries data easily with vue.
Learn more about FusionTime here.
import FusionTime
library to your ember-cli-build.js
build file:
/* eslint-env node */
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
// Add options here
});
// Import fusioncharts library
app.import('node_modules/fusioncharts/fusioncharts.js');
app.import('node_modules/fusioncharts/fusioncharts.timeseries.js');
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree();
};
Create a simple component(e.g. timeseries-viewer
, also you can use it anywhere in your application) to show your interactive charts, run:
$ ember g component chart-viewer
Write your chart logic in timeseries-viewer.js
file:
import Component from '@ember/component';
const dataSource = {
data: null,
caption: {
text: 'Sales Analysis'
},
subcaption: {
text: 'Grocery & Footwear'
},
series: 'Type',
yAxis: [
{
plot: 'Sales Value',
title: 'Sale Value',
format: {
prefix: '$'
}
}
]
};
const jsonify = res => res.json();
// This is the remote url to fetch the data.
const dataFetch = fetch(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json'
).then(jsonify);
const schemaFetch = fetch(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json'
).then(jsonify);
export default Component.extend({
title: 'TimeSeries Example',
width: 600,
height: 400,
type: 'timeseries',
dataFormat: null,
dataSource: null,
// timeSeriesDS: null,
init() {
this._super(...arguments);
this.set('dataFormat', 'json');
this.createDataTable();
},
createDataTable() {
Promise.all([dataFetch, schemaFetch]).then(res => {
const data = res[0];
const schema = res[1];
// First we are creating a DataStore
const fusionDataStore = new FusionCharts.DataStore();
// After that we are creating a DataTable by passing our data and schema as arguments
const fusionDataTable = fusionDataStore.createDataTable(data, schema);
// Afet that we simply mutated our timeseries datasource by attaching the above
// DataTable into its data property.
dataSource.data = fusionDataTable;
this.set('dataSource', dataSource);
});
}
});
And use fusioncharts-xt
component in your timeseries-viewer.hbs
template to show your charts:
<h1>{{ title }}</h1>
{{fusioncharts-xt width=width height=height type=type dataFormat=dataFormat
dataSource=dataSource}}
Then, use timeseries-viewer
component in your application.hbs
template:
{{timeseries-viewer}} {{outlet}}
- Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations here.
- See Data Stories built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.
- Clone the repository.
- Install dependencies.
- Run
npm start
to start the dev server. - Open
http://localhost:4200/
in your browser.
$ git clone https://github.com/fusioncharts/ember-fusioncharts.git
$ cd ember-fusioncharts
$ npm i && bower install
$ npm start
To build, run:
$ npm run build
The FusionCharts Ember component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a separate license.