Introduction
Overview
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
Overview
Welcome to Practical Cross-Platform Charts and Graphics with ASP.NET Core MVC. This book will provide all the tools you need to develop
cross-platform chart and graphics web applications using C#, ASP.NET Core MVC, JavaScript, and Visual Studio 2017. I hope this book will be
useful for .NET programmers and web application developers of all skill levels.
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.
D3.js is a JavaScript library for manipulating documents based on data. It helps you bring data to life using HTML, SVG, CSS, and JavaScript. D3.js allows you
to bind arbitrary data to a document object model (DOM), and then apply data-driven transformations to the documents. It is one of the most powerful and flexible
data visualization frameworks out there. It facilitates the generation and manipulation of web-based vector graphics with full access to the underlying SVG elements.
Moreover, D3.js turns the static SVG graphics into feature-rich visualizations and offers everything you need to make a 2D visualization out of the box. In this book,
I will describe the detailed procedure on how to use D3.js and SVG to create the interactive chart and graphics in web applications based on the cross-platform
ASP.NET Core MVC Framework. In particular, with the client computers and browsers being powerful and fast enough, there really is no need any more to generate
charts and graphics on the server. I will also walk you through creating various D3.js charts and graphics using the data from server side.
SVG and D3.js provides you full control and flexibility for creating charts and graphics for your web applications. However, you need to put a lot of effort if
you want to create applications with complex charts and graphics. Fortunately, with the progress in the web development, you do not need to reinvent the wheels
from scratch – there are many good client-side JavaScript-based graphics and chart libraries, from which you can choose for your applications. In this book, I will
introduce you two such charting libraries: Google Charts API and TechanJS. Google Charts API, based on SVG and D3.js, is a pure JavaScript charting library, which
allows you to enhance web applications by adding interactive charting capability. It provides wide variety of charts, including line, bar, area, pie charts, etc.
TechanJS is also a JavaScript library built on D3.js for creating interactive financial charts for web applications. I will explain how to create various charts
using Google Charts API and stock charts using TechanJS in ASP.NET Core MVC applications. In creating these charts, I will use a JSON interface to pass the data
from server (or database) to the client-side chart libraries.
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 practice, creating 3D graphics using WebGL requires complex programming. If you want to do anything more than the most basic tasks with WebGL, you need
to put series effort and literally hundreds of lines of code. This is unacceptable for rapidly developing applications on web time. Depending on the requirement
of your project, you are faced a choice: creating your own helper library to ease the pain, or using libraries already out there. Fortunately, there are a
number of JavaScript libraries available, which wrap the WebGL internally and provide a convenient JavaScript API. You can use these libraries directly to
create 3D graphics for your web applications without having to understand the complex features of WebGL. One of the most mature and feature-rich of such libraries
is Three.js. Three.js provides a large number of easy-to-use APIs that allow you quickly to create complex 3D charts and graphics in your browser. In this book,
I will provide you various recipes that you can follow to create beautiful 3D charts and graphics with Three.js for your ASP.NET Core MVC applications. At the
same time, I will also introduce a Google sponsored 3D chart package named Graph3d, which can be used to create simple 3D surface charts.
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.
I write this book with the intention of providing a complete and comprehensive explanation of ASP.NET Core MVC chart and graphics programming. This book pays
special attention to create suitable JSON interfaces for different JavaScript libraries, which allow you to create a variety of graphics and charts on the client
browser using data from the server-side data sources, such as mathematical functions and database. Much of this book contains original work based on my own
programming experience when I was developing commercial Computer Aided Design (CAD) packages and chart applications for quantitative analysis in the financial
industry. With ASP.NET Core MVC Framework and various client-side JavaScript chart and graphics libraries, you will find how easy it is to create web applications
with complex 2D and 3D charts and graphics.
Practical Cross-Platform Charts and Graphics with ASP.NET Core MVC provides everything you need to create your own advanced web-based chart and graphics
applications using C#, ASP.NET Core MVC, and JavaScript. It shows you how to use MVC Core Framework and JavaScript libraries to create a variety of web applications
with advanced chart and graphics features that range from simple 2D shapes to complex 3D surfaces and interactive 3D models. I will try my best to introduce you to
the ASP.NET Core MVC chart and graphics programming in a simple way – simple enough to be easily followed by a .NET programmer or a web developer who has basic
prior experience in developing .NET or web applications. From this book, you can learn how to create a full range of 2D and 3D chart and graphics for
web applications.
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:
-
A complete, in-depth instruction on practical cross-platform chart and graphics programming with C#, ASP.NET Core MVC Framework, and JavaScript. After reading
this book and running the example programs, you will be able to add various sophisticated charts and graphics to your web applications.
-
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.
-
Many C# classes and JavaScript helper functions in the sample code listings that you will find useful in your web chart and graphics development. These
classes and helper functions include math functions, color maps, chart and graphics wrappers, and the other useful utility functions. You can easily extract
these classes/functions and plug them into your own web applications.
Is This Book for You
You do not have to be an experienced .NET programmer or an expert in web development to use this book. I designed this book to be useful to people of all levels
of .NET and web programming experience. If you have some prior experience with the programming language C#, MVC, HTML, or JavaScript, you will be able to sit
down in front of your computer, start up Microsoft Visual Studio Community 2017 with ASP.NET Core 1.1 MVC, follow the examples provided in this book, and quickly
become proficient in web chart and graphics programming. For those of you who are already experienced .NET and web developers, I believe this book has much to
offer as well. A great deal of the information about chart programming in this book is not available in other ASP.NET MVC tutorial and reference books. In addition,
you can use most of the example programs directly in your own real-world application development. This book will provide you with a level of detail, explanation,
instruction, and sample program code that will enable you to do just about anything related to web chart and graphics development based on ASP.NET Core MVC
Framework.
.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
This chapter introduces the D3.js JavaScript library for manipulating documents based on data. It uses sample code to demonstrates how to use D3 to create
various 2D graphics objects in ASP.NET Core MVC web applications based on SVG.
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
This chapter illustrates how to create a variety of stock charts using two different JavaScript libraries: Google Charts and TechanJS. Google Charts is a powerful
charting package that provides a variety of chart types, including stock candlestick charts. TechanJS is a JavaScript library built on SVG and D3 for creating
interactive financial charts.
Chapter 7, 3D Graphics with WebGL
This chapter covers the basics of WebGL. WebGL takes advantage of the graphics hardware to accelerate the rendering and enables the display and manipulation of 3D
graphics on web pages by using JavaScript. This chapter demonstrates how to use WebGL to create simple geometry primitives and an animated 3D cube object.
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
This chapter begins with creating simple 3D surface charts and parametric charts with a specified colormap and a UV mapped texture in client side. It then illustrates
how to use the server-side data to create various custom 3D geometries and UV maps, which can then be used to create 3D charts. The chapter also introduces a JavaScript
3D charting library named vis-Graph3d and shows how to use the library to create simple 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.
