Ember FusionCharts

Ember-FusionCharts

An easy-to-use, lightweight EmberJS component for the FusionCharts JavaScript Charting Library

The Ember-FusionCharts component lets you easily include FusionCharts in your EmberJS projects and add interactive charts to your Ember applications.

Features

Adds a chart using just one single component.
Allows you to enable interactivity between Javascript charts.

Auto-updates the chart object when the data source is modified.
Offers advanced control by giving you access to the complete FusionCharts object (containing the chart configuration).

Quick Demo:

A Simple Chart

A simple chart with all data embedded into the directive

A Simple TimeSeries

FusionTime

A simple time-series chart with a single series plotted as line

Column chart with time axis

FusionTime

Time-series chart with series plotted as column

Area chart with time axis

FusionTime

Time-series chart with series plotted as are

A 3D Pie Chart

A 3D pie chart using the datasource attribute from component's scope

A simple gauge

A simple gauge to show customer satisfaction score

A Column, Line and Area Combi Chart

A combination chart of column, line and area

Column and line combination on time axis

FusionTime

Two series of data plotted as a combination of column & line on the same y-axis

Plotting multiple series on time axis

FusionTime

A multi-series chart with 2 variables plotted as line on the same y-axis

Plotting two variables (measures)

FusionTime

Plotting 2 different variables in 2 different vertically stacked canvases

Fetch data from JSON URL

Fetch data remotely from a JSON file or URL

Fetch data from XML URL

Fetch data remotely from a XML file or URL

Update chart data

Change the data dynamically and watch the chart update automatically

Update chart attribute

Update the chart with new attributes

Listen to events from chart

Hover on a plot to see the percentage value with respect to total

Percentage Calculation

Hover on a plot to see the percentage value with respect to total

Add drill-down to chart

Use LinkedCharts to quickly add drill-down to charts

Adding a reference line

FusionTime

Adding a static reference line (by value) to indicate targets or threshold

Annotating single data point

FusionTime

Annotating specific data point using data markers on line series

Single event overlay

FusionTime

Plotting an event marker to indicate an event for a specific date

Date range event overlay

FusionTime

Plotting an event marker as a band, to indicate an event that spans a data range

Export multiple charts

Use Batch Export Feature to export multiple charts as a single image/PDF

World Map

World map showing data for different continents

Special Events

Drag a projected column to see its change

Lifecycle events

This sample lists the basic lifecycle events at the time of rendering FusionCharts

Dynamically add chart event listener

How you can dynamically(runtime) add & remove chart specific events in FusionCharts

Slice data plots

Use Chart specific custom API

Responsive charts

Select any of the dimensions given in the list. The chart adjusts itself to its alloted percentage

Change chart type at run time

Change the chart type dynamically or at runtime

Use annotations

Add custom shapes to highlight a specific data point

Usage of FusionCharts methods (API)

Change a chart attribute by calling FusionCharts methods

Applying a different theme

Choosing from different themes available in FusionCharts Suite

Interactive candlestick chart

FusionTime

Time-series chart plotted as candlestick, with 4 different values for each plot (open, high, low, close)

Quick Start

Setting up the FusionCharts EmberJS Addon

Step 1: Install the Ember FusionCharts wrapper framework

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

Step 2: Import FusionCharts library

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

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:

Write your chart logic in chart-viewer.js file:

And use fusioncharts-xt component in your chart-viewer.hbs template to show your charts:

Step 4: Create a simple component

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

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.js.

Consider the example below for integration of FusionTime

Import fusioncharts and fusiontime library to your ember-cli-build.js build file:

Next step is to create a component and use that component to render a TimeSeries Chart.

For our example we'll call this component timeseries-viewer. Run the below command on your project to generate a new component.

Add the below code in your timeseries-viewer.js file.

And use fusioncharts-xt component in your timeseries-viewer.hbs template to show your charts:

Then, use timeseries-viewer component in your application.hbs template:

Support

GitHub Issues | Contact FusionCharts Support

Licensing

Ember-FusionCharts module is licensed under open-source, 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. To use in a commercial environment, please purchase a FusionCharts license.