Your First Chart in Ember using FusionCharts

FusionCharts is a JavaScript charting library that enables you to create interactive charts, gauges, maps and dashboards in JavaScript. In this page, we'll see how to render charts using FusionCharts and ember-FusionCharts component. We'll start with simple examples of creating a chart , followed by a gauge , and a map .

Before going through this article, please install ember-fusioncharts package, if you haven’t installed it already.

Create your first chart

In this section, we will create a chart using the ember-fusioncharts component. We will create a Column 2D chart which has the alias column2d in FusionCharts. We have 95+ chart types with their respective aliases for you to explore. Find the complete list here .

To create charts, the ember-fusioncharts component can be passed as a part of another ember component.

Let's start with a simple example of "Countries With Most Oil Reserves" chart, which we will plot in a Column 2D chart as shown below:

FusionCharts will load here..

The data for this chart is represented in the table below:

Country No. of Oil Reserves
Venezuela 290
Saudi 260
Canada 180
Iran 140
Russia 115
UAE 100
US 30
China 30

Convert tabular data into JSON format

Now that you have the tabular data ready, it's time to convert it into JSON format, as FusionCharts accepts data in JSON or XML format. The converted format will look as shown below:

There are different JSON formats for different groups of charts in FusionCharts - e.g., single-series , multi-series , combination , etc.

{
    // Chart Configuration
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion",
    },
    // Chart Data
    "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"
    }]
}

In the above JSON, we have:

  • Created the chart object to define the elements of the chart.
  • Then, each row of the tabular data is present within the data array to specify the labels and their corresponding values.

Both the chart object and the data array contain a set of key-value pairs known as attributes. These attributes are used to set the functional and cosmetic properties of the chart as defined below:

Functional Attributes

Functional attributes let you control a variety of functional elements on the chart. For example, you can opt to show/hide data labels or data values. You can also set chart limits and extended properties. The functional attributes used in the above JSON are:

  • caption sets the caption of the chart.
  • subcaption sets the sub-caption of the chart.
  • xAxisName sets the name of the x-axis, while yAxisName sets the name of the y-axis.
  • numberPrefix adds a prefix to all the numbers visible on the chart.
  • Please note, we have used the theme attribute in the chart's JSON data and provided fusion theme as its value. Using themes, you can centralize cosmetic and functional properties across various charts in your web application.

Cosmetics Attributes

These attributes let you configure chart cosmetics like color, transparency, font size, etc. Since we are using the fusion theme to customize the chart's aesthetics, no cosmetic attributes are used in this sample.

For the detailed list of attributes, click here .

Import fusioncharts library

To create a Column2D chart, import the following files to your ember-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');
    return app.toTree();
};

Create component

Create a simple component (e.g. chart-viewer) to render your chart using:

$ ember g component chart-viewer

Add data to chart-viewer.js file

Add the following code to chart-viewer.js:

import Component from '@ember/component';

const myDataSource = {
    chart: {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion",
    },
    // Chart Data
    "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"
    }]
}; // end of this.dataSource

export default Component.extend({
    title: 'Ember FusionCharts Sample',
    width: 700,
    height: 400,
    type: 'column2d',
    dataFormat: 'json',
    dataSource: myDataSource
});

Add data to chart-viewer.hbs

Add fusioncharts component to your chart-viewer.hbs template to render the chart:

<h1>{{ title }}</h1>

{{fusioncharts-xt
    width=width
    height=height
    type=type
    dataFormat=dataFormat
    dataSource=dataSource
}}

Add data to application.hbs

Add chart-viewer component to your application.hbs template:

{{chart-viewer}}

{{outlet}}

See the complete list of all possible attributes (the keys in the dataSource object) for a Column 2D chart.

Now, go on and explore other 95+ chart types that we have in FusionCharts , or explore the configuration attributes for different charts.

Create your first gauge

Gauges are powerful tools that can showcase information using a radial scale to display data, while a dial is used to indicate the value. In this section, we will create an Angular Gauge.

To start with, we'll build a simple gauge showcasing Nordstorm's Customer Satisfaction Score as shown below:

FusionCharts will load here..

The thresholds for the above sample have been defined using the following range.

