DEV Community

Cover image for HighCharts with Angular - Part 1 - Introduction
Zoltan Halasz
Zoltan Halasz

Posted on

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.

highcharts

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.

book image

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 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:
https://highcharts-angular1.zoltanhalasz.net/

Code can be downloaded :
(you have to add npm install after unzipping it. It requires Angular 9.)
https://drive.google.com/file/d/1ZWuQ64ffE-gLUtKf-NLfGU_hJ8hO1ILD/view

example

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.
https://drive.google.com/file/d/1EUJxRAV5RDGdvnFoT5VWY0ZLOZdM6dY-/view

Top comments (0)