Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
ASP.NET

Draw PIE Chart in ASP.Net Using HTML5 and jQuery

PIE Chart

Introduction

In my previous article “Web Painting Tool Using HTML 5 CANVAS in ASP.Net" I explained how to create a simple Web Painting tool using HTML5 and jQuery. I have used the program and using a few reference websites to draw a simple Pie Chart using HTML5 and jQuery.

There might be some question of why we need to draw our own Pie Chart since many free and third-party Pie Charts are available.

The answer to this question is that even if there are many free Pie Chart controls available, sometimes all the chart controls will not fulfill our requirements.

For example if we want to add our own watermarks to our Pie Chart, if we want to display our own alert Status Image Display, If we want to add our Company Logo to a Pie Chart and so on.

It will be hard to find the Pie Chart controls with all other extra requirement. The Customization will not be possible with other Pie Chart controls. Think if we draw and design our own Pie Chart controls and use that in our projects. There are no limitations to add all our features to draw and design our own Pie Chart. Here the limitation is up to our imagination.

For these reasons I thought to draw a Pie Chart with the following features using ASP.NET, HTML5 and jQuery.

In the Source Code Zip file you can find both Visual Studio 2010 and Visual Studio 2013 Solutions. You can use any solution depending on your Visual Studio Versions.

MY Pie Chart Features

