HTML and CSS Reference
In-Depth Information
Figure 4-23.
Canvas drawing after saving as a physical image file
As you can see in the title of the Photo Viewer, the file is saved with a GUID as the file name and
.png
as the file extension.
Creating Pie Charts Using Canvas Drawing Techniques
Now that you're familiar with the canvas API, it's time to develop a sample application that puts together
what you've learned so far. In this section, you develop an ASP.NET MVC application that allows you to
create pie charts using the HTML5 canvas.
Developers often resort to third-party charting components for their charting needs. However, at
times you may find canvas-based charting useful. The
<canvas>
element is an integral part of HTML5, so
you need not purchase a commercial component. Many third-party components are rich when it comes to
server-side programming, but they often lack client-side programming support. You can use canvas-based
charting when a chart is to be programmed using client-side code. Using canvas-based charting also lets
you avoid dependency on third-party charting software. Of course, you can resort to a third-party charting
component if your requirements call for it.
The example application's user interface is divided into two sections, as shown in Figure 4-24. The left
side of Figure 4-24 shows how a final pie chart looks in the browser, and the right side shows the area
where you can enter pie chart data such as sector names, values, and colors. You can also specify a title for
the chart along with a gradient background. Clicking the Draw Chart button draws a pie chart on the
canvas based on the data you enter. Clicking the Save Chart button does two things—it saves the pie chart
as an image file on the server, and it also saves the pie chart sector information in a SQL Server database.
This way, you can regenerate a pie chart based on the saved data and use the physical image file for other
purposes such as sending as e-mail attachments, embedding in documents, or presentations.
