Choose an item

Create a Chart in AngularJS Using FusionCharts

FusionCharts is a JavaScript charting library that lets you create interactive charts, gauges, maps, and dashboards using JavaScript. We have built a simple and lightweight Angularjs directive, which provides bindings for FusionCharts. The angularjs-fusioncharts directive allows you to easily add rich and interactive charts to any Angularjs project.

In this page, you will see how to install FusionCharts and render a chart using the angularjs-fusionCharts directive.

The instructions shown here are for Angular v1.7 and below. For Angular 2 and above, refer to the Angular2+ guide.

Prerequisite

In case of including Fusioncharts dependencies from CDN or Local Files, you can skip this step and get started with the code mentioned in the below steps.

If you choose to install fusioncharts package via npm, make sure you have Node.js installed in your system. AngularJS requires Node.js version 10.9.0 or later. To check your version, run node -v in a terminal/console window. To get Node.js, go to the official website.

Installation and including dependencies

Install FusionCharts and the angularjs-fusioncharts directive using any of the following methods:

To install fusioncharts and the angularjs-fusioncharts directive via npm follow the steps below:
1. Install angularjs core library

    $ npm install [email protected]
Follow the steps mentioned here to initialize a project through npm.
2. Install angularjs-fusioncharts and fusioncharts packages

    $ npm install angularjs-fusioncharts fusioncharts --save
After installing the fusioncharts components, you can replace the code in index.js file with the code shown in the steps below to create your first chart. Import all the required dependencies to get started.

//  Require AngularJS
var angular = require('angular');

// Require FusionCharts
var FusionCharts = require('fusioncharts');

// Require Chart modules
var Charts = require('fusioncharts/fusioncharts.charts');

//Require AngularJS module
var AngularJS = require('angularjs-fusioncharts');

// Require Fusion Theme
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');

// Initialize Charts with FusionCharts instance
Charts(FusionCharts);
AngularJS(FusionCharts);
FusionTheme(FusionCharts);
To install the FusionCharts package and the angularjs-fusioncharts component follow the steps below:
  1. Include the AngularJS core library.
  2. Include the FusionCharts JavaScript files from CDN.
  3. Include the angularjs-fusioncharts directive and the theme file.
The consolidated code which goes into your static HTML file is shown below:

<head>
    <!-- Step 1 - Including AngularJS -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
    <!-- Step 2 - Including the fusioncharts core library -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- Step 3 - Including the angularjs-fusioncharts directive-->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/angularjs-fusioncharts.min.js"></script>
    <!-- Step 4 - Including the fusion theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
To install the FusionCharts Suite and the angularjs-fusioncharts component follow the steps below:
  1. Include the AngularJS core library.
  2. Include the FusionCharts JavaScript files, which can be downloaded from here.
  3. Include the angularjs-fusioncharts directive and the theme file to apply style to the charts.
The consolidated code which goes into your static HTML file is shown below:

<head>
    <!-- Step 1 - Including AngularJS -->
    <script type="text/javascript" src="path/to/local/angular.min.js"></script>
    <!-- Step 2 - Including the fusioncharts core library -->
    <script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
    <!-- Step 3 - Including the angularjs-fusioncharts directive-->
    <script type="text/javascript" src="path/to/local/angularjs-fusioncharts.min.js"></script>
    <!-- Step 4 - Including the fusion theme -->
    <script type="text/javascript" src="path/to/local/themes/fusioncharts.theme.fusion.js"></script>
</head>

That completes the installation of FusionCharts and the angularjs-fusioncharts directive.

Preparing the data

Let's create a chart showing the "Countries With Most Oil Reserves". The data of the oil reserves present in various countries is shown in tabular form below.

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

Since we are plotting a single dataset, let us create a column 2D chart with countries as data labels along x-axis and No. of oil reserves as data values along y-axis. Let us prepare the data for a single-series chart.

FusionCharts accepts the data in JSON format. So the above data in the tabular form will take the below shape.

// Preparing the chart data
const chartData = [
  {
    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"
  }
];

Configure your chart

Now that the data is ready, let's work on the styling, positioning and giving your chart a context.

