Create Charts using Node.js, ExpressJS and Mongodb

In the recent years an unexpected programming language has been dominating the server side scene. This programming language was only being used for client side programming. It is none other than our very own JavaScript. The change in the fortunes of JavaScript can be attributed to the introduction of a server side framework called Node.js.

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

There are multiple web frameworks built on top of Node.js leveraging its platform. Few famous examples are Express and SailsJS.

In this post we will see how we can create dynamic charts using ExpressJS and MongoDB. ExpressJS is a minimalistic framework for Node.js which is used to create web applications. MongoDB is a NoSQL based data store which stores data in the form of collection of documents where each document is of custom JSON format called BSON.

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 if the installation went fine:

Open Command Terminal and run the following command: $ node -v to get the version of the nodejs installed in your system.

Run the command node to open up a REPL (Read Evaluate Print Loop) console and try out a small command as shown below:

{node>console.log("Hello World");HelloWorld

Installing ExpressJS

The libraries or frameworks leveraging Node platform are distributed in the form of packages and these packages can be installed using the Node Package Manager (npm) tool which comes with the Nodejs installation. ExpressJS is one such package. These packages can be installed globally or installed for specific application. Follow the steps below to install ExpressJS for a specific application:

Create a new directory: $ mkdir node-fusioncharts-demo

Change to the new directory $ cd node-fusioncharts-demo

Install express for specific application $ npm install express

After the installation you will find a new folder node_modules created. This is where all your application specific packages are stored.

Installing MongoDB

MongoDB is an open-source, document database designed for ease of development and scaling. It stores data as a collection of documents where each document is stored in a custom JSON format called BSON. Relevant MongoDB distributions can be downloaded from here and installed in your systems.

Two very frequently used commands of MongoDB are: mongod and mongo .

mongod: This command is used to run the MongoDB daemon which manages the data storage and retrieval. By default it runs on the port 27017.

mongo: This command is used to run all our MongoDB queries. One can insert, retrieve, update and delete data as well as create indexes through this tool. It connects to the MongoDB daemon running on the port 27017

Populating data in MongoDB

For this article we are going to consider the variation of price of Petrol and Diesel for the year 2015 in Bangalore, India. We have obtained the fuel price from here. As MongoDB is a JSON based document store, the data to be populated is created in the form of an array of JSON objects as shown below:

Each JSON object contains 3 properties: Month, Price of Petrol and Price of Diesel for that month. To populate this data into the MongoDB we make use of another tool called: mongoimport provided by MongoDB. To this tool we provide the following information:

So now we have the required data in our db. Let us now see how to create REST API using ExpressJS to consume the data from MongoDB.

Creating REST API for data retrieval

If you are familiar with Java, you would remember using a MySQL Connector Jar to connect to MySQL from Java or use a MongoDB connector to connect to MongoDB. Similarly in Nodejs we have a connector which is distributed as mongodb node package. Install it by using the command: $ npm install mongodb

Step 3 : Implement method to fetch the data from Database

While we implement the method to fetch db, we also need to parse and construct the object so that we are able to use it for rendering the multi series line chart. The multi series line chart we are going to draw requires an array of labels, multiple arrays of values where each array indicates a series. The data we retrieve from db is an array of objects of the below form:

Step 4 : Create Express Server and REST API end-point

Let us expose the REST API at the URL /fuelPrices. We will modify the getData() method we defined in Step 3 by adding an additional parameter to the method. This additional parameter is the response object. We are going to write the JSON object created in getData() method to the response object so that it is sent to the client invoking the API.

Creating views for rendering the chart

Now that we have the back-end ready, let us focus on building the views for rendering the chart. We are going to use a template engine which will help us create dynamic HTML views. Using this template we can define parts of the page that will be populated by the data from the backend and rest will be statically defined. The template engine we would be using for this article is called Handlebars.

To get handlebars working with Express we need to install a node package express-handlebars which will help us to invoke the templates from express code. Let us install that package by running the command: npm install express-handlebars .

We will be creating the required templates in a views directory. This is the convention followed by express to look for view templates. We will create a base template which will contain the common parts of the page namely: css resource inclusions, header, footer, JavaScript inclusions. This base template is commonly called as a layout file. The other templates are rendered within this layout file. The base template OR the layout file is placed within the layouts folder.

The layout template is referring to a JavaScript resource: fusioncharts_demo.js which is placed under public/js folder. This JavaScript resource is where we are going to add our code to get data from backend and render that in a chart. We are going to place all FusionCharts JavaScript library in this folder.

Note: In the above we are making use of Bootstrap and jQuery in addition to our FusionCharts library

Let us now see the code for the template that will contain the chart. The name of this template file is chart.handlebars. In this template we will show the data both in tabular as well as graphical format. Before we look at the template definition, let us look at the directory structure we have created so far:

Let us get back to the expressjs server code i.e server.js and do the following:

Build the JavaScript and HTML to display the fuel price in a line chart

Build the relevant HTML to display the fuel price in a tabular form

The aim of this HTML is to display the data in a tabular form as shown below:

Month

Jan

Feb

Mar

Apr

...

Petro Price

64.72

62.81

66.18

65.17

…

Diesel Price

52.49

50.72

54.06

51.74

…

And for this we will make use of Handlebars template at the client side i.e we will process the handlebars templates in the client with the data we received after making an AJAX call to the server. Let us define the Handlebars template within in the <script> tag in the chart.handlebars file as shown below:

The placeholders identified by are handlebar constructs. Let us get back to the JavaScript AJAX call we had made. Within the success function we will use Handlebars.compile() to compile the client side template and then invoke the compiled template with the data obtained from server as shown below:

If you want to see the app we have built so far in action, just run the following command from the app directory: node server.js. You will see Server up: http://localhost:3300 printed. Open the URL http://localhost:3300/ to see the table as shown in the below image:

Build the JavaScript and HTML to display the fuel price in a line chart

In this section we will add code for rendering the chart. Let us build the chart step-by-step as shown below:

Create chart properties object

varchartProperties={"caption":"Variation of Petrol and Diesel price in Bangalore","numberprefix":"Rs","xAxisName":"Month","yAxisName":"Price"};