{"id":15716,"date":"2017-02-08T17:50:56","date_gmt":"2017-02-08T12:20:56","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=15716"},"modified":"2026-01-20T14:41:39","modified_gmt":"2026-01-20T09:11:39","slug":"creating-charts-using-fusioncharts-suite-xt-mean-stack","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/","title":{"rendered":"Creating Charts Using FusionCharts Suite XT with the MEAN Stack 2026"},"content":{"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.\r\n\r\nIn this article, we&#8217;ll discuss how FusionCharts can be used in conjunction with the MEAN stack\u2014a collection of JavaScript-based technologies\u2014to render various charts from the FusionCharts library. Let&#8217;s look at how you can create <a href=\"https:\/\/www.fusioncharts.com\/angular2-js-charts\">Data Charts<\/a> without using chart data directly instead of using data from a database.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Creating_Charts_Using_FusionCharts_Suite_XT_with_the_MEAN_Stack\" title=\"Creating Charts Using FusionCharts Suite XT with the MEAN Stack\">Creating Charts Using FusionCharts Suite XT with the MEAN Stack<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#The_MEAN_Stack\" title=\"The MEAN Stack\">The MEAN Stack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Installing_the_MEAN_Stack_and_Setting_Up_Your_Project\" title=\"Installing the MEAN Stack and Setting Up Your Project\">Installing the MEAN Stack and Setting Up Your Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#How_to_Install_FusionCharts\" title=\"How to Install FusionCharts\">How to Install FusionCharts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Creating_a_Simple_Chart_Using_FusionCharts_with_the_MEAN_Stack\" title=\"Creating a Simple Chart Using FusionCharts with the MEAN Stack\">Creating a Simple Chart Using FusionCharts with the MEAN Stack<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Creating_Charts_Using_FusionCharts_and_MEAN_Stack_Using_a_Database\" title=\"Creating Charts Using FusionCharts and MEAN Stack Using a Database\">Creating Charts Using FusionCharts and MEAN Stack Using a Database<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Step_1_Installing_the_Mongoose_Client_and_Establishing_a_Connection_to_the_MongoDB_Database\" title=\"Step 1: Installing the Mongoose Client and Establishing a Connection to the MongoDB Database\">Step 1: Installing the Mongoose Client and Establishing a Connection to the MongoDB Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Step_2_Creating_a_Data_Model\" title=\"Step 2: Creating a Data Model\">Step 2: Creating a Data Model<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Step_3_Populating_Data_in_the_MongoDB_Database\" title=\"Step 3: Populating Data in the MongoDB Database\">Step 3: Populating Data in the MongoDB Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Step_4_Creating_the_REST_API_for_Data_Retrieval\" title=\"Step 4: Creating the REST API for Data Retrieval\">Step 4: Creating the REST API for Data Retrieval<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Step_5_Creating_a_Method_to_Fetch_the_Data_from_the_Database_Using_the_Angular_Controller\" title=\"Step 5: Creating a Method to Fetch the Data from the Database Using the Angular Controller\">Step 5: Creating a Method to Fetch the Data from the Database Using the Angular Controller<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-suite-xt-mean-stack\/#Step_6_Rendering_the_Chart\" title=\"Step 6: Rendering the Chart\">Step 6: Rendering the Chart<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Creating_Charts_Using_FusionCharts_Suite_XT_with_the_MEAN_Stack\"><\/span>Creating Charts Using FusionCharts Suite XT with the MEAN Stack<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"The_MEAN_Stack\"><\/span>The MEAN Stack<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nMEAN is an acronym for MongoDB, ExpressJS, AngularJS, and Node.js. The MEAN stack, like said earlier, is a full-stack of JavaScript-based technologies that are used to develop web applications. Also, it is a complete development toolkit that can be used for the client-side as well as the server-side execution environments.\r\n\r\nNow we will consider how you can start with installing and setting up the MEAN stack and using it with FusionCharts to create charts.\r\n<h3><span class=\"ez-toc-section\" id=\"Installing_the_MEAN_Stack_and_Setting_Up_Your_Project\"><\/span>Installing the MEAN Stack and Setting Up Your Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nIn order to build an application, the four components of the MEAN stack have to be first installed individually.\r\n<h4><strong>Installing Node.js<\/strong><\/h4>\r\nDownload the relevant Node.js installer for your operating system from <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">here <\/a>and follow the instructions to install it on your system. For Windows, the installer will update the <strong>path variable to include the location for the node executable.<\/strong>\r\n\r\nTo verify installation, open a terminal and execute the command shown below:\r\n<pre class=\"lang:powershell\">$ node -v<\/pre>\r\nExecuting this command will tell you the node.js version installed.\r\n\r\nNext, run the <strong>node <\/strong>command, after which the prompt will change. When the prompt changes, execute the following command on the command line:\r\n<pre class=\"lang:javascript\">(function() {\r\n    console.log('Node is working');\r\n})()\r\n<\/pre>\r\nIf the output after executing this command is &#8216;Node is working&#8217;, your installation has been successful.\r\n<h4><strong>Installing MongoDB<\/strong><\/h4>\r\nMongoDB is an open-source document-based database that provides high performance, high availability, and can be scaled automatically. MongoDB distributions can be downloaded from <a href=\"https:\/\/docs.mongodb.com\/manual\/introduction\/\" target=\"_blank\" rel=\"noopener noreferrer\">here <\/a>and installed in your system.\r\n<h4><strong>Installing Express.js <\/strong><\/h4>\r\nExpress.js is a web application framework for Node.js that comes with a robust set of features for developing mobile and web applications. <strong>After you\u2019ve installed Node.js<\/strong>, create a working directory to save your application. The steps are outlined below:\r\n<ol>\r\n \t<li>Create a new directory, named <strong>fusioncharts-demo<\/strong>.\r\n<pre class=\"lang:powershell\"> $ mkdir fusioncharts-demo<\/pre>\r\n<\/li>\r\n \t<li>Change the working directory to <strong>fusioncharts-demo<\/strong>.\r\n<pre class=\"lang:powershell\"> $ cd fusioncharts-demo<\/pre>\r\n<\/li>\r\n \t<li>Create the <strong>package.json<\/strong> file for your application.\r\n<pre class=\"lang:powershell\"> $ npm init<\/pre>\r\n<\/li>\r\n \t<li>Install <strong>Express.js<\/strong> for your application. Install it in the <strong>fusioncharts-demo<\/strong> directory and save it in the dependencies list.\r\n<pre class=\"lang:powershell\"> $ npm install express --save<\/pre>\r\n<\/li>\r\n<\/ol>\r\n<h4><strong>Installing AngularJS<\/strong><\/h4>\r\nYou can install AngularJS via <a href=\"https:\/\/bower.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bower<\/a> (a package management software).\r\nIf you don\u2019t have Bower installed in your system, execute the following command to install it:\r\n<pre class=\"lang:powershell\"> $ npm install --g bower<\/pre>\r\nNow, to install AngularJS via Bower, execute the following command:\r\n<pre class=\"lang:powershell\"> $ bower install angular<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"How_to_Install_FusionCharts\"><\/span>How to Install FusionCharts<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nTo integrate FusionCharts for your project, after the MEAN stack has been installed, you need to install the FusionCharts Suite XT and the Angular-FusionCharts plugin.\r\n\r\nWe\u2019ll be installing these using the Bower package management software.\r\n<h4><strong>Installing the FusionCharts Package<\/strong><\/h4>\r\nTo install the FusionCharts package using Bower, execute the following command:\r\n<pre class=\"lang:powershell\"> $ bower install fusioncharts<\/pre>\r\nClick <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/plain-javascript\/your-first-chart-using-plain-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to read more on installation via Bower.\r\n<h4><strong>Installing the Angular-FusionCharts Plugin<\/strong><\/h4>\r\nTo install the Angular-FusionCharts plugin using Bower, execute the following command:\r\n<pre class=\"lang:powershell\"> $ bower install fusioncharts-angular<\/pre>\r\nClick <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/angular\/angularjs\/your-first-chart-using-angularjs\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to read more about the Angular-FusionCharts plugin.\r\nAlso, click <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/plain-javascript\/your-first-chart-using-plain-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to read more on installation via Bower.\r\n<h3><span class=\"ez-toc-section\" id=\"Creating_a_Simple_Chart_Using_FusionCharts_with_the_MEAN_Stack\"><\/span>Creating a Simple Chart Using FusionCharts with the MEAN Stack<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nNow that the MEAN stack and FusionCharts package have been installed, it\u2019s time we tried out rendering a simple chart using the combination.\r\n\r\nRendering a chart using FusionCharts and the MEAN stack is a 4 step process, as outlined below:\r\n<h4><strong>Step 1<\/strong><\/h4>\r\nCreate a JS file, <strong>server.js<\/strong>, and save it in the <strong>fusioncharts-demo<\/strong> directory.\r\nThen copy the code given below and paste it into the <strong>server.js<\/strong> file:\r\n<pre class=\"lang:javascript\">var 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>\r\nThe server file is ready.\r\n<h4><strong>Step 2<\/strong><\/h4>\r\nCreate a folder, <strong>public<\/strong>, under the <strong>fusioncharts-demo<\/strong> directory.\r\nAlso, create an HTML file, <strong>index.html<\/strong>, and save it in the <strong>fusioncharts-demo\/public<\/strong> directory.\r\n\r\nAdd the code given below in the <strong>index.html<\/strong> file:\r\n<pre class=\"lang:markup\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n    &lt;title&gt;Angular FusionCharts Demos&lt;\/title&gt;\r\n    &lt;!-- angularjs plugin install --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"bower_components\/angular\/angular.js\"&gt;&lt;\/script&gt;\r\n    &lt;!-- fusioncharts js lib install --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"bower_components\/fusioncharts\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"bower_components\/fusioncharts\/themes\/fusioncharts.theme.zune.js\"&gt;&lt;\/script&gt;\r\n    &lt;!-- fusioncharts-angular plugin install --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"bower_components\/fusioncharts-angular\/angular-fusioncharts.js\"&gt;&lt;\/script&gt;\r\n    &lt;!-- a js file for angular operation --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"webapp\/app.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n    &lt;!-- Define AngularJS Application using ng-app directive --&gt;\r\n    &lt;div ng-app=\"myapp\" ng-controller=\"myctrl\"&gt;\r\n        &lt;!-- In your HTML, find the section where you want to add the chart --&gt;\r\n        &lt;fusioncharts width=\"450\" \r\n        \t\t\t  height=\"230\" \r\n                      type=\"bar2d\" \r\n                      dataformat=\"json\" \r\n                      datasource={ {data}}&gt;\r\n        &lt;\/fusioncharts&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\r\n<h4><strong>Step 3<\/strong><\/h4>\r\nDefine the <strong>myctrl<\/strong> controller created in Step 2 using the <strong>ng-controller<\/strong> directive.\r\nCreate a folder, <strong>webapp<\/strong>, under the <strong>fusioncharts-demo<\/strong> directory.\r\nCreate a JS file, <strong>app.js<\/strong>, and save it in the <strong>fusioncharts-demo\/webapp<\/strong> directory.\r\nCopy the code given below and paste it into the <strong>app.js<\/strong> file:\r\n<pre class=\"lang:javascript\">var 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>\r\nBefore we execute the final steps, let&#8217;s take a quick look at the directory structure created:\r\n\r\n\r\n<h4><strong>Step 4<\/strong><\/h4>\r\nRun the <strong>server.js<\/strong> file from the terminal, as shown below:\r\n<pre class=\"lang:powershell\"> $ node server.js<\/pre>\r\nThis will start the server.\r\n<h4><strong>Step 5<\/strong><\/h4>\r\nTo test the app created, open your browser, and type <strong>https:\/\/localhost:3000<\/strong> in the address bar.\r\nYour chart should now render, as shown in the image below:\r\n\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_Charts_Using_FusionCharts_and_MEAN_Stack_Using_a_Database\"><\/span>Creating Charts Using FusionCharts and MEAN Stack Using a Database<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWe will now see how we can create charts using Express.js and MongoDB.\r\n\r\nThe steps for creating charts using FusionCharts and the MEAN stack and by fetching data from a database are outlined below:\r\n<ol>\r\n \t<li>Install the Mongoose client and establish the connection to the MongoDB database<\/li>\r\n \t<li>Create a data model<\/li>\r\n \t<li>Populate data in the MongoDB database<\/li>\r\n \t<li>Create REST API for data retrieval<\/li>\r\n \t<li>Next, create a method to fetch data using the Angular Controller<\/li>\r\n \t<li>Create a view for rendering the chart<\/li>\r\n<\/ol>\r\nAs 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.\r\n\r\nWe will now cover each of the steps listed above in detail, with respect to the example.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Installing_the_Mongoose_Client_and_Establishing_a_Connection_to_the_MongoDB_Database\"><\/span>Step 1: Installing the Mongoose Client and Establishing a Connection to the MongoDB Database<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<h4><strong>Step 1.1<\/strong><\/h4>\r\nInstall the Mongoose client. Mongoose translates the data in your database to JavaScript objects that can be used in your application.\r\nEverything in Mongoose starts with a schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.\r\nTo install Mongoose, execute the following command at the terminal:\r\n<pre class=\"lang:powershell\"> $ npm install mongoose --save<\/pre>\r\n<h4><strong>Step 1.2<\/strong><\/h4>\r\nCreate a JS file, <strong>dbconnection.js<\/strong>, and save it under the <strong>fusioncharts-demo<\/strong> directory.\r\nThe code given below will establish connectivity with the MongoDB database.\r\nCopy the code below and paste it into the <strong>dbconnection.js<\/strong> file.\r\n<pre class=\"lang:javascript\">var 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>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Creating_a_Data_Model\"><\/span>Step 2: Creating a Data Model<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nModels are advanced constructors compiled from schema definitions. Instances of these models are documents that can be saved in and retrieved from the database.\r\n<h4><strong>Step 2.1<\/strong><\/h4>\r\nCreate a folder, <strong>models<\/strong>, under the <strong>fusioncharts-demo<\/strong> directory.\r\nThen, create a JS file, <strong>world.js<\/strong>, and save it in the <strong>fusioncharts-demo\/models<\/strong> directory.\r\nAdd the code given below to the <strong>world.js<\/strong> file:\r\n<pre class=\"lang:javascript\">var 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>\r\n<h4><strong>Step 2.2<\/strong><\/h4>\r\nCreate a JSON file, <strong>data.json<\/strong>, and save it under the <strong>fusioncharts-demo<\/strong> directory.\r\nThe data to be populated in the database is passed as an array of JSON objects, as shown in the code below.\r\nAdd this code to the <strong>data.json<\/strong> file:\r\n<pre class=\"lang:javascript\">[{\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>\r\nOur data model is now ready.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Populating_Data_in_the_MongoDB_Database\"><\/span>Step 3: Populating Data in the MongoDB Database<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nWe\u2019ll use the <strong>mongoimport<\/strong> command, as shown below, to create a MongoDB database and populate in it the data contained within the <strong>data.json<\/strong>.\r\n<pre class=\"lang:powershell\">$ mongoimport -d fusioncharts_demo -c worlds --type json --file data.json --jsonArray\r\n<\/pre>\r\nThis command takes the following information:\r\n<ol>\r\n \t<li>Name of the database (<strong> -d fusioncharts_demo <\/strong>)<\/li>\r\n \t<li>Name of the collection (<strong> -c worlds <\/strong>)<\/li>\r\n \t<li>Type of the input data (<strong> &#8211;type json <\/strong>)<\/li>\r\n \t<li>Location of the file containing data (<strong> &#8211;file data.json <\/strong>)<\/li>\r\n \t<li>Option to indicate that the input is a JSON array (<strong> &#8211;jsonArray<\/strong>)<\/li>\r\n<\/ol>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Creating_the_REST_API_for_Data_Retrieval\"><\/span>Step 4: Creating the REST API for Data Retrieval<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nLet us expose the REST API at the URL <strong>\/worlddata<\/strong>.\r\n\r\nThis will fetch the data from the database and send a response object to the client, invoking the API.\r\n\r\nAdd the code given below to the <strong>server.js<\/strong> file (<strong>fusioncharts-demo\/server.js<\/strong>):\r\n<pre class=\"lang:javascript\">var 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>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Creating_a_Method_to_Fetch_the_Data_from_the_Database_Using_the_Angular_Controller\"><\/span>Step 5: Creating a Method to Fetch the Data from the Database Using the Angular Controller<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nUsing the REST API (i.e. <strong>\/worlddata<\/strong>), we\u2019ve got the raw data.\r\nNext, we need to create the <strong>fusioncharts<\/strong> data source inside the angular controller <strong>myctrl<\/strong>.\r\nAdd the code given below to the <strong>app.js<\/strong> file (<strong>fusioncharts-demo\/webapp\/app.js<\/strong>):\r\n<pre class=\"lang:javascript\">\/\/ 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 &amp; 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>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_6_Rendering_the_Chart\"><\/span>Step 6: Rendering the Chart<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nBefore we look at the template (<strong>\/fusioncharts-demo\/public\/index.html<\/strong>), let us look at the directory structure we have created so far:\r\n\r\n\r\n<h4><strong>Step 6.1<\/strong><\/h4>\r\nNow that the backend is ready, we need to create views for rendering the chart.\r\nAdd the code given below to the <strong>index.html<\/strong> file (<strong>fusioncharts-demo\/public<\/strong>):\r\n<pre class=\"lang:markup\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n    &lt;title&gt;Angular FusionCharts Demos&lt;\/title&gt;\r\n    &lt;!-- angularjs plugin install --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"bower_components\/angular\/angular.js\"&gt;&lt;\/script&gt;\r\n    &lt;!-- fusioncharts js lib install --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"bower_components\/fusioncharts\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"bower_components\/fusioncharts\/themes\/fusioncharts.theme.zune.js\"&gt;&lt;\/script&gt;\r\n    &lt;!-- fusioncharts-angular plugin install --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"bower_components\/fusioncharts-angular\/angular-fusioncharts.js\"&gt;&lt;\/script&gt;\r\n    &lt;!-- a js file for angular operation --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"webapp\/app.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n    &lt;!-- Define AngularJS Application using ng-app directive --&gt;\r\n    &lt;div ng-app=\"myapp\" ng-controller=\"myctrl\"&gt;\r\n        &lt;!-- In your HTML, find the section where you want to add the chart --&gt;\r\n        &lt;fusioncharts width=\"450\" \r\n                      height=\"230\" \r\n                      type=\"bar2d\" \r\n                      id=\"chart-1\" \r\n                      dataformat=\"json\" \r\n                      datasource={ {data}}&gt;\r\n        &lt;\/fusioncharts&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\r\n<h4><strong>Step 6.2<\/strong><\/h4>\r\nRun the <strong>server.js<\/strong> file from the terminal, as shown below:\r\n<pre class=\"lang:powershell\"> $ node server.js<\/pre>\r\nThis will start the server.\r\n<h4><strong>Step 6.3<\/strong><\/h4>\r\nTo test the app created, open your browser, and type <strong>https:\/\/localhost:3000<\/strong> in the address bar.\r\nYour chart should now render, as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15818\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/02\/final-output-2fetching-data-from-the-database.jpg\" alt=\"final-output-2(fetching-data-from-the-database)\" width=\"620\" height=\"366\" srcset=\"\/blog\/wp-content\/uploads\/2017\/02\/final-output-2fetching-data-from-the-database.jpg 620w, \/blog\/wp-content\/uploads\/2017\/02\/final-output-2fetching-data-from-the-database-150x89.jpg 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/>","protected":false},"excerpt":{"rendered":"<p>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&#8217;ll discuss how FusionCharts can be used in [&hellip;]<\/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":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>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}]}}