// Chart Configurations
const dataSource = {
    chart: {
        caption: "Countries With Most Oil Reserves [2017-18]", //Set the chart caption
        subCaption: "In MMbbl = One Million barrels", //Set the chart subcaption
        xAxisName: "Country", //Set the x-axis name
        yAxisName: "Reserves (MMbbl)", //Set the y-axis name
        numberSuffix: "K",
        theme: "fusion", //Set the theme for your chart
        },
        // Chart Data - from step 2
        "data": chartData
    }
};

The 'type' attribute in the chartConfigs object signifies the type of chart being rendered. Have a look at different chart types with their aliases here.

Render the chart

To render the chart, follow the steps given below:

Step 1: In index.js include the necessary files and import the fusioncharts dependency. The consolidated code is shown below:

//  Require AngularJS
var angular = require('angular');

// Require FusionCharts
var FusionCharts = require('fusioncharts');

// Require Chart modules
var Charts = require('fusioncharts/fusioncharts.charts');

//Require AngularJS module
var AngularJS = require('angularjs-fusioncharts');

// Require Fusion Theme
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');

// Initialize Charts with FusionCharts instance
Charts(FusionCharts);
AngularJS(FusionCharts);
FusionTheme(FusionCharts);

var app = angular.module('myApp', ['ng-fusioncharts']);

//STEP 2 - Chart Data
const chartData = [
{ 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' }
];

// STEP 3 - Chart Configurations
const 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",
},
// Chart Data - from step 2
"data": chartData
};

app.controller('MyController', [
'$scope',
function($scope) {
$scope.dataSource = dataSource;
}
]);
Step 2: Specify the chart configurations within the index.html file.
  • Store the chart configurations in a variable (myApp).
  • Add the <div> with an fc-chart directive in your HTML, assuming that it is inside a controller named MyController.


<!doctype html>
<html>
    <head>
        <title>Getting Started- AngularJS</title>
    </head>
    <script src="main.js"></script>
        <body ng-app="myApp">
        <div ng-controller="MyController">
        <div
            fusioncharts
            width="600"
            height="400"
            type="column2d"
            datasource="{{dataSource}}">
        </div>
        </div>
    </body>
</html>

Step 3: Run npx webpack command in the terminal. Once the build is successful, open the index.html file to see your chart.

<html>
<head>
    <!-- Including AngularJS -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
    <!-- Including the fusioncharts core library -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- Including the angularjs-fusioncharts directive-->
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/angular-fusioncharts.js"></script>
    <!-- Including the fusion theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', ['ng-fusioncharts']);
        //STEP 2 - Chart Data
        const chartData = [
            { 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' }
        ];

        // STEP 3 - Chart Configurations
        const 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",
            },
            // Chart Data - from step 2
            "data": chartData
        };
        myApp.controller('MyController', ['$scope', function($scope) {
            // datasource
            $scope.myDataSource = dataSource
        }]);
    </script>

</head>

<body ng-app="myApp">
<div ng-controller="MyController">
<div fusioncharts id="my-chart-id" width="700" height="400" type="column2d" dataSource="{{myDataSource}}">
</div>
</div>
</body>
</html>




<html>
<head>
    <!-- Including AngularJS -->
    <script type="text/javascript" src="path/to/local/angular.min.js"></script>
    <!-- Including the fusioncharts core library -->
    <script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
    <!-- Including the angularjs-fusioncharts directive-->
    <script type="text/javascript" src="path/to/local/angular-fusioncharts.js"></script>
    <!-- Including the fusion theme -->
    <script type="text/javascript" src="path/to/local/themes/fusioncharts.theme.fusion.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', ['ng-fusioncharts']);
        //STEP 2 - Chart Data
        const chartData = [
            { 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' }
        ];

        // STEP 3 - Chart Configurations
        const 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",
            },
            // Chart Data - from step 2
            "data": chartData
        };
        myApp.controller('MyController', ['$scope', function($scope) {
            // datasource
            $scope.myDataSource = dataSource
        }]);
    </script>

</head>

<body ng-app="myApp">
<div ng-controller="MyController">
<div fusioncharts id="my-chart-id" width="700" height="400" type="column2d" dataSource="{{myDataSource}}">
</div>
</div>
</body>
</html>

See your Chart

You should be able to see the chart as shown below.

FusionCharts will load here..

If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly. If you're unable to solve it, click here to get in touch with our support team.

That's it! Your first chart using angularjs-fusioncharts is ready.