Practical Highcharts with Angular: Your Essential Guide to Creating Real-time Dashboards

✍ Scribed by Sourabh Mishra

• Publisher: Apress
• Year: 2020
• Tongue: English
• Leaves: 314
• Category: Library

✦ Synopsis

Learn to create stunning animated and interactive charts using Highcharts and Angular. Use and build on your existing knowledge of HTML, CSS, and JavaScript to develop impressive dashboards that will work in all modern browsers.

You will learn how to use Highcharts, call backend services for data, and easily construct real-time data dashboards. You'll also learn how you can club your code with jQuery and Angular. This book provides the best solutions for real-time challenges and covers a wide range of charts including line, area, maps, plot, different types of pie chart, Gauge, heat map, Histogram, stacked bar, scatter plot and 3d charts. After reading this book, you'll be able to export your charts in different formats for project-based learning.

Highcharts is one the most useful products worldwide for develop charting on the web, and Angular is well known for speed. Using Highcharts with Angular, developers can build fast, interactive dashboards. Get up to speed using this book today.

What You’ll Learn

• How to develop interactive, animated dashboards

How you can implement Highcharts using Angular

• How to develop a real-time application with the use of WebAPI, Angular, and Highcharts

How to create interactive styling themes and colors for a dashboard

Who This Book Is For

This book is aimed at developers, dev leads, software architects, students or enthusiasts who are already familiar with HTML, CSS, and JavaScript.

✦ Table of Contents

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Getting Started with Highcharts
Benefits of Highcharts
History of Highcharts
Basics of Charting
Setup and Configuration
Creating Your First Chart
Summary
Chapter 2: Concept of Highcharts
Scalable Vector Graphics
Choosing the Right Chart Type Based on Requirements
Bar Charts
When to Choose a Bar Chart
Line Charts
When to Choose a Line Chart
Scatter Plots
Maps
Setting Layouts
Alignment
Setting Up Chart Margins
Legends
Setting Up Plot Lines
Setting Credits
Summary
Chapter 3: Integrating Highcharts with Angular
What Is Angular?
Configuring Angular
Setting Up Node.js
Code Editor
Setting Up Angular CLI
TypeScript
Highcharts Angular Wrapper
Summary
Chapter 4: Different Charting Types
Pie Charts
Donut Chart
Drilldown Charts
Required Dependencies
Setting Up the Unique Name for a Series
Line Charts
Area Charts
Scatter Charts
Histogram Charts
Heat Map Series Charts
Stacked Bar Charts
Column Pyramid Charts
Gauge Charts
Summary
Chapter 5: Working with  Real-Time Data
Web API
What Is REST?
Web API Development Using Visual Studio
Solution Explorer
ConfigureService()
Configure()
Routing
Attribute Routing
Database Creation
Adding Entity Framework
Angular-Highcharts UI Application
Services in Angular
Events in Highcharts
Drilldown Event
LegendItem Click Event
CheckBoxClick Event
Highcharts Wrapper for .NET
LineSeries Chart with a Highcharts Wrapper
Gauge Series Chart with a Highcharts Wrapper
SeriesData Classes
Summary
Chapter 6: Themes and Additional Features of Highcharts
Themes in Highcharts
Applying a Dash Style Series to a Line Chart
Combinations in Highcharts
Zoom Option in Highcharts
Setting an Image in a Chart Area
3D Charts
Cylinder Chart
Funnel 3D
Pyramid 3D
Pie 3D Chart
Exporting and Printing Charts
Additional Chart Features
Radar Chart
Pareto Chart
Bell Curve Chart
Organization Chart
Timeline Chart
Gantt Chart
Summary
Chapter 7: Building a Real-Time Dashboard
Real-Time Dashboard Application
Features of the App
Creating a Web API
Setting Up a Database
Creating a Database First Approach Using Entity Framework
Routing in an Angular App
Summary
Index