SHASHANGKA SHEKHAR'S BLOG

Author, TechWriter

Dynamic Highcharts – ASP.Net Core, Angular6

Hits: 85

In this post, we are going to implement dynamic highchart with Angular6 and Asp.net Core. In the previous article we have explore how a Single Page Application (SPA) sample can be put together using ASP.Net Core & Angular from scratch.

Based on previous post this article is extended to implement charting. We are going to modify/extend existing sample application by downloading full source code from github.

Let’s get started by opening the existing application, first of all we are going to add packages to our application.

Install Node Packages:

Let’s add frontend packages to our application. We need to modify package.json file. Open package.json file then add listed dependencies from below.

Dependencies:

Dev Dependencies

Here’s our list of frontend package dependencies.

After installation all packages let’s transfer the required libraries from node_modules folder to “wwwroot/lib”.

 Manage Installed Packages:

We need to add below listed task to gulp file, which will transfer the newly added package libraries to “wwwroot/lib” folder.

Here’s the modified gulp file.

Right click on gulpfile.js then go to “Task Runner Explorer”.

From the new window refresh the task then right click on task to run it like below screen.

As we can see our required libraries are loaded in “wwwroot/lib” folder.

Before importing module we need to modify SystemJS by adding below listed bundle to System.config() function.

SystemJS Config : systemjs.config.js

TypeScript Configuration:

We need to add new types “highcharts” in compiler options, below code snippet is for tsconfig.json file.

Configure Typescript : tsconfig.json

Root Module:

Now let’s import newly added chart module, component in module.ts.

Below is the updated code snippet in module.ts.

Next we will create SQL Database tables.

Creating Database:

Let’s Create a Database in MSSQL Server. Here is the table where we are storing data. Run below script in query window to create new database.

Creating Table:

Scaffolding MSSQL Database:

We are going to re-generate EF models from existing database using reverse engineering using command in Package Manager Console.

Command:

As we can see from solution explorer models folder is created with Context & Entities.

Now open the DbContext file then add a constructor to pass configuration like connectionstring into the DbContext.

Modify WebAPI:

Add below result function to existing web-api to retrieve result data from database.

All right, our WebAPI is modified and ready to retrieve data. Our next step is to prepare client model, component and services to interact with WebAPI’s.

Let’s create a typescript model class, then use it in another component by importing like

Typescript Model : ResultModel

Component : ChartComponent

Http Client Services : ResultService 

 Http View : chart.html 

Test in Browser:

Now it’s time to build & run the application, go to chart menu, as we can see from below screenshot pie chart is generated dynamically.

Summary:

In this sample we have combine ASP.Net Core & Angular to create the sample SPA app without any CLI, learn how to start with an empty ASP.Net Core application to serve static html page.

We also have deep dive into latest frontend technology like Angular6 from scratch to build a single page application. Have a short overview on Angular6 dependencies & also have ideas of module, components. Then we have perform some database operation using our sample application. Finally we have implemented Dynamic Highchart. Hope this will help.

Downloads:

I’ve uploaded the full source code to download/clone @github, Thanks 🙂

Post a comment