PIE Chart Source Data

  1. Pie Chart Source Data: Plot data from a database, data table, list, XML or any source depending on your requirements. The only thing you must do is to get the data from your source and bind the result to a Dropdown List. (With value and text. Here the value will be an integer for plotting the value and text to display in the label.)

  2. Pie Chart Number of Category: Here I have limited the Pie chart Category display from a minimum of 1 to a maximum of 12. This means here dynamically we can load the plots category depending on the data source. But we are limited since the display plots value is within 12 plots. (But the user can redesign my code easily depending on requirements.)

  3. Pie chart Title Text: the User can add their own Pie Chart Title and dynamically change the titles if required. Here in my example I will draw the Title TextBox text at the bottom of the Pie Chart. (The user can redesign and customize depending on your requirements if needed).

  4. Pie Chart Water Mark Text: In some cases we need to add our company name as Water Mark to our Pie Chart. Here in my example I will draw the Water Mark TextBox text at the center of the Pie Chart. (The user can redesign and customize depending on requirements.)

  5. Pie Chart Company LOGO: The User can add their own company logo to the Pie Chart. (Here for example I added my own image as a log at the top-left corner. (The user can redesign and customize depending on requirements.)

  6. Pie Chart Alert Image Display: You can see from the article the first image has labels, I have displayed the Pie Chart label text and alert image. If the “Alert On” radio button is checked I will display the alert image. If the “Alert Off” radio button is clicked then the alert image will not be displayed.

    What is the use of the alert image?

    Let's consider an actual project. For example we need to display the Pie chart for a Manufacturing factory with production result as Good and Bad. For example if the production result for each quality value is above 300 then we need to display the alert Green image and if the quality value is below 300 then we need to display the Red image with label bars.

    This alert image will be easy to identify each quality result with good or bad. (Here for example I have used 2 quality checks and display Green and Red images, but users can customize depending on your requirements and add your own image and logic.)

  7. Save Pie Chart as Image: The user can save the Pie chart as an image.

    Here we can see the Pie Chart with another theme with a Blue base but without displaying the alert image.

    displaying the Alert Image

Code Part

Step 1

Click Start then select "All Programs" then open Visual Studio 2013 or Visual Studio 2010 depending on your installed versions, select either. In Visual Studio click "File" -> "New" -> "Project..." then seelct ASP.NET WEB Project then click Create.

Step 2

Add a new Webform and add a Canvas ELEMENT within the Section Tag.

  1. <SECTION style="border-style: solid; border-width: 2px; width: 1024px;">  
  2.   
  3. <CANVAS HEIGHT="740" WIDTH="1024px" ID="canvas">  
Your browser is not supporting HTML5 Canvas. Upgrade the browser to view this program or check with Chrome or in Firefox.
  1. </CANVAS>  
  2.   
  3. </SECTION>  

Step 3

Inside the JavaScript declare the global variables and initialize the Canvas in JavaScript. In the code I have used comments to easily understand the declarations.

  • Script Detail Explanations
  • Script Global variable

Chart Category Color Add

Adding the Pie Chart category colors to an array. Here I have fixed it to 12 colors and 12 data to add with the Pie Chart. If you want you can add more from here. Here I have 2 sets of color combinations, one with s Green base and one with a Blue base. The user can add more depending on requirements.

  1. var pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"]; // green Color Combinations  

  3.  var pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations  
Function to add all the Plot values: This method will return the final result to be the final sum of plot values that will be used to calculate and draw the Pie Chart Angle.
  1. function getChartTotal(){  
  2.       var chartTotalResult = 0;  
  3.       $('#DropDownList1 option').each(function () {  
  4.         
  5.          chartTotalResult += (typeof parseInt($(this).val()) == 'number') ? parseInt($(this).val()) : 0;  
  6.       });  
  7.   
  8.       return chartTotalResult;  
  9.   }  
Function to Draw Pie Chart: In the chart image button click I will call this JavaScript method. In this method I get a Pie Chart value and text from the Dropdown List and draw a Pie chart with those values. Inside this method I will check for all the features and add all the features to my Pie Chart. The user can customize and redesign depending on requirements.

Inside this method before each line I have added a comment that will explain each part in detail.
  1.  function plotData() {  
  2.      
  3.     var canvas;  
  4.     var ctx;  
  5.     var lastend = 0;  
  6.     //here get the Piechart Value Total result.This will be used to draw the Pie charts  
  7.     var chartTotalResult = getChartTotal();  
  8.   
  9.     //Declaring all the local variables which need to be draw Pie Chart  
  10.     var canWidth = 200;  
  11.     var Canheight = 150;  
  12.     var labelBarX = 100;  
  13.     var labelBarY = 100;  
  14.     var labelBarWidth = 100;  
  15.     var labelBarHeight = 100;  
  16.     var colorval = 0;  
  17.     // Decare Images to be displayed as the Alert Message  
  18.     var greenImage = new Image();  
  19.     var redImage = new Image();  
  20.     greenImage.src = 'images/Green.png';  
  21.     redImage.src = 'images/Red.png';  
  22.     var imagesize = 28;  
  23.     
  24.   
  25.     var alertCheckValue = 300;  
  26.     //Declare Rectangle Array to draw Pie Chart  
  27.     rect = {};  
  28.     rectInner = {};  
  29.   
  30.     //storing the Canvas Context to local variable ctx.This variable will be used to draw the Pie Chart  
  31.     canvas = document.getElementById("canvas");  
  32.     ctx = canvas.getContext("2d");  
  33.     //globalAlpha - > is used to display the 100% opoacity of chart .because at the bottom of the code I have used the opacity to 0.1 to display the water mark text with fade effect.  
  34.     ctx.globalAlpha = 1;  
  35.     //Every time we clear the canvas and draw the chart   
  36.     ctx.clearRect(0, 0, canvas.width, canvas.height);  
  37.   
  38.      
  39.   
  40.     //Setting Canvas width ,height and Rectangle size for drawing Piw chart and Label as rectangle.  
  41.     canWidth = (canvas.width/2)-150;  
  42.     Canheight = (canvas.height/2)-20;  
  43.      
  44.     rect.startX = canvas.width - 280;  
  45.     rect.startY = 20;  
  46.     rect.w = canWidth / 2+80;              
  47.     rect.h = canvas.height - 60;  
  48.   
  49.      
  50.   
  51.      
  52.   
  53.     //Here we add the font size and color to dispplay the Chart Title.User can change to your requirement .I have display the chart title at the bottom of the chart.  
  54.     var titelXVal=canWidth - 120;  
  55.     var titelYVal = canvas.height - 8;  
  56.   
  57.   ctx.font = '32pt Calibri';  
  58.   ctx.fillStyle = "#15317E";  
  59.   ctx.fillText($('#txtTitle').val(), titelXVal, titelYVal);  
  60.   
  61.     // Here we add the Logo Image and draw the Log Image at Pie Chart.  
  62.   var LogoImage = new Image();  
  63.   LogoImage.src = 'images/shanu.jpg';  
  64.   var LogoImgSize = 60;  
  65.   var logoXVal = 0;  
  66.   var logolYVal = 0;  
  67.   
  68.     //here we draw the Logo for teh chart and i have used the alpha to fade and display the Logo.  
  69.   ctx.globalAlpha = 0.6;  
  70.   
  71.   ctx.drawImage(LogoImage, logoXVal, logolYVal, LogoImgSize, LogoImgSize);  
  72.   
  73.   ctx.globalAlpha =1;  
  74.     // For Filling the Rectangle for outer brown Color   
  75.   ctx.fillStyle = "#7F462C";  
  76.   ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);  
  77.     //Drawing Inner White color Rectange with in Above brown rectangle to plot all the Lables with color,Text and Value.  
  78.   ctx.fillStyle = "#FFFFFF";  
  79.   rectInner.startX = rect.startX + 1;  
  80.   rectInner.startY = rect.startY + 1;  
  81.   rectInner.w = rect.w - 4;  
  82.   rectInner.h = rect.h - 4;  
  83.   
  84.   ctx.fillRect(rectInner.startX, rectInner.startY, rectInner.w, rectInner.h);  
  85.     // For inner Legend Drawing  
  86.   
  87.     //Setting the Lable Rectangle positions to draw lables.  
  88.     labelBarX = rect.startX+10;  
  89.     labelBarY =  rect.startY+10;  
  90.      labelBarWidth = 240;  
  91.      labelBarHeight = 46;  
  92.      var labelTextXVal = labelBarX+34;  
  93.      var labelTextYXVal = labelBarY + 26;  
  94.   
  95.      var alertImgXVal = labelBarX + 2;  
  96.      var alertImgYVal = labelBarY + 2;  
  97.       
  98.   
  99.     //Here using the Jquery dropdown each we get all the Dropdown items values one by one .Inside the loop we draw the Piw chart and plot all the Lable values.  
  100.      $('#DropDownList1 option').each(function () {  
  101.   
  102.          ctx.fillStyle = pirChartColor[colorval];  
  103.         ctx.beginPath();  
  104.         ctx.moveTo(canWidth, Canheight);  
  105.          //Here we draw the each Pic Chart arc with values and size.  
  106.         ctx.arc(canWidth, Canheight, Canheight, lastend, lastend +  
  107.           (Math.PI * 2 * (parseInt($(this).val()) / chartTotalResult)), false);  
  108.         ctx.lineTo(canWidth, Canheight);  
  109.         ctx.fill();  
  110.         lastend += Math.PI * 2 * (parseInt($(this).val()) / chartTotalResult);  
  111.          // here we draw the Lable and text.  
  112.         ctx.fillRect(labelBarX, labelBarY, labelBarWidth, labelBarHeight);  
  113.          // Here we check for the rdoAlert Status is On - If the Alert is on then we display the Alert Image as per the  Alert check value.  
  114.         if ($('#rdoAlaramOn:checked').val() == "rdoAlaramOn") {  
  115.             // Here we can see fo ever chart value we check with the condition .we have initially declare the alertCheckValue as 300.  
  116.             //so if the Chart Plot value is Greater then or equal to the check value then we display the Green Image else we display the Red Image.  
  117.             //user can change this to your requiremnt if needed.This is optioan function for the Pie Chart.  
  118.             if (parseInt($(this).val()) >= alertCheckValue) {  
  119.                 ctx.drawImage(greenImage, alertImgXVal, alertImgYVal, imagesize, imagesize);  
  120.             }  
  121.             else {  
  122.                 ctx.drawImage(redImage, alertImgXVal, alertImgYVal, imagesize, imagesize);  
  123.             }  
  124.         }  
  125.          //Draw the Pie Chart Label text and Value  
  126.         ctx.fillStyle = "#000000";  
  127.         ctx.font = '16pt Calibri';  
  128.         ctx.fillText($(this).text(), labelTextXVal, labelTextYXVal);  
  129.   
  130.          // To Increment and draw the next bar ,label Text and Alart Image.  
  131.          
  132.         labelBarY = labelBarY + labelBarHeight + 10;  
  133.         labelTextYXVal = labelBarY + labelBarHeight - 18;  
  134.         alertImgYVal = labelBarY + labelBarHeight - 40;  
  135.         colorval = colorval + 1;  
  136.   
  137.         
  138.   
  139.      });  
  140.   
  141.     //Add the Water Mark text to the Pie Chart.In the Text Box  you can add youre won name or your company name.here i have used the Text fade using the globalAlpha value set as 0.1.  
  142.      ctx.globalAlpha = 0.1;  
  143.      ctx.font = '72pt Calibri';  
  144.      ctx.fillStyle = "#000000";  
  145.      ctx.fillText($('#txtWatermark').val(), canWidth - 120, Canheight);  
  146. }  
