Ember-Fusioncharts

A lightweight EmberJS component which provides bindings for FusionCharts JavaScript Charting Library

The Ember-FusionCharts wrapper framework lets you easily include FusionCharts in your EmberJS projects and add interactive charts to your ambitious Ember application.

Download Plugin View it on Github


Features

  • Adds a chart using just one single component.
  • Auto-updates the chart object when the data source is modified.
  • Adds a chart from a JSON URL, from a XML URL, or using Props Binding.
  • Allows you to enable interactivity between Javascript charts.
  • Offers advanced control by giving you access to the complete FusionCharts object (containing the chart configuration).

Support

Simply open up a github issue with your question/bug report/suggestion.

Along with ember helper, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files

QuickStart

Step 1: Install the ember-fusioncharts wrapper framework

In the terminal run the following command:

    $ ember install ember-fusioncharts

Step 2: Import fusioncharts library

In your ember-cli-build.js build file, import fusioncharts library


/* 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('bower_components/fusioncharts/fusioncharts.js');
    app.import('bower_components/fusioncharts/fusioncharts.charts.js');
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.fint.js');
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.ocean.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();
};


Step 3: Create a simple component

Create a simple component (e.g. chart-viewer, also you can use it anywhere in your application) to show your interactive charts, run:

    $ ember generate 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
});
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}}

And your chart should display when you load the page.


Licensing

Ember-FusionCharts is an open-source resouorce, distributed under the terms of the MIT/X11 License. You will still need to include FusionCharts in your page, as this project provides no direct functionality. You can download a free evaluation version here.

FusionCharts is free for non-commercial and personal use. To use in a commercial environment, please purchase a FusionCharts license.