Creating Charts Using FusionCharts Suite XT with the MEAN Stack

FusionCharts Suite XT includes an extensive range of charts, gauges, and maps that you can use to plot all types of static and real-time data. Not just that, the suite can be extended to be used with various JavaScript libraries for developing web and mobile applications.

This article talks about how FusionCharts can be used with the MEAN stack—a collection of JavaScript-based technologies—for rendering the various charts that are a part of the FusionCharts library. We will be talking about how you can create charts by passing chart data directly and by fetching data from a database.

Creating Charts Using FusionCharts Suite XT with the MEAN Stack

The MEAN Stack

MEAN 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; it is a complete development toolkit that can be used for the client-side as well as the server-side execution environments.

Let’s take a look at how you can start with installing and setting up the MEAN stack and go on to using it with FusionCharts to create charts.

Installing the MEAN Stack and Setting Up Your Project

In order to build an application, the four components of the MEAN stack have to be first installed individually.

Installing Node.js
Download the relevant Node.js installer for your operating system from here and follow the instructions to install it on your system. For Windows, the installer will update the path variable to include the location for the node executable.

To verify installation, open a terminal and the execute the command shown below:

Executing this command will tell you the node.js version installed.

Next, run the node command, after which the prompt will change. When the prompt changes, execute the following command on the command line:

If the output after executing this command is ‘Node is working’, your installation has been successful.

Installing MongoDB
MongoDB is an open-source document-based database that provides high performance, high availability, and can be scaled automatically. MongoDB distributions can be downloaded from here and installed in your system.

Installing Express.js
Express.js is a web application framework for Node.js that comes with a robust set of features for developing mobile and web applications. After you’ve installed Node.js, create a working directory to save your application. The steps are outlined below:

  1. Create a new directory, named fusioncharts-demo.
  2. Change the working directory to fusioncharts-demo.
  3. Create the package.json file for your application.
  4. Install Express.js for your application. Install it in the fusioncharts-demo directory and save it in the dependencies list.

Installing AngularJS
You can install AngularJS via Bower (a package management software).
If you don’t have Bower installed in your system, execute the following command to install it:

Now, to install AngularJS via Bower, execute the following command:

Installing FusionCharts

To integrate FusionCharts for your project, after the MEAN stack has been installed and setup, you need to install the FusionCharts Suite XT and the Angular-FusionCharts plugin.

We’ll be installing these using the Bower package management software.

Installing the FusionCharts Package
To install the FusionCharts package using Bower, execute the following command:

Click here to read more on installation via Bower.

Installing the Angular-FusionCharts Plugin
To install the Angular-FusionCharts plugin using Bower, execute the following command:

Click here to read more about the Angular-FusionCharts plugin.
Click here to read more on installation via Bower.

Creating a Simple Chart Using FusionCharts with the MEAN Stack

Now that the MEAN stack and FusionCharts package have been installed, it’s time we tried out rendering a simple chart using the combination.

Rendering a chart using FusionCharts and the MEAN stack is a 4 step process, as outlined below:

Step 1
Create a JS file, server.js, and save it in the fusioncharts-demo directory.
Copy the code given below and paste in the server.js file:

The server file is ready.

Step 2
Create a folder, public, under the fusioncharts-demo directory.
Create an HTML file, index.html, and save it in the fusioncharts-demo/public directory.

Add the code given below in the index.html file:

Step 3
Define the myctrl controller created in Step 2 using the ng-controller directive.
Create a folder, webapp, under the fusioncharts-demo directory.
Create a JS file, app.js, and save it in the fusioncharts-demo/webapp directory.
Copy the code given below and paste it in the app.js file:

Before we execute the final steps, let’s take a quick look at the directory structure created:

directory-structure

Step 4
Run the server.js file from the terminal, as shown below:

This will start the server.

Step 5
To test the app created, open your browser, and type http://localhost:3000 in the address bar.
Your chart should now render, as shown in the image below:

app-test

Creating Charts Using FusionCharts and MEAN Stack Using Data from a Database

We will now see how we can create charts using Express.js and MongoDB.

The steps for creating charts using FusionCharts and the MEAN stack and by fetching data from a database are outlined below:

  1. Install the mongoose client and establish connection to the MongoDB database
  2. Create a data model
  3. Populate data in the MongoDB database
  4. Create REST API for data retrieval
  5. Create a method to fetch data using the angular controller
  6. Create a view for rendering the chart

As an example, we’ll 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.

We will now cover each of the steps listed above in detail, with respect to the example.

Step 1: Installing the Mongoose client and establishing connection to the MongoDB database

Step 1.1
Install the Mongoose client. Mongoose translates the data in your database to JavaScript objects that can be used in your application.
Everything in Mongoose starts with a schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.
To install Mongoose, execute the following command at the terminal:

Step 1.2
Create a JS file, dbconnection.js, and save it under the fusioncharts-demo directory.
The code given below will establish connectivity with the MongoDB database.
Copy the code below and paste it in the dbconnection.js file.

Step 2: Creating a data model

Models are advanced constructors compiled from schema definitions. Instances of these models are documents that can be saved in and retrieved from the database.

Step 2.1
Create a folder, models, under the fusioncharts-demo directory.
Create a JS file, world.js, and save it in the fusioncharts-demo/models directory.
Add the code given below to the world.js file:

Step 2.2
Create a JSON file, data.json, and save it under the fusioncharts-demo directory.
The data to be populated in the database is passed as an array of JSON objects, as shown in the code below.
Add this code to the data.json file:

Our data model is now ready.

Step 3: Populating data in the MongoDB database

We’ll use the mongoimport command, as shown below, to create a MongoDB database and populate in it the data contained within the data.json.

This command takes the following information:

  1. name of the database ( -d fusioncharts_demo )
  2. name of the collection ( -c worlds )
  3. type of the input data ( –type json )
  4. location of the file containing data ( –file data.json )
  5. option to indicate that the input is a JSON array ( –jsonArray )

Step 4: Creating the REST API for data retrieval

Let us expose the REST API at the URL /worlddata.

This will fetch the data from the database and send a response object to the client, invoking the API.

Add the code given below to the server.js file (fusioncharts-demo/server.js):

Step 5: Creating a method to fetch the data from the database using the angular controller

Using the REST API (i.e. /worlddata), we’ve got the raw data.
Next, we need to create the fusioncharts data source inside the angular controller myctrl.
Add the code given below to the app.js file (fusioncharts-demo/webapp/app.js):

Step 6: Rendering the chart

Before we look at the template (/fusioncharts-demo/public/index.html), let us look at the directory structure we have created so far:

directory-structure-2a

Step 6.1
Now that the backend is ready, we need to create views for rendering the chart.
Add the code given below to the index.html file (fusioncharts-demo/public):

Step 6.2
Run the server.js file from the terminal, as shown below:

This will start the server.

Step 6.3
To test the app created, open your browser, and type http://localhost:3000 in the address bar.
Your chart should now render, as shown in the image below:

final-output-2(fetching-data-from-the-database)

Leave a Comment