HighCharts with Angular - Part 1 - Introduction

To continue the idea from the previous posts, my goal is to gather a number of libraries that can make my business applications look more professional, adding new functionalities and features.

One of these libraries is HighCharts, that can be integrated easily into Asp.Net and Angular (and Javascript) projects.

I would add here this great book which started my interest and whose projects I looked at and tried to implement some of its content.

For any Angular project, we can add the HighChart libraries using the below npm commands:

1.

npm install highcharts –save

This command will add Highcharts dependencies into your project.

2.

npm install highcharts-angular –save

The Highcharts angular wrapper is open source. It provides vibrant

and dynamic feature visualization for Highcharts within an Angular

application.

The example attached will be an updated (corrected, as there are some typos and formatting issues in the book) version of the Chapter 5 example: Angular-Highcharts UI Application (page 125).
I added into my Angular App the following examples also: page 140 - 159: DrillDown Event, LegendItem Event, CheckBoxClick Event.

My application is online:
https://highcharts-angular1.zoltanhalasz.net/

Code can be downloaded :
(you have to add npm install after unzipping it)

The following routes are active:
A. adding a new student with marks:
https://highcharts-angular1.zoltanhalasz.net/addmarks
B. after adding them, their marks will be present under the main link
https://highcharts-angular1.zoltanhalasz.net/

C. events with checkbox
https://highcharts-angular1.zoltanhalasz.net/checkbox
D. events with legenditem click
https://highcharts-angular1.zoltanhalasz.net/legenditem
E. events with drilldown
https://highcharts-angular1.zoltanhalasz.net/drilldown



It also uses a back-end service live under the link: https://studentapi.zoltanhalasz.net/
this application also implements the .Net Wrapper of the Highchart, shown in example at the end of Chapter 5.

It is based on the book, starting with page 160, also adding an in-memory database to serve the data needed by the api controller. This will provide the back-end for the angular project above, and is called in the service typescript file of the angular project.

The code of the back-end is in this zip repo.