Table of Contents
$ node -vExecuting this command will tell you the node.js version installed. Next, run the node command, after which the prompt will change. When the prompt changes, execute the following command on the command line:
(function() { console.log('Node is working'); })()If the output after executing this command is ‘Node is working’, your installation has been successful.
$ mkdir fusioncharts-demo
$ cd fusioncharts-demo
$ npm init
$ npm install express --save
$ npm install --g bowerNow, to install AngularJS via Bower, execute the following command:
$ bower install angular
$ bower install fusionchartsClick here to read more on installation via Bower.
$ bower install fusioncharts-angularClick here to read more about the Angular-FusionCharts plugin. Also, click here to read more on installation via Bower.
var express, app; express = require('express'); app = express(); app.listen(3000, function() { console.log('Server up: localhost:3000'); }); app.use(express.static(__dirname + '/public')); app.use('/bower_components', express.static(__dirname + '/bower_components')); app.use('/webapp', express.static(__dirname + '/webapp')); app.get('/', function(req, res) { res.render('index'); });The server file is ready.
<!DOCTYPE html> <html> <head> <title>Angular FusionCharts Demos</title> <!-- angularjs plugin install --> <script type="text/javascript" src="bower_components/angular/angular.js"></script> <!-- fusioncharts js lib install --> <script type="text/javascript" src="bower_components/fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="bower_components/fusioncharts/themes/fusioncharts.theme.zune.js"></script> <!-- fusioncharts-angular plugin install --> <script type="text/javascript" src="bower_components/fusioncharts-angular/angular-fusioncharts.js"></script> <!-- a js file for angular operation --> <script type="text/javascript" src="webapp/app.js"></script> </head> <body> <!-- Define AngularJS Application using ng-app directive --> <div ng-app="myapp" ng-controller="myctrl"> <!-- In your HTML, find the section where you want to add the chart --> <fusioncharts width="450" height="230" type="bar2d" dataformat="json" datasource={ {data}}> </fusioncharts> </div> </body> </html>
var app = angular.module("myapp", ['ng-fusioncharts']); app.controller('myctrl', function($scope) { $scope.data = { chart: { caption: "Harry's SuperMart", subCaption: "Top 5 stores in last month by revenue", numberPrefix: "$", theme: "zune" }, data: [{ label: "Bakersfield Central", value: "880000" }, { label: "Garden Groove harbour", value: "730000" }, { label: "Los Angeles Topanga", value: "590000" }, { label: "Compton-Rancho Dom", value: "520000" }, { label: "Daly City Serramonte", value: "330000" } ] }; });Before we execute the final steps, let’s take a quick look at the directory structure created:
$ node server.jsThis will start the server.
$ npm install mongoose --save
var mongoose; mongoose = require('mongoose'); mongoose.connect('mongodb://localhost:27017/fusioncharts_demo'); mongoose.Promise = global.Promise; mongoose.connection.on("error", function() { console.log("[dbconnection.js] Mongodb : ERROR."); }); mongoose.connection.once("open", function() { console.log("[dbconnection.js]Mongodb : Connected."); }); module.exports = mongoose;
var db, world, city; db = require('../dbconnection'); city = { Name: String, Population: Number }; world = db.model("worlds", { Name: String, Population: Number, cities: [city] }); module.exports = world;
[{ "Name": "China", "Population": 1277558000, "cities": [{ "Name": "Shanghai", "Population": "9696300" }, { "Name": "Peking", "Population": "7472000" }, { "Name": "Chongqing", "Population": "6351600" }, { "Name": "Tianjin", "Population": "5286800" }, { "Name": "Wuhan", "Population": "4344600" }, { "Name": "Harbin", "Population": "4289800" }, { "Name": "Shenyang", "Population": "4265200" }, { "Name": "Kanton [Guangzhou]", "Population": "4256300" }, { "Name": "Chengdu", "Population": "3361500" }, { "Name": "Nanking [Nanjing]", "Population": "2870300" } ] }, { "Name": "India", "Population": 1013662000, "cities": [{ "Name": "Mumbai (Bombay)", "Population": "10500000" }, { "Name": "Delhi", "Population": "7206704" }, { "Name": "Calcutta [Kolkata]", "Population": "4399819" }, { "Name": "Chennai (Madras)", "Population": "3841396" }, { "Name": "Hyderabad", "Population": "2964638" }, { "Name": "Ahmedabad", "Population": "2876710" }, { "Name": "Bangalore", "Population": "2660088" }, { "Name": "Kanpur", "Population": "1874409" }, { "Name": "Nagpur", "Population": "1624752" }, { "Name": "Lucknow", "Population": "1619115" } ] }, { "Name": "United States", "Population": 278357000, "cities": [{ "Name": "New York", "Population": "8008278" }, { "Name": "Los Angeles", "Population": "3694820" }, { "Name": "Chicago", "Population": "2896016" }, { "Name": "Houston", "Population": "1953631" }, { "Name": "Philadelphia", "Population": "1517550" }, { "Name": "Phoenix", "Population": "1321045" }, { "Name": "San Diego", "Population": "1223400" }, { "Name": "Dallas", "Population": "1188580" }, { "Name": "San Antonio", "Population": "1144646" }, { "Name": "Detroit", "Population": "951270" } ] }, { "Name": "Indonesia", "Population": 212107000, "cities": [{ "Name": "Jakarta", "Population": "9604900" }, { "Name": "Surabaya", "Population": "2663820" }, { "Name": "Bandung", "Population": "2429000" }, { "Name": "Medan", "Population": "1843919" }, { "Name": "Palembang", "Population": "1222764" }, { "Name": "Tangerang", "Population": "1198300" }, { "Name": "Semarang", "Population": "1104405" }, { "Name": "Ujung Pandang", "Population": "1060257" }, { "Name": "Malang", "Population": "716862" }, { "Name": "Bandar Lampung", "Population": "680332" } ] }, { "Name": "Brazil", "Population": 170115000, "cities": [{ "Name": "Sao Paulo", "Population": "9968485" }, { "Name": "Rio de Janeiro", "Population": "5598953" }, { "Name": "Salvador", "Population": "2302832" }, { "Name": "Belo Horizonte", "Population": "2139125" }, { "Name": "Fortaleza", "Population": "2097757" }, { "Name": "Brasilia", "Population": "1969868" }, { "Name": "Curitiba", "Population": "1584232" }, { "Name": "Recife", "Population": "1378087" }, { "Name": "Porto Alegre", "Population": "1314032" }, { "Name": "Manaus", "Population": "1255049" } ] }, { "Name": "Pakistan", "Population": 156483000, "cities": [{ "Name": "Karachi", "Population": "9269265" }, { "Name": "Lahore", "Population": "5063499" }, { "Name": "Faisalabad", "Population": "1977246" }, { "Name": "Rawalpindi", "Population": "1406214" }, { "Name": "Multan", "Population": "1182441" }, { "Name": "Hyderabad", "Population": "1151274" }, { "Name": "Gujranwala", "Population": "1124749" }, { "Name": "Peshawar", "Population": "988005" }, { "Name": "Quetta", "Population": "560307" }, { "Name": "Islamabad", "Population": "524500" } ] }, { "Name": "Russian Federation", "Population": 146934000, "cities": [{ "Name": "Moscow", "Population": "8389200" }, { "Name": "St Petersburg", "Population": "4694000" }, { "Name": "Novosibirsk", "Population": "1398800" }, { "Name": "Nizni Novgorod", "Population": "1357000" }, { "Name": "Jekaterinburg", "Population": "1266300" }, { "Name": "Samara", "Population": "1156100" }, { "Name": "Omsk", "Population": "1148900" }, { "Name": "Kazan", "Population": "1101000" }, { "Name": "Ufa", "Population": "1091200" }, { "Name": "Tseljabinsk", "Population": "1083200" } ] }, { "Name": "Bangladesh", "Population": 129155000, "cities": [{ "Name": "Dhaka", "Population": "3612850" }, { "Name": "Chittagong", "Population": "1392860" }, { "Name": "Khulna", "Population": "663340" }, { "Name": "Rajshahi", "Population": "294056" }, { "Name": "Narayanganj", "Population": "202134" }, { "Name": "Rangpur", "Population": "191398" }, { "Name": "Mymensingh", "Population": "188713" }, { "Name": "Barisal", "Population": "170232" }, { "Name": "Tungi", "Population": "168702" }, { "Name": "Jessore", "Population": "139710" } ] }, { "Name": "Japan", "Population": 126714000, "cities": [{ "Name": "Tokyo", "Population": "7980230" }, { "Name": "Jokohama [Yokohama]", "Population": "3339594" }, { "Name": "Osaka", "Population": "2595674" }, { "Name": "Nagoya", "Population": "2154376" }, { "Name": "Sapporo", "Population": "1790886" }, { "Name": "Kioto", "Population": "1461974" }, { "Name": "Kobe", "Population": "1425139" }, { "Name": "Fukuoka", "Population": "1308379" }, { "Name": "Kawasaki", "Population": "1217359" }, { "Name": "Hiroshima", "Population": "1119117" } ] }, { "Name": "Nigeria", "Population": 111506000, "cities": [{ "Name": "Lagos", "Population": "1518000" }, { "Name": "Ibadan", "Population": "1432000" }, { "Name": "Ogbomosho", "Population": "730000" }, { "Name": "Kano", "Population": "674100" }, { "Name": "Oshogbo", "Population": "476800" }, { "Name": "Ilorin", "Population": "475800" }, { "Name": "Abeokuta", "Population": "427400" }, { "Name": "Port Harcourt", "Population": "410000" }, { "Name": "Zaria", "Population": "379200" }, { "Name": "Ilesha", "Population": "378400" } ] }]Our data model is now ready.
$ mongoimport -d fusioncharts_demo -c worlds --type json --file data.json --jsonArrayThis command takes the following information:
var express, app, world; express = require('express'); app = express(); world = require('./models/world'); app.listen(3000, function() { console.log('[server.js] Server up: localhost:3000'); }); app.use(express.static(__dirname + '/public')); app.use('/bower_components', express.static(__dirname + '/bower_components')); app.use('/webapp', express.static(__dirname + '/webapp')); app.get('/', function(req, res) { res.render('index'); }); app.get('/worlddata', function(req, res) { var promise; promise = world.find(); promise.then(function(result) { console.log("[server.js] world : Retrieved Successfully!"); res.status(200).json(result).end(); }) .catch(function(err) { console.log("[server.js] world : " + err); }); });
// In the app, include the ng-fusioncharts directive as a dependency var app = angular.module("myapp", ['ng-fusioncharts']); app.controller('myctrl', function($scope, $http) { var getdata; getData = function(url, callback) { $http({ method: 'GET', dataType: 'json', url: url, headers: { "Content-Type": "application/json" } }).success(callback); }; getData('/worlddata', function(response) { console.log(response); var datasource, doc, data = [], linkeddata = [], chart; chart = { caption: "Top 10 Most Populous Countries", showValues: 0, theme: "zune" }; for (var _i = 0; _i & lt; response.length; _i++) { doc = response[_i]; data.push({ label: doc.Name, value: doc.Population, link: 'newchart-json-' + _i.toString() }); linkeddata.push({ id: _i.toString(), linkedchart: { chart: { caption: 'Top 10 Most Populous Cities - '; + doc.Name, showValues: 0, theme: 'zune'; }, data: doc.cities.map(function(ele) { return { label: ele.Name, value: ele.Population }; }) } }); } datasource = { chart: chart, data: data, linkeddata: linkeddata }; $scope.data = datasource; }); });
<!DOCTYPE html> <html> <head> <title>Angular FusionCharts Demos</title> <!-- angularjs plugin install --> <script type="text/javascript" src="bower_components/angular/angular.js"></script> <!-- fusioncharts js lib install --> <script type="text/javascript" src="bower_components/fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="bower_components/fusioncharts/themes/fusioncharts.theme.zune.js"></script> <!-- fusioncharts-angular plugin install --> <script type="text/javascript" src="bower_components/fusioncharts-angular/angular-fusioncharts.js"></script> <!-- a js file for angular operation --> <script type="text/javascript" src="webapp/app.js"></script> </head> <body> <!-- Define AngularJS Application using ng-app directive --> <div ng-app="myapp" ng-controller="myctrl"> <!-- In your HTML, find the section where you want to add the chart --> <fusioncharts width="450" height="230" type="bar2d" id="chart-1" dataformat="json" datasource={ {data}}> </fusioncharts> </div> </body> </html>
$ node server.jsThis will start the server.
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
The code for app.js contains several bugs in getData() function according to me. the chart will not render due to these bugs and after some minor changes it worked well. Other thing occurred to me is that in $http(...).success(callback), the success() method is no longer included after angularjs 1.4.3 and it is replaced with then().
Hi Anjana Senanayake -
Can you please add what changes you had to make? I ran in to the same problem but not sure WHAT to change?
Thanks!
have u solved that issue
can u pls share how
thanks
Thank you for providing the valuable information regarding MEAN stack.MEAN stack Online Training
Really this is very nice blog posting, thanks for sharing your information with us.