Ember Component for FusionCharts

Easy to use Ember component for FusionCharts

Download Free Trail

Add Ember charts and graphs like area, bar, donut, line, marimekko, radar, stockcharts and 150+ other charts & 1000+ maps for your web or mobile application. Using FusionCharts’ Ember component you can create charts which are responsive, interactive, and, support zooming, panning, APIs, animation, drill-downs, real-time updates, and even full exporting of charts & dashboards.

It also comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. All charts and dashboards made on FusionCharts’ Ember charts component are mobile first by default, and responsive across all devices. Further, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the Ember component is completely open source and actively maintained by a team of dedicated developers.

Features

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

Quick Demo

A Simple Chart
Quick demo

Quick Start

Step 1 : Install the FusionCharts Ember component

To install ember-fusioncharts to any existing ember project, run:

$ ember install ember-fusioncharts

Step 2 : Import FusionCharts library

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

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
    let app = new EmberApp(defaults, {});

    app.import('bower_components/fusioncharts/fusioncharts.js');
    app.import('bower_components/fusioncharts/fusioncharts.charts.js');
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.fusion.js');

    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
});

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

Step 4 : Create a simple component

Use chart-viewer component in your application.hbs template:

{{chart-viewer}}

{{outlet}}

Usage and integration of FusionTime

From fusioncharts@3.13.3-sr.1 and ember-fusioncharts@2.0.0, You can visualize timeseries data easily with Ember. Learn more about FusionTime here.

Import FusionTime library to your ember-cli-build.js build file:

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {});
  app.import('node_modules/fusioncharts/fusioncharts.js');
  app.import('node_modules/fusioncharts/fusioncharts.timeseries.js');

  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();
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,

  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];
      const fusionDataStore = new FusionCharts.DataStore();
      const fusionDataTable = fusionDataStore.createDataTable(data, schema);

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

Licensing

FusionCharts Ember component is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can download a free evaluation version. However, You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).