In this article, we will create a bar chart to visualize the department table of a particular student count. To do that, we will walk through the integration of NestJS Node.js framework for building efficient, reliable, and scalable server-side applications, and MongoDB (NoSQL database program) with the Angular Framework.
Along with the official Highcharts Angular wrapper, we will use a bar chart to visualize data coming from the backend.
Let’s get started.
This article is divided into three major parts:
- Set Up a NestJS project.
- Integration of NestJS app with MongoDB.
- Create an Angular project with Highcharts.
Set up a NestJS Application
- To get started with NestJS, run the following command
npm i -g @NestJS/cli
- To scaffold NestJS project(initial setup), which contains the base structure for your project, run the following command
nest new project-name. Then open the editor to see the code base:
- Run the
npm startcommand and open your browser and navigate to
- Use the command
nest g resourceto generate any specific module in your application (such as the dashboard, employee, or department)
nest g resourcecommand not only scaffold all the NestJS building blocks (module, service, controller classes), but also an entity class such as DTO classes, and the testing
.specfiles out of the box.
- Let’s create a Department module by running the
nest g resource Departmentcommand:
- We are not going to use CRUD operation in this example, so go with the
Setting Up NestJS with MongoDB Database
Here are the steps to create the MongoDB database:
- Login to mongodb and create an organisation and create a project inside the organisation.
- Click on Build a Database.
- Choose a region, cluster name, cloud provider and spec.
- Configure a user name and password for the database.
- Select Connect your application.
- Copy the connection string since we need it in the NestJS application.
- Integrate MongoDB by running
npm install --save @NestJS/mongoose mongoose
- Import the
MongooseModuleinto the root
AppModuleand pass the connection string
create-department.dto.tsinside src/dto folder
src/entityfolder, the entity consists of two parts:Department interface and Department schema (mongodb table structure)
MongooseModulewhich provides the
forFeature()method to configure the schema, so that we can use in the current module scope and further export the same by adding
MongooseModuleto the export array.
- Once you’ve registered the schema, you can inject a Department model into the DepartmentsService using the
- A controller’s
departments.controller.tspurpose is to receive specific requests for the application. For example, handling http requests.
- Lastly, set the
true, to enable CORS with default settings.
Set up an Angular project with Highcharts
- To set up an Angular project, follow angular instructions Setting up the local environment and workspace. To visualize the data, include the official Highcharts Angular wrapper, then import the Highcharts module:
- To install
highcharts-angularand the Highcharts library, just run the following instruction:
npm install highcharts-angular --save.
- To import the package go to
app.module.tsfile and import the module
- To build Highcharts charts, install Highcharts:
npm install highcharts --save.
Next, in the
app.component.ts, in the top lines we imported Highcharts from
import * as Highcharts from “highcharts”, and DataService.
- To install
- Create the service.
- The last step is to initialize the chart data and options by adding the
highcharts-chartdirective and some property binding into
And here is the final result:
As you can see on the GIF below, the bar chart retrieves the data from the database