HTML and CSS Reference
In-Depth Information
The code in Listing 4-28 declares three global arrays—
sectorNames
,
sectorValues[i]
, and
sectorColors[i]
—
for storing sector names, their values, and their colors, respectively.
Then the code determines whether a gradient is to be drawn by checking the state of the gradient
check box. Accordingly, either a linear gradient is drawn or the canvas is cleared using the
clearRect()
method. Notice how the
createLinearGradient()
method is used and how the color stops are defined. The
start color stop is picked up from the corresponding text box, but the end color stop is always white. Also
notice the use of the canvas's
save()
and
restore()
methods for saving and restoring the canvas state. You
restore the canvas settings to their initial values because you don't need a gradient for every drawing
operation.
Next, you use the jQuery
each()
method to iterate through all the HTML table rows. The three sector
arrays are populated by picking values from the respective table cells.
You then draw the title of the pie chart using
fillText()
method. Notice that the title has a shadow
configured using the
shadowOffsetX
,
shadowOffsetY
, and
shadowColor
properties. For the same reason
mentioned earlier, the canvas state is restored to the previous value.
Next, a
for
loop iterates through the
sectorValues[i]
array and draws sectors of the pie chart using the
arc()
method. Notice how the angle is calculated based on the total of the sector values and the value of a
sector being drawn.
Finally, the pie chart's legends are drawn. The associated
for
loop iterates through the
sectorColors[i]
array, and for every sector a rectangle is drawn with the sector color. A label is also drawn in front of the
rectangle.
Saving a Pie Chart
Once you draw a pie chart on the canvas, it can be saved to the database. The Save Chart button's
click
event handler contains jQuery code that calls the
SaveChart()
controller action method with the help of
the
$.ajax()
method. Listing 4-29 shows how this is done.
Listing 4-29.
Saving a Pie Chart on the Server
$('#btnSave').click(function () {
var data = canvas.toDataURL();
data = '"data": "' + data.replace('data:image/png;base64,', '') + '"';
var master = '"master": {"Title" :"' + $("#txtTitle").val() + '"}';
var details = '"details" : [';
for (var i = 0; i < sectorNames.length; i++) {
var sector = '{"SectorName" : "' + sectorNames[i] + '", "SectorValue":"' +
sectorValues[i] + '", "SectorColor":"' + sectorColors[i] + '"}';
details += sector
if ((i+1) != sectorNames.length) {
details += ",";
}
}
details += ']';
var finalData = '{' + data + ',' + master + ',' + details + '}';
$.ajax({
type: 'POST',
