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.
Ever had a data set that seemed more complicated than a Rubik's cube? You’re not…
We’ve all seen them in textbooks or presentations—those overlapping circles that simplify complex information into…
We’re excited to announce the upcoming release of FusionCharts v4.1—a groundbreaking step forward in the…
Have you ever been overwhelmed by a massive data set and wondered, "How do I…
If you’ve ever tried to make sense of the stock market, you’ve probably come across…
Imagine you’re comparing the sales performance of your top product lines across different regions, or…
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.