
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
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
The npm package angularjs-fusioncharts receives a total of 252 weekly downloads. As such, angularjs-fusioncharts popularity was classified as not popular.
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
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.