Function to SAVE Pie Chart

This method is called in the save image button click. In this method after confirmation the Canvas Pie chart will be saved to the local computer.
  1. //Save as Image file  
  2. function ShanuSaveImage() {  
  3.     var m = confirm("Are you sure to Save ");  
  4.     if (m) {              
  5.         
  6.         var canvas = document.getElementById("canvas");  
  7.         document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");          
  8.         
  9.         var ImageSave = document.createElement('a');  
  10.         ImageSave.download = "shanuPIEImage.png";  
  11.         ImageSave.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;  
  12.         ImageSave.click();  
  13.         alert("Image Saved");  
  14. }  
Step 3

Bind Dropdown List Data from DataTable: In the page Load and in Button Click I will call the “BindDropDownList()” method to populate the Pie Chart values in dataTable and bind the final result to the Dropdown List.

Here for a simple example I have used the DataTable to populate the data and bind the result to a dropdown list. You can write your own code to bind the result to the Dropdown list. You can even change the source from Dropdown List to any control depending on your requirements.

The Dropdown list items will be obtained in JavaScript and using the values the Pie chart will be created dynamically.
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     BindDropDownList();  
  4. }  
  5.   
  6. protected void Button1_Click(object sender, EventArgs e)  
  7. {  
  8.     BindDropDownList();  
  9. }  
  10.   
  11. private void BindDropDownList()  
  12. {  
  13.     DataTable dt = new DataTable();  
  14.     dt.Clear();  
  15.     dt.Rows.Clear();  
  16.     dt.Columns.Add("Names");  
  17.     dt.Columns.Add("Frequency");  
  18.     dt.Columns["Frequency"].DataType = Type.GetType("System.Int32");  
  19.   
  20.   
  21.     Random random = new Random();             
  22.   
  23.         for (int i = 1; i <=Convert.ToInt32(txtChartCount.Text.Trim()); i++)  
  24.         {  
  25.             DataRow row = dt.NewRow();  
  26.             Int32 value = random.Next(100, 600);  
  27.             row["Names"] = "Pie-" + i.ToString() + " - (" + value+") ";  
  28.             row["Frequency"] = value;  
  29.             dt.Rows.Add(row);  
  30.         }  
  31.         DropDownList1.DataSource = dt;  
  32.         DropDownList1.DataTextField = "Names";  
  33.         DropDownList1.DataValueField = "Frequency";  
  34.         DropDownList1.DataBind();  
  35.         
  36.   
  37. }  
