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

Learn to create stunning animated and interactive charts using Highcharts and Angular. This updated edition will 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 so 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, and much more. You will also learn about arc diagrams, bubble series, dependency wheels, and error bar series. 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 developing 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 Create interactive animated styling themes and colors for a dashboard Work on a real-time data project using Web API and Ajax calls through different data sources Export charts in various formats Who This Book Is For Developers, dev leads, software architects, students or enthusiasts who are already familiar with HTML, CSS, and JavaScript. Table of Contents 5 About the Author 9 About the Technical Reviewer 10 Acknowledgments 12 Introduction 14 Chapter 1: Getting Started with Highcharts 16 Benefits of Highcharts 16 History of Highcharts 17 Basics of Charting 18 Setup and Configuration 20 Creating Your First Chart 22 Summary 27 Chapter 2: Concept of Highcharts 28 Scalable Vector Graphics 28 Choosing the Right Chart Type Based on Requirements 29 Bar Charts 29 When to Choose a Bar Chart 30 Line Charts 30 When to Choose a Line Chart 31 Scatter Plots 31 Maps 32 Setting Layouts 32 Alignment 33 Setting Up Chart Margins 34 Legends 35 Setting Up Plot Lines 35 Setting Credits 37 Summary 37 Chapter 3: Integrating Highcharts with Angular 38 What Is Angular? 38 What’s New in Angular 39 Configuring Angular 40 Setting Up Node.js 40 Code Editor 42 Setting Up Angular CLI 43 TypeScript 46 Highcharts Angular Wrapper 47 Summary 55 Chapter 4: Different Charting Types 56 Pie Charts 57 Donut Chart 62 Drilldown Charts 64 Required Dependencies 65 Setting Up the Unique Name for a Series 65 Line Charts 70 Area Charts 72 Scatter Charts 79 Histogram Charts 84 Heat Map Series Charts 86 Stacked Bar Charts 89 Column Pyramid Charts 93 Gauge Charts 98 Summary 104 Chapter 5: Working with Real-Time Data 105 Web API 105 What Is REST? 107 Web API Development Using Visual Studio 107 Solution Explorer 109 ConfigureService( ) 111 Configure( ) 112 Routing 112 Attribute Routing 112 Database Creation 117 Adding Entity Framework 120 Angular-Highcharts UI Application 125 Services in Angular 125 Events in Highcharts 137 Drilldown Event 140 legendItemClick Event 145 CheckBoxClick Event 149 Highcharts Wrapper for .NET 153 Line Series Chart with a Highcharts Wrapper 154 Gauge Chart with a Highcharts Wrapper 158 SeriesData Classes 164 Summary 164 Chapter 6: Themes and Additional Features of Highcharts 165 Themes in Highcharts 165 Applying a Dash Style Series to a Line Chart 168 Combinations in Highcharts 170 Zoom Option in Highcharts 179 Setting an Image in a Chart Area 180 3D Charts 183 Cylinder Chart 187 Funnel 3D 190 Pyramid 3D 194 Pie 3D Chart 197 Exporting and Printing Charts 201 Additional Chart Features 203 Radar Chart 203 Pareto Chart 205 Bell Curve Chart 210 Organization Chart 212 Timeline Chart 220 Gantt Chart 223 More Charts 226 Deviation Chart 226 Bubble Series Chart 228 Custom Tooltip in Highcharts 232 Dependency Wheel 233 Error Bar Series 236 Lollipop Chart 240 Sunburst Chart 244 Summary 251 Chapter 7: Building a Real-Time Dashboard 252 Real-Time Dashboard Application 252 Features of the App 253 Creating a Web API 253 Setting Up a Database 259 Creating a Database-First Approach Using Entity Framework Core 263 Routing in an Angular App 273 Summary 294 00.PNG 1