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:
angularjs-fusioncharts
directive via npm follow the steps below:angularjs
core library
$ npm install [email protected]
angularjs-fusioncharts
and fusioncharts
packages
$ npm install angularjs-fusioncharts fusioncharts --save
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);
angularjs-fusioncharts
component follow the steps below:- Include the AngularJS core library.
- Include the FusionCharts JavaScript files from CDN.
- Include the
angularjs-fusioncharts
directive and the theme file.
<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>
angularjs-fusioncharts
component follow the steps 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:
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;
}
]);
index.html
file.- Store the chart configurations in a variable (
myApp
). - Add the
<div>
with anfc-chart
directive in your HTML, assuming that it is inside a controller namedMyController
.
<!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>
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.
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.