Complete ASPX Design Code:
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3.   
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head id="Head1" runat="server">  
  6.     <title>SHANU - >PIE Chart USIN HTML 5 CANVAS</title>  
  7.     <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />  
  8.     <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />  
  9.    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>  
  10.   
  11.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
  12.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  13.     
  14. <SCRIPT>  
  15. //public Canvas object to use in all the functions.  
  16.   
  17.     //Adding the Pic Chart Colors to array .Here i have fixed to 12 colors and 12 datas to add as Pic Chart.if you want you can add more from here.  
  18.    var pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"]; // green Color Combinations  
  19.  // var pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations  
  20.   
  21.     function getChartTotal(){  
  22.         var chartTotalResult = 0;  
  23.         $('#DropDownList1 option').each(function () {  
  24.           
  25.            chartTotalResult += (typeof parseInt($(this).val()) == 'number') ? parseInt($(this).val()) : 0;  
  26.         });  
  27.   
  28.         return chartTotalResult;  
  29.     }  
  30.   
  31.     function plotData() {  
  32.          
  33.         var canvas;  
  34.         var ctx;  
  35.         var lastend = 0;  
  36.         //here get the Piechart Value Total result.This will be used to draw the pie charts  
  37.         var chartTotalResult = getChartTotal();  
  38.   
  39.         //Declaring all the local variables which need to be draw Pie Chart  
  40.         var canWidth = 200;  
  41.         var Canheight = 150;  
  42.         var labelBarX = 100;  
  43.         var labelBarY = 100;  
  44.         var labelBarWidth = 100;  
  45.         var labelBarHeight = 100;  
  46.         var colorval = 0;  
  47.         // Decare Images to be displayed as the Alert Message  
  48.         var greenImage = new Image();  
  49.         var redImage = new Image();  
  50.         greenImage.src = 'images/Green.png';  
  51.         redImage.src = 'images/Red.png';  
  52.         var imagesize = 28;  
  53.         
  54.   
  55.         var alertCheckValue = 300;  
  56.         //Declare Rectangle Array to draw pie Chart  
  57.         rect = {};  
  58.         rectInner = {};  
  59.   
  60.         //storing the Canvas Context to local variable ctx.This variable will be used to draw the Pie Chart  
  61.         canvas = document.getElementById("canvas");  
  62.         ctx = canvas.getContext("2d");  
  63.         //globalAlpha - > is used to display the 100% opoacity of chart .because at the bottom of the code I have used the opacity to 0.1 to display the water mark text with fade effect.  
  64.         ctx.globalAlpha = 1;  
  65.         //Every time we clear the canvas and draw the chart   
  66.         ctx.clearRect(0, 0, canvas.width, canvas.height);  
  67.   
  68.          
  69.   
  70.         //Setting Canvas width ,height and Rectangle size for drawing Piw chart and Label as rectangle.  
  71.         canWidth = (canvas.width/2)-150;  
  72.         Canheight = (canvas.height/2)-20;  
  73.          
  74.         rect.startX = canvas.width - 280;  
  75.         rect.startY = 20;  
  76.         rect.w = canWidth / 2+80;              
  77.         rect.h = canvas.height - 60;  
  78.   
  79.          
  80.   
  81.          
  82.   
  83.         //Here we add the font size and color to dispplay the Chart Title.User can change to your requirement .I have display the chart title at the bottom of the chart.  
  84.         var titelXVal=canWidth - 120;  
  85.         var titelYVal = canvas.height - 8;  
  86.   
  87.       ctx.font = '32pt Calibri';  
  88.       ctx.fillStyle = "#15317E";  
  89.       ctx.fillText($('#txtTitle').val(), titelXVal, titelYVal);  
  90.   
  91.         // Here we add the Logo Image and draw the Log Image at PIE Chart.  
  92.       var LogoImage = new Image();  
  93.       LogoImage.src = 'images/shanu.jpg';  
  94.       var LogoImgSize = 60;  
  95.       var logoXVal = 0;  
  96.       var logolYVal = 0;  
  97.   
  98.         //here we draw the Logo for teh chart and i have used the alpha to fade and display the Logo.  
  99.       ctx.globalAlpha = 0.6;  
  100.   
  101.       ctx.drawImage(LogoImage, logoXVal, logolYVal, LogoImgSize, LogoImgSize);  
  102.   
  103.       ctx.globalAlpha =1;  
  104.         // For Filling the Rectangle for outer brown Color   
  105.       ctx.fillStyle = "#7F462C";  
  106.       ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);  
  107.         //Drawing Inner White color Rectange with in Above brown rectangle to plot all the Lables with color,Text and Value.  
  108.       ctx.fillStyle = "#FFFFFF";  
  109.       rectInner.startX = rect.startX + 1;  
  110.       rectInner.startY = rect.startY + 1;  
  111.       rectInner.w = rect.w - 4;  
  112.       rectInner.h = rect.h - 4;  
  113.   
  114.       ctx.fillRect(rectInner.startX, rectInner.startY, rectInner.w, rectInner.h);  
  115.         // For inner Legend Drawing  
  116.   
  117.         //Setting the Lable Rectangle positions to draw lables.  
  118.         labelBarX = rect.startX+10;  
  119.         labelBarY =  rect.startY+10;  
  120.          labelBarWidth = 240;  
  121.          labelBarHeight = 46;  
  122.          var labelTextXVal = labelBarX+34;  
  123.          var labelTextYXVal = labelBarY + 26;  
  124.   
  125.          var alertImgXVal = labelBarX + 2;  
  126.          var alertImgYVal = labelBarY + 2;  
  127.           
  128.   
  129.         //Here using the Jquery dropdown each we get all the Dropdown items values one by one .Inside the loop we draw the Piw chart and plot all the Lable values.  
  130.          $('#DropDownList1 option').each(function () {  
  131.   
  132.              ctx.fillStyle = pirChartColor[colorval];  
  133.             ctx.beginPath();  
  134.             ctx.moveTo(canWidth, Canheight);  
  135.              //Here we draw the each Pic Chart arc with values and size.  
  136.             ctx.arc(canWidth, Canheight, Canheight, lastend, lastend +  
  137.               (Math.PI * 2 * (parseInt($(this).val()) / chartTotalResult)), false);  
  138.             ctx.lineTo(canWidth, Canheight);  
  139.             ctx.fill();  
  140.             lastend += Math.PI * 2 * (parseInt($(this).val()) / chartTotalResult);  
  141.              // here we draw the Lable and text.  
  142.             ctx.fillRect(labelBarX, labelBarY, labelBarWidth, labelBarHeight);  
  143.              // Here we check for the rdoAlert Status is On - If the Alert is on then we display the Alert Image as per the  Alert check value.  
  144.             if ($('#rdoAlaramOn:checked').val() == "rdoAlaramOn") {  
  145.                 // Here we can see fo ever chart value we check with the condition .we have initially declare the alertCheckValue as 300.  
  146.                 //so if the Chart Plot value is Greater then or equal to the check value then we display the Green Image else we display the Red Image.  
  147.                 //user can change this to your requiremnt if needed.This is optioan function for the Pie Chart.  
  148.                 if (parseInt($(this).val()) >= alertCheckValue) {  
  149.                     ctx.drawImage(greenImage, alertImgXVal, alertImgYVal, imagesize, imagesize);  
  150.                 }  
  151.                 else {  
  152.                     ctx.drawImage(redImage, alertImgXVal, alertImgYVal, imagesize, imagesize);  
  153.                 }  
  154.             }  
  155.              //Draw the Pie Chart Label text and Value  
  156.             ctx.fillStyle = "#000000";  
  157.             ctx.font = '16pt Calibri';  
  158.             ctx.fillText($(this).text(), labelTextXVal, labelTextYXVal);  
  159.   
  160.              // To Increment and draw the next bar ,label Text and Alart Image.  
  161.              
  162.             labelBarY = labelBarY + labelBarHeight + 10;  
  163.             labelTextYXVal = labelBarY + labelBarHeight - 18;  
  164.             alertImgYVal = labelBarY + labelBarHeight - 40;  
  165.             colorval = colorval + 1;  
  166.   
  167.             
  168.   
  169.          });  
  170.   
  171.         //Add the Water Mark text to the Pie Chart.In the Text Box  you can add youre won name or your company name.here i have used the Text fade using the globalAlpha value set as 0.1.  
  172.          ctx.globalAlpha = 0.1;  
  173.          ctx.font = '72pt Calibri';  
  174.          ctx.fillStyle = "#000000";  
  175.          ctx.fillText($('#txtWatermark').val(), canWidth - 120, Canheight);  
  176.     }  
  177.   
  178.     //Save as Image file  
  179.     function ShanuSaveImage() {  
  180.         var m = confirm("Are you sure to Save ");  
  181.         if (m) {  
  182.               
  183.             
  184.             var canvas = document.getElementById("canvas");  
  185.             document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");          
  186.             
  187.             var ImageSave = document.createElement('a');  
  188.             ImageSave.download = "shanuPIEImage.png";  
  189.             ImageSave.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;  
  190.             ImageSave.click();  
  191.             alert("Image Saved");  
  192.         }  
  193.     }  
  194.         
  195.   
  196.     plotData();  
  197.     </script>  
  198.     </head>  
  199. <body>  
  200.     <form id="form1" runat="server">  
  201.         <img src="images/blank.gif" alt="" width="1" height="10" />  
  202.     <table width="99%" style=" border-bottom:3px solid #3273d5;">  
  203.         <tr>  
  204.   
  205.             <td width=" 250">  
  206.         <table width="99%">  
  207.             <tr>  
  208.                 <td>  
  209.                     Created by SHANU  
  210.                       
  211. </td>  
  212.                  
  213.   
  214.             </tr>  
  215.         </table>  
  216.         </td>  
  217.         <td class="style1" align="center">  
  218.             <h3>ASP.NET PIE Chart USING HTML5 and Jquery</h3>  
  219.   
  220.              
  221.         </td>  
  222.              
  223.         </tr>  
  224.     </table>  
  225.     <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  226.            <table   style="  padding: 5px;width: 99%;table-layout:fixed; border-bottom:3px solid #3273d5;"">  
  227.              <tr>  
  228.                  <td >  
  229.                     <table  width="100%" >  
  230.                      <tr>          
  231.     
  232.              <td  style="background-color:#ECF3F4;"" >  
  233.                  Enter Pie Chart Draw Count:  
  234.   
  235.              </td>  
  236.              <td width="90">  
  237.   
  238.             
  239.         <asp:TextBox ID="txtChartCount" runat="server" Height="26px" MaxLength="2" Width="90"  
  240. onkeypress="if(event.keyCode<48 || event.keyCode>57)event.returnValue=false;" >7</asp:TextBox><br />  
  241.                  <asp:RangeValidator ID="RangeValidator1" Type="Integer" MinimumValue="1" MaximumValue="12" ControlToValidate="txtChartCount" runat="server" ErrorMessage="No <= 12"></asp:RangeValidator>   
  242.                     </td>  
  243.              <td  style="background-color:#ECF3F4;"" >  
  244.                  Click Button to fill PIE Chart Data:  
  245.   
  246.              </td>  
  247.              <td>  
  248.                     <asp:DropDownList ID="DropDownList1" runat="server" Width="140px" Height="36px">  
  249.         </asp:DropDownList>  
  250.                   </td>  
  251.        <td>  
  252.         <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Populate List" BackColor="#336699" BorderColor="White" BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" ForeColor="#CCFFFF" Height="37px" />  
  253.            </td>  
  254.                 <td  style="background-color:#ECF3F4;" >  
  255.                 Click to Draw Dynamic Pic Chart:  
  256.   
  257.              </td>  
  258.              <td rowspan="2">  
  259.   
  260.              
  261.    <img src="images/piechart.png"  onClick="plotData()" alt="Click to Draw PIE Chart" />  
  262.                    </td>  
  263.                   <td  style="background-color:#ECF3F4;"" rowspan="2">  
  264.                Save Pic Chart:  
  265.   
  266.              </td>  
  267.              <td rowspan="2">  
  268.      <img src="images/Save.png"  onClick="ShanuSaveImage()" alt="Click to Save PIE Chart" />  
  269.                  </td>  
  270.                    
  271.                       </tr>  
  272.                           
  273.   
  274.                             <tr>          
  275.     
  276.              <td  style="background-color:#ECF3F4;"" >  
  277.                  Enter Chart Title:  
  278.   
  279.              </td>  
  280.              <td >  
  281.   
  282.             
  283.         <asp:TextBox ID="txtTitle" runat="server" Height="26px" MaxLength="40" Width="120" >SHANU PIE Chart</asp:TextBox><br />  
  284.                  </td>  
  285.                                  <td  style="background-color:#ECF3F4;"" >  
  286.                                      Chart WaterMark:  
  287.   
  288.              </td>  
  289.              <td >  
  290.   
  291.             
  292.         <asp:TextBox ID="txtWatermark" runat="server" Height="26px" MaxLength="40" Width="120px" >SHANU</asp:TextBox><br />  
  293.                  </td>  
  294.                                  <td  style="background-color:#ECF3F4;"" >  
  295.                                      Alert Status </td>  
  296.              <td >  
  297.   
  298.             
  299.                  <asp:RadioButton ID="rdoAlaramOn" runat="server" Checked="True" GroupName="Alaram" Text="Alert On" />  
  300.                  <asp:RadioButton ID="rdoAlaramOff" runat="server" GroupName="Alaram" Text="Alert Off" />  
  301.   
  302.             
  303.                  <br />  
  304.                  </td>  
  305.                         </tr>  
  306.         </table>  
  307.                      </td>  
  308.                  </tr>  
  309.                </table>  
  310.                  <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  311.                    <table width="99%" class="search">            
  312.     <table style=" solid 2px #3273d5; padding: 5px;width: 99%;table-layout:fixed; border-top:3px solid #3273d5;"">   
  313.          <tr>  
  314.              <td align="center">  
  315. <SECTION style="border-style: solid; border-width: 2px; width: 1024px;">  
  316.   
  317. <CANVAS HEIGHT="740" WIDTH="1024px" ID="canvas">  
  318. Your browser is not supporting HTML5 Canvas .Upgrade Browser to view this program or check with Chrome or in Firefox.  
  319. </CANVAS>  
  320.   
  321. </SECTION>  
  322.                  </td>  
  323.              </tr>  
  324.         </table>  
  325.     </form>  
  326.   
  327. </body>  
  328. </html>  
  • Points of Interest

    Working with HTML5 is really fun. I hope you enjoyed reading my article. I will be happy if someone benefits from my article.

    Tested browsers:
  • Chrome
  • Firefox
  • IE10

Up Next
    Ebook Download
    View all
    Learn
    View all