What This Book Includes
Is This Book for You
What Do You Need to Use This Book
How This Book is Organized
Using Code Examples
We have all heard the saying “a picture’s worth a thousand words”, and charts and graphics are some of the most informative pictures. Charts and graphics play an important role in every web application. They make data easier to understand, add interest to websites, and have wide applications in our daily life. The scientific, engineering, mathematics, and financial communities always have a need to present data and results graphically. In recent years, web browsers have become a great platform to create powerful web applications with more features and high performance, which allows us to incorporate the beautiful charts, graphics, and animations easily into web applications.
APS.NET Core is a new web framework from Microsoft, which is an open source and cloud-optimized web platform for developing modern web applications that can run on Windows, Linux, and Mac. The platform includes the MVC Core framework, which combines the features of MVC and Web API into a single web-programming framework.
As a .NET programmer or a web developer, you may ask a question – what is the significance of the new ASP.NET Core Framework? To answer it, we need to consider the original .NET Framework. For many .NET developers, you may have confusions about this huge framework at some points. You need to decide between ASP.NET Web Forms and ASP.NET MVC for web applications, decide between Windows Forms and WPF for window applications, and decide between the Entity Framework and ADO.NET for database development. For some experienced developers the choices are obvious, for most it is not that easy, while it is more difficult for .NET beginners.
ASP.NET core is built on .NET Core, which is a cross-platform version of the .NET Framework without the Windows-specific API. It is a completely new framework, which is simper and easier to work with. ASP.NET Core MVC, built on the new ASP.NET Core platform, provides the functionality of the original ASP.NET MVC Framework. ASP.NET Core MVC applications can run on .NET Core or on the full .NET Framework. The platform provides an optimized development framework for applications that are deployed to the cloud or run on-premises. It consists of modular components with minimal overhead, so you can optimize your applications to include just the NuGet packages you need. The benefits of such a smaller platform include tighter security, reduced servicing, improved performance, and decreased maintenance costs.
ASP.NET Core MVC follows a pattern called model-view-controller (MVC). This architectural pattern separates an application into three main components: the model, the view, and the controller. This is a standard design pattern that many developers are familiar with. The model component is the part of the application that implement the logic for the application’s data domain. Model objects often retrieve and store model state in a database. For example, a Product object might retrieve the price information from a database, operate on it, and then write updated information back to a Products table in the database. Views are the components that display the application’s user interface (UI). Typically, this UI is created from the model data. An example would be an edit view of a Products table that displays text boxes, drop-down lists, and check boxes based on the current state of a Product object. Finally, controllers are the components that handle user interaction, work with the model, and ultimately select a view to render that displays UI. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction. For example, the controller handles query-string values, and passes these values to the model, which in turn might use these values to query the database.
The MVC pattern helps us create web applications that separate the different aspects of the application (input logic, business logic, and UI logic) while providing a loose coupling between these elements. It specifies where each kind of logic should be located in the application. It is clear that the UI logic belongs in the view, the input logic belongs in the controller, and the business logic belongs in the model. This separation helps us manage complexity when we build an application, because it enables us to focus on one aspect of the implementation at a time. The loose coupling between the three main components of an MVC application also promotes parallel development. For example, one developer can work on the view, a second developer can work on the controller logic, and a third developer can focus on the business logic in the model.
It is also important to distinguish between the MVC design pattern and the ASP.NET Core MVC implementation. ASP.NET Core MVC follows the standard MVC pattern, in doing so, provides a greatly improved separation of concerns when compared to Web Forms. In fact, ASP.NET Core MVC implements a variant of the MVC pattern that is especially suitable for web applications. Many of the ASP.NET Core MVC API methods and coding patterns follow a cleaner, more expressive composition than was possible with earlier platforms. With ASP.NET Core MVC, developing advanced web applications is easier than ever before.
Nowadays, most modern web browsers support for new technologies that can be used to create web applications with beautiful 2D and 3D chart and graphics. They use the GPU to achieve maximal performance for web applications. The progress in the development of various client-side graphics packages allows you to create graphics easily that run directly in client’s browser. These graphics packages include SVG (scalable vector graphics), WebGL, d3.js, three.js, etc. SVG is an XML-based vector image format for two-dimensional (2D) graphics with support for interactivity and animation. The key features of SVG include 2D shapes, text, and embedded raster graphics, with many different painting styles. With powerful scripting and event support, SVG can be used as a platform upon which to build graphical rich web applications and user interfaces. In this book, I will show you how to use SVG to create various 2D graphics in ASP.NET Core MVC applications.
As I mentioned, most modern browsers also support for a technology that can be used to create beautiful 3D graphics and animations that use the GPU to achieve maximal performance. This technology is called WebGL and is supported by the latest web browsers. Traditionally, 3D graphics has been restricted to high-end computers or dedicated game consoles and required complex programming. However, as PC and mobile devices, and more importantly, web browsers have become more sophisticated, it has been possible to create and display 3D graphics in web applications. With WebGL, you can create 3D scenes that run directly in your browser without the need for any plugins or libraries. This book will provide an overview of WebGL and take you, step by step, through basics of creating 3D graphics applications based on ASP.NET Core MVC Framework.
In addition to MVC controllers, ASP.NET Core also offers Web API controllers that are used to provide access to an application’s data. Web API is a framework that makes it easy to build HTTP RESTful services that can reach a broad range of clients, including browsers, mobile devices, and traditional desktop applications. In this book, I will also demonstrate how to create Web API applications and how to use the data from Web API services to create various charts, including 3D surface charts and stock charts.
As you may have already noticed, a plethora of ASP.NET MVC programming books is currently available in bookstores. The vast majority of these books are general-purpose user guides and tutorials that explain the basics of ASP.NET MVC and how to use it to implement simple web applications. Users who want to develop web applications with advanced charts, graphics, and other interactive features, however, require a book that provides an in-depth introduction specifically to MVC Core cross-platform chart and graphics development.
What This Book Includes
This book and its sample code listings, which are available for download at my website at www.drxudotnet.com, provide you with:
- Ready-to-run example programs that allow you to explore the charting and graphics techniques described in the book. You can use these examples to understand how the chart and graphics algorithms work. You can modify the code examples or add new features to them to form the basis of your own projects. Some of the example code listings provided in this book are already sophisticated web apps that you can use directly in your own real-world applications.
Is This Book for You
.NET developers and technical professionals can use the majority of the example programs in this book routinely. Throughout the book, I will emphasize the usefulness of chart programming to real-world applications. If you closely follow the instructions presented in this book, you will easily be able to develop various practical web chart applications, from 2D charts to a sophisticated 3D graphics. At the same time, I won’t spend too much time discussing programming style, execution speed, and code optimization, because a plethora of books out there already deal with these topics. Most of the example programs you will find in this book omit error handlings. This makes the code easier to understand by focusing only on the key concepts and practical applications.
What Do You Need to Use This Book
You will need no special equipment to make the best use of this book and understand the algorithms. To run and modify the sample programs, you will need a computer capable of running either Windows 7, 8, or 10. The software installed on your computer should include Visual Studio 2017 (Community version is fine) with ASP.NET Core MVC 1.1 or higher. If you have Visual Studio 2015 with ASP.NET Core MVC 1.0, you can also run most of the sample code with few modifications. Please remember, however, that this book is intended for Visual Studio 2017, ASP.NET Core MVC 1.1, and that all of the example programs were created and tested on this platform, so it is best to run the sample code on the same platform.
How This Book Is Organized
This book is organized into ten chapters, each of which covers a different topic about ASP.NET Core MVC chart programming and applications. The following summaries of each chapter should give you an overview of the book’s content:
Chapter 1, Overview of ASP.NET Core MVC
This chapter introduces the basics of ASP.NET Core MVC and reviews some of the general aspects of MVC programming. It uses two sample MVC Core applications to illustrate the procedure of MVC Core programming.
Chapter 2, Graphics Basics in SVG
This chapter represents SVG graphics basics. It covers the graphics coordinate systems used in SVG, and demonstrates how to create basic 2D shapes. It also discusses the colors, pains, colormaps, tiles, and textures.
Chapter 3, Dynamic SVG Graphics with D3
Chapter 4, 2D Charts with D3
This chapter illustrates how to use D3 to create varous 2D charts, including line charts and certain special or application-specific charts in ASP.NET Core MVC applications. It consists of a variety of special charts that display statistical distributions of data or discrete data, including bar, stair-step, stem, error bar, and area charts. It also demonstrates how to create charts in other coordinate systems, such as pie and polar charts.
Chapter 5, 2D Charts with Chart Libraries
This chapter introduces two charting libraries: Chart.JS and Google Chart API. These two packages based on different graphics layers: Chart.JS uses HTML5 canvas for rendering charts, while Google Chart API are based on SVG and VML for older IE versions. It consists of several examples that show how to create a variety of 2D charts using these libraries.
Chapter 6, Stock Charts
Chapter 7, 3D Graphics with WebGL
Chapter 8, 3D Graphics with Three.js
This chapter introduces a powerful 3D graphics library – Three.js. It presents the basic procedures on how to use Three.js to create 3D graphics, including defining the scene, setting camera, specifying the materials and lights, and creating geometry and mesh.
Chapter 9, 3D Charts
Chapter 10, Chart with Web API
This chapter covers the basics of ASP.NET Core Web API that is used to provide access to an application’s data. Web API is a framework that makes it easy to build HTTP RESTful services that can reach a broad range of clients, including browsers, mobile devices, and traditional desktop applications. The chapter demonstrates how to create Web API applications and how to use the data from Web API services to create various charts, including 3D surface charts and stock charts.
Using Code Examples
You may use the code in this book in your own applications and documentation. You do not need to contact the author or the publisher for permission unless you are reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing the example code listings does require permission. Incorporating a significant amount of example code from this book into your applications and documentation also requires permission. Integrating the example code from this book into commercial products is not allowed without written permission of the author.
I am always interested in hearing from readers, and would like to hear your thoughts on this book. You can send me comments by e-mail: jxu at DrXuDotNet.com. I will also provide updates, bug fixes, and ongoing support on this very website.