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 start
command and open your browser and navigate tohttp://localhost:3000/
. - Use the command
nest g resource
to generate any specific module in your application (such as the dashboard, employee, or department)nest g resource
command not only scaffold all the NestJS building blocks (module, service, controller classes), but also an entity class such as DTO classes, and the testing.spec
files out of the box. - Let’s create a Department module by running the
nest g resource Department
command:
- We are not going to use CRUD operation in this example, so go with the
no
:
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
MongooseModule
into the rootAppModule
and pass the connection string - Create
create-department.dto.ts
inside src/dto folder - Create
department.entity.ts
insidesrc/entity
folder, the entity consists of two parts:Department interface and Department schema (mongodb table structure) - Inside
departments.module.ts
add theMongooseModule
which provides theforFeature()
method to configure the schema, so that we can use in the current module scope and further export the same by addingMongooseModule
to the export array. - Once you’ve registered the schema, you can inject a Department model into the DepartmentsService using the
@InjectModel()
decorator. - A controller’s
departments.controller.ts
purpose is to receive specific requests for the application. For example, handling http requests. - Lastly, set the
cors
property totrue
, 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-angular
and the Highcharts library, just run the following instruction:npm install highcharts-angular --save
. - To import the package go to
app.module.ts
file and import the moduleHighchartsChartModule
from thehighcharts-angular
package. - To build Highcharts charts, install Highcharts:
npm install highcharts --save
.
Next, in the
app.component.ts
, in the top lines we imported Highcharts fromimport * 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-chart
directive and some property binding intoapp.component.html
.
And here is the final result:
As you can see on the GIF below, the bar chart retrieves the data from the database
Comments
There are no comments on this post
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.