Range Color Hex Code
0-50 Red #F2726F
50-75 Yellow #FFC533
75-100 Green #62B58F

So, any score less than 50 is bad and is red. Any score between 50 and 75 is average and is yellow. Any score above 75 means good and are green.

Convert tabular data into JSON format

Now that you have the tabular data ready, it's time to convert it into JSON format, as FusionCharts accepts data in JSON or XML format. The converted format will look as shown below:

{
    // Chart Configuration
    "chart": {
        "caption": "Nordstorm's Customer Satisfaction Score for 2017",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "numberSuffix": "%",
        "theme": "fusion",
        "showToolTip": "0"
    },
    // Chart Data
    "colorRange": {
        "color": [{
            "minValue": "0",
            "maxValue": "50",
            "code": "#F2726F"
        }, {
            "minValue": "50",
            "maxValue": "75",
            "code": "#FFC533"
        }, {
            "minValue": "75",
            "maxValue": "100",
            "code": "#62B58F"
        }]
    },
    "dials": {
        "dial": [{
            "value": "81"
        }]
    }
}

Import fusioncharts library

To create a Angular Gauge, import the following files to your ember-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.widgets.js');
    app.import('node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js');
    return app.toTree();
};

Create component

Create a simple component (e.g. chart-viewer) to render your chart using:

$ ember g component chart-viewer

Add data to chart-viewer.js file

Add the following code to chart-viewer.js:

import Component from '@ember/component';

const myDataSource = {
    // Chart Configuration
    "chart": {
        "caption": "Nordstorm's Customer Satisfaction Score for 2017",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "numberSuffix": "%",
        "theme": "fusion",
        "showToolTip": "0"
    },
    // Chart Data
    "colorRange": {
        "color": [{
            "minValue": "0",
            "maxValue": "50",
            "code": "#F2726F"
        }, {
            "minValue": "50",
            "maxValue": "75",
            "code": "#FFC533"
        }, {
            "minValue": "75",
            "maxValue": "100",
            "code": "#62B58F"
        }]
    },
    "dials": {
        "dial": [{
            "value": "81"
        }]
    }
}; // end of this.dataSource

export default Component.extend({
    title: 'Ember FusionCharts Sample',
    width: 450,
    height: 250,
    type: 'angulargauge',
    dataFormat: 'json',
    dataSource: myDataSource
});

Add data to chart-viewer.hbs

Add fusioncharts component to your chart-viewer.hbs template to render the chart:

<h1>{{ title }}</h1>

{{fusioncharts-xt
    width=width
    height=height
    type=type
    dataFormat=dataFormat
    dataSource=dataSource
}}

Add data to application.hbs

Add chart-viewer component to your application.hbs template:

{{chart-viewer}}

{{outlet}}

See the complete list of all possible attributes for an angular gauge.

Create your first map

In this section, we will create a visualization using the World Map. Take a look at the map shown below:

FusionCharts will load here..

The data for this chart is represented in the table below:

State Entity Name Value
North America NA 82
South America SA 2.04
Asia AS 1.78
Europe EU 40
Africa AF 2.58
Australia AU 1.30

In the above table, the column Entity Name represents the geographical entities represented in the map, whose full names are given in the State column.

However, when you convert the data into a format supported by FusionCharts, the entities are denoted by the id key in the data object (see the code snippet of the next section).

For any map visualization, it is important to provide the correct value for the id keys. For example, if you want to denote Africa, the value for the corresponding id must be AF and not AFR.

We have a detailed Map Specification Sheets for all the maps that can be rendered using FusionCharts, where you can find the correct id of the maps you want to create.

Convert tabular data into JSON format

Now that you have the tabular data ready, it's time to convert it into JSON format, as FusionCharts accepts data in JSON or XML format. The converted format will look as shown below:

