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
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
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 + '}';
type: 'POST',
Search WWH ::

Custom Search