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.
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
The example attached will be an updated (corrected, as there are some typos and formatting issues in the above mentioned book) version of the Chapter 5 example: Angular-Highcharts UI Application (page 125). There is also a form which collects the data (marks by students) that will be used for display in the chart. I added into my Angular App the following examples also: page 140 - 159: DrillDown Event, LegendItem Event, CheckBoxClick Event.
My application is online:
Code can be downloaded :
(you have to add npm install after unzipping it. It requires Angular 9.)
The following routes are active:
A. adding a new student with marks:
B. after adding them, their marks will be present under the main link
C. events with checkbox
D. events with legenditem click
E. events with 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.
All coders welcome
Level up every day