{
    // Map Configuration
    "chart": {
        "caption": "Average Annual Population Growth",
        "subcaption": " 1955-2015",
        "numbersuffix": "%",
        "includevalueinlabels": "1",
        "labelsepchar": ": ",
        "entityFillHoverColor": "#FFF9C4",
        "theme": "fusion"
    },
    // Aesthetics; ranges synced with the slider
    "colorrange": {
        "minvalue": "0",
        "code": "#FFE0B2",
        "gradient": "1",
        "color": [{
            "minvalue": "0.5",
            "maxvalue": "1.0",
            "color": "#FFD74D"
        }, {
            "minvalue": "1.0",
            "maxvalue": "2.0",
            "color": "#FB8C00"
        }, {
            "minvalue": "2.0",
            "maxvalue": "3.0",
            "color": "#E65100"
        }]
    },
    // Source data as JSON --> id represents countries of world.
    "data": [{
        "id": "NA",
        "value": ".82",
        "showLabel": "1"
    }, {
        "id": "SA",
        "value": "2.04",
        "showLabel": "1"
    }, {
        "id": "AS",
        "value": "1.78",
        "showLabel": "1"
    }, {
        "id": "EU",
        "value": ".40",
        "showLabel": "1"
    }, {
        "id": "AF",
        "value": "2.58",
        "showLabel": "1"
    }, {
        "id": "AU",
        "value": "1.30",
        "showLabel": "1"
    }]
}

Import fusioncharts library

To create a World Map, import the following files to your ember-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.maps.js');
    app.import('node_modules/fusioncharts/maps/fusioncharts.world.js');
    app.import('node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js');
    return app.toTree();
};

Create component

Create a simple component (e.g. chart-viewer) to render your chart using:

$ ember g component chart-viewer

Add data to chart-viewer.js file

Add the following code to chart-viewer.js:

import Component from '@ember/component';

const myDataSource = {
    "chart": {
        "caption": "Average Annual Population Growth",
        "subcaption": " 1955-2015",
        "numbersuffix": "%",
        "includevalueinlabels": "1",
        "labelsepchar": ": ",
        "entityFillHoverColor": "#FFF9C4",
        "theme": "fusion"
    },
    "colorrange": {
        "minvalue": "0",
        "code": "#FFE0B2",
        "gradient": "1",
        "color": [{
            "minvalue": "0.5",
            "maxvalue": "1.0",
            "color": "#FFD74D"
        }, {
            "minvalue": "1.0",
            "maxvalue": "2.0",
            "color": "#FB8C00"
        }, {
            "minvalue": "2.0",
            "maxvalue": "3.0",
            "color": "#E65100"
        }]
    },
    "data": [{
        "id": "NA",
        "value": ".82",
        "showLabel": "1"
    }, {
        "id": "SA",
        "value": "2.04",
        "showLabel": "1"
    }, {
        "id": "AS",
        "value": "1.78",
        "showLabel": "1"
    }, {
        "id": "EU",
        "value": ".40",
        "showLabel": "1"
    }, {
        "id": "AF",
        "value": "2.58",
        "showLabel": "1"
    }, {
        "id": "AU",
        "value": "1.30",
        "showLabel": "1"
    }]
}; // end of this.dataSource

export default Component.extend({
    title: 'Ember FusionCharts Sample',
    width: 800,
    height: 550,
    type: 'world',
    dataFormat: 'json',
    dataSource: myDataSource
});

Add data to chart-viewer.hbs

Add fusioncharts component to your chart-viewer.hbs template to render the chart:

<h1>{{ title }}</h1>

{{fusioncharts-xt
    width=width
    height=height
    type=type
    dataFormat=dataFormat
    dataSource=dataSource
}}

Add data to application.hbs

Add chart-viewer component to your application.hbs template:

{{chart-viewer}}

{{outlet}}

See the complete list of all possible attributes (the keys in the dataSource object) for the Map of World. The respective ids, can be found here .

Problem rendering the chart?

In case there is an error and you are unable to see the chart, check for the following:

  • If you don't see the chart rendered on your browser, it might be because some browsers do not allow JavaScript files to be loaded and run from the local file system. In such cases, either try a different browser, or create a local/remote server and provide the webpages containing the charts from the server.

  • If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly.

  • If the chart does not show up, but there are no JavaScript errors, check if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if fusioncharts.js was loaded. Check if the path to fusioncharts.js file is correct and whether the file exists in that location.

  • If you get a Loading Data or Error in Loading Data message, check whether your JSON data structure is correct, or if there are conflicts related to quotation marks in your code.

Was this article helpful to you ?
Where do you think this article needs improvement?