angularjs-fusioncharts
Advanced tools
A simple and lightweight official AngularJS component for FusionCharts JavaScript charting library. angularjs-fusioncharts enables you to add JavaScript charts in your AngularJS application without any hassle.
To install angularjs-fusioncharts library, run:
$ npm install angularjs-fusioncharts --save
To install fusioncharts library:
$ npm install fusioncharts --save
In your index.html
<script type="text/javascript" src="node_modules/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="node_modules/fusioncharts/fusioncharts.charts.js"></script>
<script type="text/javascript" src="node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angularjs-fusioncharts/dist/angular-fusioncharts.js"></script>
In the app, include ng-fusioncharts as a dependency. If you looking for where to add the dependency, look for the call to angular.module in your code.
angular.module('myApp', ['ng-fusioncharts']);
In your HTML, find the section where you wish to add the chart and add a
<body ng-app='myApp'>
...
<div ng-controller="MyController">
<div
fusioncharts
width="600"
height="400"
type="column2d"
datasource="{{dataSource}}">
</div>
</div>
...
</body>
In the previous code, we are binding to a scope variable myDataSource, but that hasn't been defined yet. In your controller, set the DataSource as you would for a regular FusionCharts JSON format DataSource (see this tutorial for a general introduction to this format).
app.controller('MyController', function($scope) {
$scope.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'
},
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' }
]
};
});
And your chart should display when you load the page.
require() syntaxIn script.js
// Require AngularJS
var angular = require('angular');
// Require FusionCharts
var FusionCharts = require('fusioncharts');
// Include angularjs-fusioncharts
require('angularjs-fusioncharts');
// Require Chart modules
var Charts = require('fusioncharts/fusioncharts.charts');
// Initialize Charts with FusionCharts instance
Charts(FusionCharts);
var app = angular.module('myApp', ['ng-fusioncharts']);
app.controller('MyController', [
'$scope',
function($scope) {
$scope.dataSource = {
chart: {
caption: 'Countries With Most Oil Reserves [2017-18]',
subCaption: 'In MMbbl = One Million barrels',
xAxisName: 'Country',
yAxisName: 'Reserves (MMbbl)',
numberSuffix: 'K'
},
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' }
]
};
}
]);
Use a bundler like browserify to bundle the script
See the installation docs here
$ browserify script.js -o bundle.js
In index.html
<html>
<head>
<!-- Include compiled bundle in script tag -->
<script type="text/javascript" src="./bundle.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<div
fusioncharts
width="600"
height="400"
type="column2d"
datasource="{{dataSource}}">
</div>
</div>
</body>
</html>
Load it in browser , Chart should get displayed
Fusincharts events can be subscribed by attaching scope functions to event attributes.
All the events attributes start with fcevent-
followed by the event name in lowercase
Usage in template :
<fusioncharts
width="400"
height="400"
type="column2d"
datasource="{{myDataSource}}"
fcevent-dataplotrollover="rollover(event, args)">
</fusioncharts>
In the given above template, rollover is the scope function that needs to be defined in the controller's code.
For more on this read here
var app = angular.module('myApp', ['ng-fusioncharts']);
app.controller('MyController', function($scope) {
$scope.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'
},
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' }
]
};
$scope.rollover = function(event, data) {
console.log(event, data);
};
});
Get the list of fusioncharts' events
FusionCharts chart instance is made available from the initialized event. It provides the chart instance as a parameter which can be used to call FusionCharts methods.
In template, we add initialized event
<fusioncharts
width="400"
height="400"
type="column2d"
datasource="{{myDataSource}}"
initialized="onInitialized(chart)">
</fusioncharts>
<button ng-click="changeCaption()">Change Chart Caption</button>
In order to use the chart instance, we need to store it.
var app = angular.module('myApp', ['ng-fusioncharts']);
app.controller('MyController', function($scope){
var chart;
$scope.datasource = {
...// same data as above
};
$scope.onInitialized = function(chartObj){
chart = chartObj;
}
$scope.changeCaption = function(){
chart.setChartAttribute('caption', 'Caption changed');
}
});
In the given above example, clicking the button changes the caption text to Caption changed
Get the list of fusioncharts' methods
From fusioncharts@3.13.3-sr.1 and angularjs-fusioncharts@5.0.0, You can visualize timeseries data easily with angular.
Learn more about FusionTime here.
If you've included angular-fusioncharts.js and fusioncharts in your html
then add the following script tag:
In your index.html
...
<script type="text/javascript" src="node_modules/fusioncharts/fusioncharts.timeseries.js"></script>
...
In your script.js
// If you haven't imported angulajs, angularjs-fusioncharts and fusioncharts in your html file and used require() syntax instead then add the following code from START to END:
// START
var angular = require('angular');
var FusionCharts = require('fusioncharts');
require('angularjs-fusioncharts');
// Require TimeSeries module
var TimeSeries = require('fusioncharts/fusioncharts.timeseries');
// Initialize Charts with FusionCharts instance
TimeSeries(FusionCharts);
var app = angular.module('myApp', ['ng-fusioncharts']);
// END
var jsonify = res => res.json();
var dataFetch = fetch(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
).then(jsonify);
var schemaFetch = fetch(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
).then(jsonify);
var app = angular.module('myApp', ['ng-fusioncharts']);
app.controller('MyController', function($scope) {
$scope.dataSource = {
data: null,
caption: {
text: 'Sales Analysis'
},
subcaption: {
text: 'Grocery'
},
yAxis: [
{
plot: {
value: 'Grocery Sales Value',
type: 'line'
},
format: {
prefix: '$'
},
title: 'Sale Value'
}
]
};
Promise.all([dataFetch, schemaFetch]).then(res => {
const data = res[0];
const schema = res[1];
const fusionTable = new FusionCharts.DataStore().createDataTable(
data,
schema
);
$scope.$apply(function() {
$scope.dataSource.data = fusionTable;
});
});
});
Use a bundler like browserify to bundle the script
See the installation docs here
$ browserify script.js -o bundle.js
Again in your index.html
<html>
<head>
<!-- Include compiled bundle in script tag -->
<script type="text/javascript" src="./bundle.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<div
fusioncharts
width="600"
height="400"
type="timeseries"
datasource-dt="dataSource">
// When using TimeSeries pass your dataSource in "datasource-dt" attribute not in "datasource".
</div>
</div>
</body>
</html>
Important note :- If the chart's datasource has an instance of dataStore like in case of timeseries then you must use the new datasource-dt attribute for passing the data in html
Useful links for FusionTime
If you want to support your application on IE(11 and below), then you need to take following steps:
You have to update your angularjs-fusioncharts and fusioncharts modules to latest versions. For angularjs-fusioncharts install v5.0.1 and above; for fusioncharts install v3.13.3-sr.1 and above.
In your template, modify your code like so,
<div
fusioncharts
width="600"
height="400"
type="ANY_CHART_TYPE"
datasource-dt="dataSource"
>
// Instead of passing data in datasouce, use datasource-dt.
</div>
$ git clone https://github.com/fusioncharts/angularjs-fusioncharts.git
$ cd angularjs-fusioncharts
$ npm i
$ npm run dev
The FusionCharts React component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a separate license.
FAQs
Angular plugin for FusionCharts
We found that angularjs-fusioncharts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.