Step 1<\/strong><\/h4>\nCreate a JS file, server.js<\/strong>, and save it in the fusioncharts-demo<\/strong> directory.
\nThen copy the code given below and paste it into the server.js<\/strong> file:<\/p>\nvar express,\r\n app;\r\n\r\nexpress = require('express');\r\napp = express();\r\n\r\napp.listen(3000, function() {\r\n console.log('Server up: localhost:3000');\r\n});\r\n\r\napp.use(express.static(__dirname + '\/public'));\r\napp.use('\/bower_components', express.static(__dirname + '\/bower_components'));\r\napp.use('\/webapp', express.static(__dirname + '\/webapp'));\r\n\r\napp.get('\/', function(req, res) {\r\n res.render('index');\r\n});\r\n<\/pre>\nThe server file is ready.<\/p>\n
Step 2<\/strong><\/h4>\nCreate a folder, public<\/strong>, under the fusioncharts-demo<\/strong> directory.
\nAlso, create an HTML file, index.html<\/strong>, and save it in the fusioncharts-demo\/public<\/strong> directory.<\/p>\nAdd the code given below in the index.html<\/strong> file:<\/p>\n<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <title>Angular FusionCharts Demos<\/title>\r\n <!-- angularjs plugin install -->\r\n <script type=\"text\/javascript\" src=\"bower_components\/angular\/angular.js\"><\/script>\r\n <!-- fusioncharts js lib install -->\r\n <script type=\"text\/javascript\" src=\"bower_components\/fusioncharts\/fusioncharts.js\"><\/script>\r\n <script type=\"text\/javascript\" src=\"bower_components\/fusioncharts\/themes\/fusioncharts.theme.zune.js\"><\/script>\r\n <!-- fusioncharts-angular plugin install -->\r\n <script type=\"text\/javascript\" src=\"bower_components\/fusioncharts-angular\/angular-fusioncharts.js\"><\/script>\r\n <!-- a js file for angular operation -->\r\n <script type=\"text\/javascript\" src=\"webapp\/app.js\"><\/script>\r\n<\/head>\r\n\r\n<body>\r\n <!-- Define AngularJS Application using ng-app directive -->\r\n <div ng-app=\"myapp\" ng-controller=\"myctrl\">\r\n <!-- In your HTML, find the section where you want to add the chart -->\r\n <fusioncharts width=\"450\" \r\n \t\t\t height=\"230\" \r\n type=\"bar2d\" \r\n dataformat=\"json\" \r\n datasource={ {data}}>\r\n <\/fusioncharts>\r\n <\/div>\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/pre>\nStep 3<\/strong><\/h4>\nDefine the myctrl<\/strong> controller created in Step 2 using the ng-controller<\/strong> directive.
\nCreate a folder, webapp<\/strong>, under the fusioncharts-demo<\/strong> directory.
\nCreate a JS file, app.js<\/strong>, and save it in the fusioncharts-demo\/webapp<\/strong> directory.
\nCopy the code given below and paste it into the app.js<\/strong> file:<\/p>\nvar app = angular.module(\"myapp\", ['ng-fusioncharts']);\r\n\r\napp.controller('myctrl', function($scope) {\r\n $scope.data = {\r\n chart: {\r\n caption: \"Harry's SuperMart\",\r\n subCaption: \"Top 5 stores in last month by revenue\",\r\n numberPrefix: \"$\",\r\n theme: \"zune\"\r\n },\r\n data: [{\r\n label: \"Bakersfield Central\",\r\n value: \"880000\"\r\n },\r\n {\r\n label: \"Garden Groove harbour\",\r\n value: \"730000\"\r\n },\r\n {\r\n label: \"Los Angeles Topanga\",\r\n value: \"590000\"\r\n },\r\n {\r\n label: \"Compton-Rancho Dom\",\r\n value: \"520000\"\r\n },\r\n {\r\n label: \"Daly City Serramonte\",\r\n value: \"330000\"\r\n }\r\n ]\r\n };\r\n});\r\n\r\n<\/pre>\nBefore we execute the final steps, let’s take a quick look at the directory structure created:<\/p>\n
Step 4<\/strong><\/h4>\nRun the server.js<\/strong> file from the terminal, as shown below:<\/p>\n $ node server.js<\/pre>\nThis will start the server.<\/p>\n
Step 5<\/strong><\/h4>\nTo test the app created, open your browser, and type https:\/\/localhost:3000<\/strong> in the address bar.
\nYour chart should now render, as shown in the image below:<\/p>\n<\/span>Creating Charts Using FusionCharts and MEAN Stack Using a Database<\/span><\/h2>\nWe will now see how we can create charts using Express.js and MongoDB.<\/p>\n
The steps for creating charts using FusionCharts and the MEAN stack and by fetching data from a database are outlined below:<\/p>\n
\n- Install the Mongoose client and establish the connection to the MongoDB database<\/li>\n
- Create a data model<\/li>\n
- Populate data in the MongoDB database<\/li>\n
- Create REST API for data retrieval<\/li>\n
- Next, create a method to fetch data using the Angular Controller<\/li>\n
- Create a view for rendering the chart<\/li>\n<\/ol>\n
As an example, we\u2019ll be writing the code to render a chart that shows the 10 most populous countries of the world. The chart can be drilled down further to show the 10 most populous cities in each country.<\/p>\n
We will now cover each of the steps listed above in detail, with respect to the example.<\/p>\n
<\/span>Step 1: Installing the Mongoose Client and Establishing a Connection to the MongoDB Database<\/span><\/h3>\nStep 1.1<\/strong><\/h4>\nInstall the Mongoose client. Mongoose translates the data in your database to JavaScript objects that can be used in your application.
\nEverything in Mongoose starts with a schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.
\nTo install Mongoose, execute the following command at the terminal:<\/p>\n
$ npm install mongoose --save<\/pre>\nStep 1.2<\/strong><\/h4>\nCreate a JS file, dbconnection.js<\/strong>, and save it under the fusioncharts-demo<\/strong> directory.
\nThe code given below will establish connectivity with the MongoDB database.
\nCopy the code below and paste it into the dbconnection.js<\/strong> file.<\/p>\nvar mongoose;\r\n\r\nmongoose = require('mongoose');\r\nmongoose.connect('mongodb:\/\/localhost:27017\/fusioncharts_demo');\r\nmongoose.Promise = global.Promise;\r\n\r\nmongoose.connection.on(\"error\", function() {\r\n console.log(\"[dbconnection.js] Mongodb : ERROR.\");\r\n});\r\nmongoose.connection.once(\"open\", function() {\r\n console.log(\"[dbconnection.js]Mongodb : Connected.\");\r\n});\r\n\r\nmodule.exports = mongoose;\r\n<\/pre>\n<\/span>Step 2: Creating a Data Model<\/span><\/h3>\nModels are advanced constructors compiled from schema definitions. Instances of these models are documents that can be saved in and retrieved from the database.<\/p>\n
Step 2.1<\/strong><\/h4>\nCreate a folder, models<\/strong>, under the fusioncharts-demo<\/strong> directory.
\nThen, create a JS file, world.js<\/strong>, and save it in the fusioncharts-demo\/models<\/strong> directory.
\nAdd the code given below to the world.js<\/strong> file:<\/p>\nvar db,\r\n world,\r\n city;\r\n\r\ndb = require('..\/dbconnection');\r\n\r\ncity = {\r\n Name: String,\r\n Population: Number\r\n};\r\n\r\nworld = db.model(\"worlds\", {\r\n Name: String,\r\n Population: Number,\r\n cities: [city]\r\n});\r\n\r\nmodule.exports = world;\r\n<\/pre>\nStep 2.2<\/strong><\/h4>\nCreate a JSON file, data.json<\/strong>, and save it under the fusioncharts-demo<\/strong> directory.
\nThe data to be populated in the database is passed as an array of JSON objects, as shown in the code below.
\nAdd this code to the data.json<\/strong> file:<\/p>\n[{\r\n \"Name\": \"China\",\r\n \"Population\": 1277558000,\r\n \"cities\": [{\r\n \"Name\": \"Shanghai\",\r\n \"Population\": \"9696300\"\r\n },\r\n {\r\n \"Name\": \"Peking\",\r\n \"Population\": \"7472000\"\r\n },\r\n {\r\n \"Name\": \"Chongqing\",\r\n \"Population\": \"6351600\"\r\n },\r\n {\r\n \"Name\": \"Tianjin\",\r\n \"Population\": \"5286800\"\r\n },\r\n {\r\n \"Name\": \"Wuhan\",\r\n \"Population\": \"4344600\"\r\n },\r\n {\r\n \"Name\": \"Harbin\",\r\n \"Population\": \"4289800\"\r\n },\r\n {\r\n \"Name\": \"Shenyang\",\r\n \"Population\": \"4265200\"\r\n },\r\n {\r\n \"Name\": \"Kanton [Guangzhou]\",\r\n \"Population\": \"4256300\"\r\n },\r\n {\r\n \"Name\": \"Chengdu\",\r\n \"Population\": \"3361500\"\r\n },\r\n {\r\n \"Name\": \"Nanking [Nanjing]\",\r\n \"Population\": \"2870300\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"India\",\r\n \"Population\": 1013662000,\r\n \"cities\": [{\r\n \"Name\": \"Mumbai (Bombay)\",\r\n \"Population\": \"10500000\"\r\n },\r\n {\r\n \"Name\": \"Delhi\",\r\n \"Population\": \"7206704\"\r\n },\r\n {\r\n \"Name\": \"Calcutta [Kolkata]\",\r\n \"Population\": \"4399819\"\r\n },\r\n {\r\n \"Name\": \"Chennai (Madras)\",\r\n \"Population\": \"3841396\"\r\n },\r\n {\r\n \"Name\": \"Hyderabad\",\r\n \"Population\": \"2964638\"\r\n },\r\n {\r\n \"Name\": \"Ahmedabad\",\r\n \"Population\": \"2876710\"\r\n },\r\n {\r\n \"Name\": \"Bangalore\",\r\n \"Population\": \"2660088\"\r\n },\r\n {\r\n \"Name\": \"Kanpur\",\r\n \"Population\": \"1874409\"\r\n },\r\n {\r\n \"Name\": \"Nagpur\",\r\n \"Population\": \"1624752\"\r\n },\r\n {\r\n \"Name\": \"Lucknow\",\r\n \"Population\": \"1619115\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"United States\",\r\n \"Population\": 278357000,\r\n \"cities\": [{\r\n \"Name\": \"New York\",\r\n \"Population\": \"8008278\"\r\n },\r\n {\r\n \"Name\": \"Los Angeles\",\r\n \"Population\": \"3694820\"\r\n },\r\n {\r\n \"Name\": \"Chicago\",\r\n \"Population\": \"2896016\"\r\n },\r\n {\r\n \"Name\": \"Houston\",\r\n \"Population\": \"1953631\"\r\n },\r\n {\r\n \"Name\": \"Philadelphia\",\r\n \"Population\": \"1517550\"\r\n },\r\n {\r\n \"Name\": \"Phoenix\",\r\n \"Population\": \"1321045\"\r\n },\r\n {\r\n \"Name\": \"San Diego\",\r\n \"Population\": \"1223400\"\r\n },\r\n {\r\n \"Name\": \"Dallas\",\r\n \"Population\": \"1188580\"\r\n },\r\n {\r\n \"Name\": \"San Antonio\",\r\n \"Population\": \"1144646\"\r\n },\r\n {\r\n \"Name\": \"Detroit\",\r\n \"Population\": \"951270\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"Indonesia\",\r\n \"Population\": 212107000,\r\n \"cities\": [{\r\n \"Name\": \"Jakarta\",\r\n \"Population\": \"9604900\"\r\n },\r\n {\r\n \"Name\": \"Surabaya\",\r\n \"Population\": \"2663820\"\r\n },\r\n {\r\n \"Name\": \"Bandung\",\r\n \"Population\": \"2429000\"\r\n },\r\n {\r\n \"Name\": \"Medan\",\r\n \"Population\": \"1843919\"\r\n },\r\n {\r\n \"Name\": \"Palembang\",\r\n \"Population\": \"1222764\"\r\n },\r\n {\r\n \"Name\": \"Tangerang\",\r\n \"Population\": \"1198300\"\r\n },\r\n {\r\n \"Name\": \"Semarang\",\r\n \"Population\": \"1104405\"\r\n },\r\n {\r\n \"Name\": \"Ujung Pandang\",\r\n \"Population\": \"1060257\"\r\n },\r\n {\r\n \"Name\": \"Malang\",\r\n \"Population\": \"716862\"\r\n },\r\n {\r\n \"Name\": \"Bandar Lampung\",\r\n \"Population\": \"680332\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"Brazil\",\r\n \"Population\": 170115000,\r\n \"cities\": [{\r\n \"Name\": \"Sao Paulo\",\r\n \"Population\": \"9968485\"\r\n },\r\n {\r\n \"Name\": \"Rio de Janeiro\",\r\n \"Population\": \"5598953\"\r\n },\r\n {\r\n \"Name\": \"Salvador\",\r\n \"Population\": \"2302832\"\r\n },\r\n {\r\n \"Name\": \"Belo Horizonte\",\r\n \"Population\": \"2139125\"\r\n },\r\n {\r\n \"Name\": \"Fortaleza\",\r\n \"Population\": \"2097757\"\r\n },\r\n {\r\n \"Name\": \"Brasilia\",\r\n \"Population\": \"1969868\"\r\n },\r\n {\r\n \"Name\": \"Curitiba\",\r\n \"Population\": \"1584232\"\r\n },\r\n {\r\n \"Name\": \"Recife\",\r\n \"Population\": \"1378087\"\r\n },\r\n {\r\n \"Name\": \"Porto Alegre\",\r\n \"Population\": \"1314032\"\r\n },\r\n {\r\n \"Name\": \"Manaus\",\r\n \"Population\": \"1255049\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"Pakistan\",\r\n \"Population\": 156483000,\r\n \"cities\": [{\r\n \"Name\": \"Karachi\",\r\n \"Population\": \"9269265\"\r\n },\r\n {\r\n \"Name\": \"Lahore\",\r\n \"Population\": \"5063499\"\r\n },\r\n {\r\n \"Name\": \"Faisalabad\",\r\n \"Population\": \"1977246\"\r\n },\r\n {\r\n \"Name\": \"Rawalpindi\",\r\n \"Population\": \"1406214\"\r\n },\r\n {\r\n \"Name\": \"Multan\",\r\n \"Population\": \"1182441\"\r\n },\r\n {\r\n \"Name\": \"Hyderabad\",\r\n \"Population\": \"1151274\"\r\n },\r\n {\r\n \"Name\": \"Gujranwala\",\r\n \"Population\": \"1124749\"\r\n },\r\n {\r\n \"Name\": \"Peshawar\",\r\n \"Population\": \"988005\"\r\n },\r\n {\r\n \"Name\": \"Quetta\",\r\n \"Population\": \"560307\"\r\n },\r\n {\r\n \"Name\": \"Islamabad\",\r\n \"Population\": \"524500\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"Russian Federation\",\r\n \"Population\": 146934000,\r\n \"cities\": [{\r\n \"Name\": \"Moscow\",\r\n \"Population\": \"8389200\"\r\n },\r\n {\r\n \"Name\": \"St Petersburg\",\r\n \"Population\": \"4694000\"\r\n },\r\n {\r\n \"Name\": \"Novosibirsk\",\r\n \"Population\": \"1398800\"\r\n },\r\n {\r\n \"Name\": \"Nizni Novgorod\",\r\n \"Population\": \"1357000\"\r\n },\r\n {\r\n \"Name\": \"Jekaterinburg\",\r\n \"Population\": \"1266300\"\r\n },\r\n {\r\n \"Name\": \"Samara\",\r\n \"Population\": \"1156100\"\r\n },\r\n {\r\n \"Name\": \"Omsk\",\r\n \"Population\": \"1148900\"\r\n },\r\n {\r\n \"Name\": \"Kazan\",\r\n \"Population\": \"1101000\"\r\n },\r\n {\r\n \"Name\": \"Ufa\",\r\n \"Population\": \"1091200\"\r\n },\r\n {\r\n \"Name\": \"Tseljabinsk\",\r\n \"Population\": \"1083200\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"Bangladesh\",\r\n \"Population\": 129155000,\r\n \"cities\": [{\r\n \"Name\": \"Dhaka\",\r\n \"Population\": \"3612850\"\r\n },\r\n {\r\n \"Name\": \"Chittagong\",\r\n \"Population\": \"1392860\"\r\n },\r\n {\r\n \"Name\": \"Khulna\",\r\n \"Population\": \"663340\"\r\n },\r\n {\r\n \"Name\": \"Rajshahi\",\r\n \"Population\": \"294056\"\r\n },\r\n {\r\n \"Name\": \"Narayanganj\",\r\n \"Population\": \"202134\"\r\n },\r\n {\r\n \"Name\": \"Rangpur\",\r\n \"Population\": \"191398\"\r\n },\r\n {\r\n \"Name\": \"Mymensingh\",\r\n \"Population\": \"188713\"\r\n },\r\n {\r\n \"Name\": \"Barisal\",\r\n \"Population\": \"170232\"\r\n },\r\n {\r\n \"Name\": \"Tungi\",\r\n \"Population\": \"168702\"\r\n },\r\n {\r\n \"Name\": \"Jessore\",\r\n \"Population\": \"139710\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"Japan\",\r\n \"Population\": 126714000,\r\n \"cities\": [{\r\n \"Name\": \"Tokyo\",\r\n \"Population\": \"7980230\"\r\n },\r\n {\r\n \"Name\": \"Jokohama [Yokohama]\",\r\n \"Population\": \"3339594\"\r\n },\r\n {\r\n \"Name\": \"Osaka\",\r\n \"Population\": \"2595674\"\r\n },\r\n {\r\n \"Name\": \"Nagoya\",\r\n \"Population\": \"2154376\"\r\n },\r\n {\r\n \"Name\": \"Sapporo\",\r\n \"Population\": \"1790886\"\r\n },\r\n {\r\n \"Name\": \"Kioto\",\r\n \"Population\": \"1461974\"\r\n },\r\n {\r\n \"Name\": \"Kobe\",\r\n \"Population\": \"1425139\"\r\n },\r\n {\r\n \"Name\": \"Fukuoka\",\r\n \"Population\": \"1308379\"\r\n },\r\n {\r\n \"Name\": \"Kawasaki\",\r\n \"Population\": \"1217359\"\r\n },\r\n {\r\n \"Name\": \"Hiroshima\",\r\n \"Population\": \"1119117\"\r\n }\r\n ]\r\n}, {\r\n \"Name\": \"Nigeria\",\r\n \"Population\": 111506000,\r\n \"cities\": [{\r\n \"Name\": \"Lagos\",\r\n \"Population\": \"1518000\"\r\n },\r\n {\r\n \"Name\": \"Ibadan\",\r\n \"Population\": \"1432000\"\r\n },\r\n {\r\n \"Name\": \"Ogbomosho\",\r\n \"Population\": \"730000\"\r\n },\r\n {\r\n \"Name\": \"Kano\",\r\n \"Population\": \"674100\"\r\n },\r\n {\r\n \"Name\": \"Oshogbo\",\r\n \"Population\": \"476800\"\r\n },\r\n {\r\n \"Name\": \"Ilorin\",\r\n \"Population\": \"475800\"\r\n },\r\n {\r\n \"Name\": \"Abeokuta\",\r\n \"Population\": \"427400\"\r\n },\r\n {\r\n \"Name\": \"Port Harcourt\",\r\n \"Population\": \"410000\"\r\n },\r\n {\r\n \"Name\": \"Zaria\",\r\n \"Population\": \"379200\"\r\n },\r\n {\r\n \"Name\": \"Ilesha\",\r\n \"Population\": \"378400\"\r\n }\r\n ]\r\n}]\r\n<\/pre>\nOur data model is now ready.<\/p>\n
<\/span>Step 3: Populating Data in the MongoDB Database<\/span><\/h3>\nWe\u2019ll use the mongoimport<\/strong> command, as shown below, to create a MongoDB database and populate in it the data contained within the data.json<\/strong>.<\/p>\n$ mongoimport -d fusioncharts_demo -c worlds --type json --file data.json --jsonArray\r\n<\/pre>\nThis command takes the following information:<\/p>\n
\n- Name of the database ( -d fusioncharts_demo <\/strong>)<\/li>\n
- Name of the collection ( -c worlds <\/strong>)<\/li>\n
- Type of the input data ( –type json <\/strong>)<\/li>\n
- Location of the file containing data ( –file data.json <\/strong>)<\/li>\n
- Option to indicate that the input is a JSON array ( –jsonArray<\/strong>)<\/li>\n<\/ol>\n
<\/span>Step 4: Creating the REST API for Data Retrieval<\/span><\/h3>\nLet us expose the REST API at the URL \/worlddata<\/strong>.<\/p>\nThis will fetch the data from the database and send a response object to the client, invoking the API.<\/p>\n
Add the code given below to the server.js<\/strong> file (fusioncharts-demo\/server.js<\/strong>):<\/p>\nvar express,\r\n app,\r\n world;\r\n\r\nexpress = require('express');\r\napp = express();\r\nworld = require('.\/models\/world');\r\n\r\napp.listen(3000, function() {\r\n console.log('[server.js] Server up: localhost:3000');\r\n});\r\n\r\napp.use(express.static(__dirname + '\/public'));\r\napp.use('\/bower_components', express.static(__dirname + '\/bower_components'));\r\napp.use('\/webapp', express.static(__dirname + '\/webapp'));\r\n\r\n\r\napp.get('\/', function(req, res) {\r\n res.render('index');\r\n});\r\n\r\napp.get('\/worlddata', function(req, res) {\r\n var promise;\r\n\r\n promise = world.find();\r\n promise.then(function(result) {\r\n console.log(\"[server.js] world : Retrieved Successfully!\");\r\n res.status(200).json(result).end();\r\n })\r\n .catch(function(err) {\r\n console.log(\"[server.js] world : \" + err);\r\n });\r\n});\r\n<\/pre>\n<\/span>Step 5: Creating a Method to Fetch the Data from the Database Using the Angular Controller<\/span><\/h3>\nUsing the REST API (i.e. \/worlddata<\/strong>), we\u2019ve got the raw data.
\nNext, we need to create the fusioncharts<\/strong> data source inside the angular controller myctrl<\/strong>.
\nAdd the code given below to the app.js<\/strong> file (fusioncharts-demo\/webapp\/app.js<\/strong>):<\/p>\n\/\/ In the app, include the ng-fusioncharts directive as a dependency\r\nvar app = angular.module(\"myapp\", ['ng-fusioncharts']);\r\n\r\napp.controller('myctrl', function($scope, $http) {\r\n var getdata;\r\n\r\n getData = function(url, callback) {\r\n $http({\r\n method: 'GET',\r\n dataType: 'json',\r\n url: url,\r\n headers: {\r\n \"Content-Type\": \"application\/json\"\r\n }\r\n }).success(callback);\r\n };\r\n\r\n getData('\/worlddata', function(response) {\r\n console.log(response);\r\n var datasource,\r\n doc,\r\n data = [],\r\n linkeddata = [],\r\n chart;\r\n\r\n chart = {\r\n caption: \"Top 10 Most Populous Countries\",\r\n showValues: 0,\r\n theme: \"zune\"\r\n };\r\n\r\n for (var _i = 0; _i & lt; response.length; _i++) {\r\n doc = response[_i];\r\n data.push({\r\n label: doc.Name,\r\n value: doc.Population,\r\n link: 'newchart-json-' + _i.toString()\r\n });\r\n\r\n linkeddata.push({\r\n id: _i.toString(),\r\n linkedchart: {\r\n chart: {\r\n caption: 'Top 10 Most Populous Cities - '; + doc.Name,\r\n showValues: 0,\r\n theme: 'zune';\r\n },\r\n data: doc.cities.map(function(ele) {\r\n return {\r\n label: ele.Name,\r\n value: ele.Population\r\n };\r\n })\r\n }\r\n });\r\n }\r\n\r\n datasource = {\r\n chart: chart,\r\n data: data,\r\n linkeddata: linkeddata\r\n };\r\n\r\n $scope.data = datasource;\r\n });\r\n});\r\n<\/pre>\n<\/span>Step 6: Rendering the Chart<\/span><\/h3>\nBefore we look at the template (\/fusioncharts-demo\/public\/index.html<\/strong>), let us look at the directory structure we have created so far:<\/p>\nStep 6.1<\/strong><\/h4>\nNow that the backend is ready, we need to create views for rendering the chart.
\nAdd the code given below to the index.html<\/strong> file (fusioncharts-demo\/public<\/strong>):<\/p>\n<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <title>Angular FusionCharts Demos<\/title>\r\n <!-- angularjs plugin install -->\r\n <script type=\"text\/javascript\" src=\"bower_components\/angular\/angular.js\"><\/script>\r\n <!-- fusioncharts js lib install -->\r\n <script type=\"text\/javascript\" src=\"bower_components\/fusioncharts\/fusioncharts.js\"><\/script>\r\n <script type=\"text\/javascript\" src=\"bower_components\/fusioncharts\/themes\/fusioncharts.theme.zune.js\"><\/script>\r\n <!-- fusioncharts-angular plugin install -->\r\n <script type=\"text\/javascript\" src=\"bower_components\/fusioncharts-angular\/angular-fusioncharts.js\"><\/script>\r\n <!-- a js file for angular operation -->\r\n <script type=\"text\/javascript\" src=\"webapp\/app.js\"><\/script>\r\n<\/head>\r\n\r\n<body>\r\n <!-- Define AngularJS Application using ng-app directive -->\r\n <div ng-app=\"myapp\" ng-controller=\"myctrl\">\r\n <!-- In your HTML, find the section where you want to add the chart -->\r\n <fusioncharts width=\"450\" \r\n height=\"230\" \r\n type=\"bar2d\" \r\n id=\"chart-1\" \r\n dataformat=\"json\" \r\n datasource={ {data}}>\r\n <\/fusioncharts>\r\n <\/div>\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/pre>\nStep 6.2<\/strong><\/h4>\nRun the server.js<\/strong> file from the terminal, as shown below:<\/p>\n $ node server.js<\/pre>\nThis will start the server.<\/p>\n
Step 6.3<\/strong><\/h4>\nTo test the app created, open your browser, and type https:\/\/localhost:3000<\/strong> in the address bar.
\nYour chart should now render, as shown in the image below:<\/p>\n![\"final-output-2(fetching-data-from-the-database)\"](\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg\")
<\/p>\n","protected":false},"excerpt":{"rendered":"
FusionCharts Suite XT comes with a plethora of charts, gauges, and maps that can be used to plot both static and real-time data. Not only that but the suite can be extended to work with various JavaScript libraries to create web and mobile applications. In this article, we’ll discuss how FusionCharts can be used in […]<\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[632,152,629,628,630],"coauthors":[652,651],"class_list":["post-15716","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-creating-charts-with-mean-stack","tag-fusioncharts","tag-fusioncharts-with-mean-stack","tag-mean-stack","tag-mean-stack-with-database"],"yoast_head":"\n
Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026<\/title>\n<meta name=\"description\" content=\"Plot static and real-time data with FusionCharts Suite XT. Explore a plethora of charts, gauges, and 2026 maps for your projects. Start visualizing today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026\" \/>\n<meta property=\"og:description\" content=\"Plot static and real-time data with FusionCharts Suite XT. Explore a plethora of charts, gauges, and 2026 maps for your projects. Start visualizing today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-08T12:20:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/02\/final-output-2fetching-data-from-the-database.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"620\" \/>\n\t<meta property=\"og:image:height\" content=\"366\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nikita Jhanglani, Suvradip Saha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nikita Jhanglani, Suvradip Saha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Nikita Jhanglani\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/270a83f8aefb80dafb2a931de0282717\"\n\t },\n\t \"headline\": \"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026\",\n\t \"datePublished\": \"2017-02-08T12:20:56+00:00\",\n\t \"dateModified\": \"2026-01-20T09:11:39+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/\"\n\t },\n\t \"wordCount\": 1453,\n\t \"commentCount\": 5,\n\t \"publisher\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t },\n\t \"image\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#primaryimage\"\n\t },\n\t \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg\",\n\t \"keywords\": [\n\t \"Creating Charts with MEAN Stack\",\n\t \"FusionCharts\",\n\t \"FusionCharts with MEAN Stack\",\n\t \"MEAN Stack\",\n\t \"Mean Stack with Database\"\n\t ],\n\t \"articleSection\": [\n\t \"Tutorials\"\n\t ],\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"CommentAction\",\n\t \"name\": \"Comment\",\n\t \"target\": [\n\t \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#respond\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/\",\n\t \"url\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/\",\n\t \"name\": \"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t },\n\t \"primaryImageOfPage\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#primaryimage\"\n\t },\n\t \"image\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#primaryimage\"\n\t },\n\t \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg\",\n\t \"datePublished\": \"2017-02-08T12:20:56+00:00\",\n\t \"dateModified\": \"2026-01-20T09:11:39+00:00\",\n\t \"description\": \"Plot static and real-time data with FusionCharts Suite XT. Explore a plethora of charts, gauges, and 2026 maps for your projects. Start visualizing today.\",\n\t \"breadcrumb\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#primaryimage\",\n\t \"url\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg\",\n\t \"contentUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg\"\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t \"publisher\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t },\n\t \"query-input\": {\n\t \"@type\": \"PropertyValueSpecification\",\n\t \"valueRequired\": true,\n\t \"valueName\": \"search_term_string\"\n\t }\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t \"name\": \"FusionCharts\",\n\t \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t \"width\": 1,\n\t \"height\": 1,\n\t \"caption\": \"FusionCharts\"\n\t },\n\t \"image\": {\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t }\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/270a83f8aefb80dafb2a931de0282717\",\n\t \"name\": \"Nikita Jhanglani\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/8ccbb6c1287de762e6e06a7da1088fe5\",\n\t \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/6ea\/6ea57614eecc7c184539f84654fd9592x96.jpg\",\n\t \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/6ea\/6ea57614eecc7c184539f84654fd9592x96.jpg\",\n\t \"caption\": \"Nikita Jhanglani\"\n\t },\n\t \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/nikita-jhanglani\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026","description":"Plot static and real-time data with FusionCharts Suite XT. Explore a plethora of charts, gauges, and 2026 maps for your projects. Start visualizing today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/","og_locale":"en_US","og_type":"article","og_title":"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026","og_description":"Plot static and real-time data with FusionCharts Suite XT. Explore a plethora of charts, gauges, and 2026 maps for your projects. Start visualizing today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-02-08T12:20:56+00:00","article_modified_time":"2026-01-20T09:11:39+00:00","og_image":[{"width":620,"height":366,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/02\/final-output-2fetching-data-from-the-database.jpg","type":"image\/jpeg"}],"author":"Nikita Jhanglani, Suvradip Saha","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nikita Jhanglani, Suvradip Saha","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/"},"author":{"name":"Nikita Jhanglani","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/270a83f8aefb80dafb2a931de0282717"},"headline":"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026","datePublished":"2017-02-08T12:20:56+00:00","dateModified":"2026-01-20T09:11:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/"},"wordCount":1453,"commentCount":5,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg","keywords":["Creating Charts with MEAN Stack","FusionCharts","FusionCharts with MEAN Stack","MEAN Stack","Mean Stack with Database"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/","url":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/","name":"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg","datePublished":"2017-02-08T12:20:56+00:00","dateModified":"2026-01-20T09:11:39+00:00","description":"Plot static and real-time data with FusionCharts Suite XT. Explore a plethora of charts, gauges, and 2026 maps for your projects. Start visualizing today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#primaryimage","url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg","contentUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/270a83f8aefb80dafb2a931de0282717","name":"Nikita Jhanglani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/8ccbb6c1287de762e6e06a7da1088fe5","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/6ea\/6ea57614eecc7c184539f84654fd9592x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/6ea\/6ea57614eecc7c184539f84654fd9592x96.jpg","caption":"Nikita Jhanglani"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/nikita-jhanglani\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=15716"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15716\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=15716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=15716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=15716"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=15716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}