HTML and CSS Reference
In-Depth Information
MVC View
The HTML5 canvas markup, as well as jQuery code that invokes the controller actions, resides in a view:
Index.aspx
. The HTML markup of the index view is shown in Listing 4-26. For the sake of clarity, unwanted
markup tags have been removed.
Listing 4-26.
HTML Markup of
Index.aspx
<div><strong>Chart Title :</strong></div>
<input type="text" id="txtTitle" size="87" class="textbox"/>
...
<table id="tblChartData" border="1" cellpadding="5">
<tr class="HeaderRow">
<th>Sector Name</th>
<th>Sector Value</th>
<th>Color</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" id="txtName"/></td>
<td><input type="text" id="txtValue"/></td>
<td><input type="text" id="txtColor"/></td>
<td><input type="button" id="btnAdd"/></td>
</tr>
</table>
<br />
<input type="checkbox" id="chkGradient" />
<span><strong>Show Gradient</strong></span>
...
<span><strong>Gradient Color : </strong></span><input type="text" id="txtGradient" />
...
<input id="btnDraw" type="button" value="Draw Chart" />
<input id="btnSave" type="button" value="Save Chart" />
...
<canvas id="MyCanvas" width="600" height="500"></canvas>
This HTML markup is straightforward and creates a canvas 600px wide and 500px high. The event
handlers for the Add, Draw Chart, and Save Chart buttons are wired in jQuery code and are discussed next.
Adding Chart Data
Adding pie chart data involves capturing sector information such as the sector name, its value, and its
color. Once captured, sector information is added to the HTML table (see Figure 4-24). The jQuery code
responsible for adding sector information to the HTML table is shown in Listing 4-27.
Listing 4-27.
Adding Chart Data to an HTML Table
$("#btnAdd").click(function () {
var row = "<tr>";
row += "<td>" + $("#txtName").val() + "</td>";
row += "<td>" + $("#txtValue").val() + "</td>";
