Draw ASP.Net Bar Chart Using HTML5 and jQuery

Introduction

In my previous article “Draw ASP.NET Pie Chart Using HTML5 and jQuery “http://www.c-sharpcorner.com/UploadFile/asmabegam/draw-pie-chart-in-Asp-Net-using-html5-and-jquery/ I explained how to create a simple Web Pie Chart using HTML5 and jQuery. In this article let's see how to draw our own Bar Chart using HTML5 and jQuery in ASP.NET.

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 version. In the source file I have attached both of my previous Pie Chart samples and the new Bar Chart page.

MY Bar Chart Features



Pie Chart Source Data

The plot data from a database / Data Table / List / XML file or any source depending on your requirements. The only thing you need to do is get the data from your source and bind the result to a Dropdown List. (With the value and text. Here the value will be an integer for plotting the value and the text will be to be displayed in the label.)

Bar Chart Number of Category

Here I have limited the Bar 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 limited, since the display plots value is within 12 plots. (But the user can redesign the code easily depending on requirements.)

Bar Chart Title Text

The user can add their own Bar 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 Bar Chart. (The user can redesign and customize this depending on requirements.)

Bar Chart Water Mark Text

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

Bar Chart Company LOGO

The user can add their own company logo to the Bar Chart. (Here for the sample I have added my own image as a log at the top-left corner. (The user can redesign and customize this depending on your requirements if needed.).

Bar Chart Alert Image Display: You can see from the article the first Image has Labels, I have displayed the Bar 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 an Alert Image?

Let's consider a real project. For example we need to display a Pie Chart for a manufacturing factory with production results 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 as good or bad. (Here for a sample I have used 2 quality check and displayed using Green and Red images but users can customize depending on requirements and add your own image and logic.)

Bar Chart Color Theme

The user can select any one Color Theme for the Bar Chart as Green Theme or Blue Theme.

Save Bar Chart as Image

The user can save the Pie chart as an image.

Here we can see a Bar Chart with another theme with a Blue base but without displaying the Alert Image.


Code Part

Step 1

Click Start program then open Visual Studio 2013 or Visual Studio 2010 (depending on your installed version), select either one. Click "File" -> "New" -> "Project..." then select ASP.NET WEB Project then click Create.

Step 2

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

<SECTION style="border-style: solid; border-width: 2px; width: 1024px;">
   <CANVAS HEIGHT="740" WIDTH="1024px" ID="canvas">
      Your browser is not supporting HTML5 Canvas .Upgrade Browser to view this program or check with Chrome or in Firefox.
   </CANVAS>
</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 12 colors and 12 data items to be added to the Pie Chart. If you want you can add more from here. Here I have 2 sets of color combination, one with a Green base and one with a Blue base. The user can add others depending on requirements.

To dynamically change the Bar Chart Theme I have created a method and in this method I will check for the checked radio button and change the color theme for the Chart.

var pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"]; // green Color Combinations
// var pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations
function ChangeChartColor()
{

   if ($('#rdoColorGreen:checked').val() == "rdoColorGreen") {
      pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32",       "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"];       // green Color Combinations
   }
   else
   {
      pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F",      "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"];       // Blue Color Combinations
   }
}

Function to Draw Bar Chart

In the chart Image Button Click I will call this JavaScript method. In this method I get a Bar Chart value and text from the Dropdown List and draw a Bar Chart with those values. Inside this method I will check for all the features and add all the features to my Bar Chart. The user can customize and redesign that depending on requirements.

Inside this method before each line I have added a comment that will explain each part in detail.

function plotData() {
   ChangeChartColor();
   //During the databind i have store the Minumum and Maximum value of the Drop Downlist.
   I will use this Maximum and Minumum value to draw the plots.
   var minDataVal = $('#hidListMin').val();
   var maxDataVal = $('#hidListMax').val();

   var NoofPlots = $("#DropDownList1 option").length;


   var canvas;
   var ctx;
   var lastend = 0;
   //here get the Piechart Value Total result.This will be used to draw the pie charts
   var chartTotalResult = getChartTotal();

   //Declaring all the local variables which need to be draw Pie Chart
   var canWidth = 200;
   var Canheight = 150;
   var labelBarX = 100;
   var labelBarY = 100;
   var labelBarWidth = 100;
   var labelBarHeight = 100;
   var colorval = 0;
   // Decare Images to be displayed as the Alert Message
   var greenImage = new Image();
   var redImage = new Image();
   greenImage.src = 'images/Green.png';
   redImage.src = 'images/Red.png';
   var imagesize = 20;


   var alertCheckValue = 300;
   //Declare Rectangle Array to draw pie Chart
   rect = {};
   rectInner = {};

   //storing the Canvas Context to local variable ctx.This variable will be used to draw the Pie Chart
   canvas = document.getElementById("canvas");
   ctx = canvas.getContext("2d");
   //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.
   ctx.globalAlpha = 1;
   //Every time we clear the canvas and draw the chart
   ctx.clearRect(0, 0, canvas.width, canvas.height);


   //Setting Canvas width ,height and Rectangle size for drawing Piw chart and Label as rectangle.
   canWidth = (canvas.width/2)-150;
   Canheight = (canvas.height/2)-20;

   //rect.startX = 4;
   //rect.startY = 46;
   //rect.w = canWidth / 3 +40;
   //rect.h = canvas.height - 60;

   rect.startX = canvas.width-((canvas.width/5)-40);
   rect.startY = 30;
   rect.w = canWidth / 3 + 40;
   rect.h = canvas.height - 60;


   //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.
   var titelXVal=canWidth - 120;
   var titelYVal = 40;

   ctx.font = '32pt Calibri';
   ctx.fillStyle = "#15317E";
   ctx.fillText($('#txtTitle').val(), titelXVal, titelYVal);

   // Here we add the Logo Image and draw the Log Image at PIE Chart.
   var LogoImage = new Image();
   LogoImage.src = 'images/shanu.jpg';
   var LogoImgSize = 40;
   var logoXVal = 0;
   var logolYVal = canvas.height-42;

   //here we draw the Logo for teh chart and i have used the alpha to fade and display the Logo.
   ctx.globalAlpha = 0.6;

   ctx.drawImage(LogoImage, logoXVal, logolYVal, LogoImgSize, LogoImgSize);

   ctx.globalAlpha =1;
   // For Filling the Rectangle for outer brown Color
   ctx.fillStyle = "#7F462C";
   ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
   //Drawing Inner White color Rectange with in Above brown rectangle to plot all the Lables with color,Text and Value.
   ctx.fillStyle = "#FFFFFF";
   rectrectInner.startX = rect.startX + 1;
   rectrectInner.startY = rect.startY + 1;
   rectrectInner.w = rect.w - 2;
   rectrectInner.h = rect.h - 2;


   //-- draw bar X-Axis and Y-Axis Line
   var yLineStartPosition = 100;
   var yLineEndPosition = 40;
   var yLineHeight = canvas.height - 50;
   var xLineWidth = rect.startX - 40;

   ctx.moveTo(yLineStartPosition, yLineHeight);
   ctx.lineTo(xLineWidth, yLineHeight);
   ctx.stroke();

   ctx.moveTo(yLineStartPosition, yLineHeight);
   ctx.lineTo(yLineStartPosition, yLineEndPosition);
   ctx.stroke();


   // To Darw the Xval Frequency vertical Line
   var resultMaxMin = maxDataVal - minDataVal;

   //Callculation for ploting the xval data
   var MeasurementXAxisValue = parseInt(resultMaxMin / NoofPlots);
   var widthcalculation = parseInt(((parseInt(xLineWidth)-100) / NoofPlots));

   var XvalPosition = yLineStartPosition + widthcalculation;
   var historgramHeigt = yLineHeight;
   //alert(resultMaxMin);
   //alert(MeasurementXAxisValue);

   //alert(widthcalculation);

   //alert(XvalPosition);
   var maxFreqValue = parseInt(MeasurementXAxisValue + resultMaxMin / NoofPlots + (resultMaxMin / NoofPlots) * 0.2);
   var minFreqValue = 0;
   // alert(maxFreqValue);
   //--

   // Calculating For plotting the Yval Data
   var yValMeasurementYAxisValue = parseInt(maxDataVal / NoofPlots);
   var yValheightcalculation = parseInt(historgramHeigt / NoofPlots);
   var yValXvalPosition = parseInt(yValheightcalculation);
   var yvalPlotStartPoint = parseInt(yLineStartPosition);
   var plotYvals = parseInt(maxDataVal);// + (parseInt(maxDataVal) * 0.2);

   ctx.fillRect(rectInner.startX, rectInner.startY, rectInner.w, rectInner.h);
   // For inner Legend Drawing

   //Setting the Lable Rectangle positions to draw lables.
   labelBarX = rect.startX+10;
   labelBarY = rect.startY+10;
   labelBarWidth = 140;
   labelBarHeight = 26;
   var labelTextXVal = labelBarX+24;
   var labelTextYXVal = labelBarY + 20;

   var alertImgXVal = labelBarX + 2;
   var alertImgYVal = labelBarY + 2;


   //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.
   $('#DropDownList1 option').each(function () {


   // For Ploting the Xais Value
   // MeasurementXAxisValue = parseInt(MeasurementXAxisValue + resultMaxMin / NoofPlots + (resultMaxMin / NoofPlots) * 0.2);

   //alert(XvalPosition)

   ctx.moveTo(XvalPosition, historgramHeigt);
   ctx.lineTo(XvalPosition, historgramHeigt + 15);
   ctx.stroke();
   ctx.fillStyle = "#000000";
   ctx.font = '10pt Calibri';

   ctx.fillText('Bar' + parseInt(colorval + 1), XvalPosition - 28, historgramHeigt + 24);


   // ***** Her we draw the bar Chart
   // alert($(this).val())
   var barRatio = parseInt($(this).val()) / maxDataVal;
   //alert(ratio)
   var barfillHeight = parseInt(barRatio * (parseInt(yLineHeight - yLineStartPosition)));
   // alert(barHeight)


   ctx.fillRect(XvalPosition - widthcalculation - 1, yLineHeight - 1, widthcalculation + 2, -barfillHeight);


   ctx.fillStyle = pirChartColor[colorval];
   // e.DrawRectangle(B1pen, XvalPosition_Start, Ystartval, XvalPosition_new, YEndval);
   ctx.fillRect(XvalPosition - widthcalculation, yLineHeight, widthcalculation, -barfillHeight);

   //ctx.fillRect(XvalPosition - widthcalculation, yLineHeight, widthcalculation, yLineHeight- parseInt($(this).val()));
   // *****

   ctx.fillStyle = "#000000";
   ctx.font = '12pt Calibri';
   ctx.fillText($(this).val(), XvalPosition - widthcalculation + 20 ,yLineHeight- barfillHeight-8);
   ctx.fillStyle = pirChartColor[colorval];

   //
   //To increment and plot the next XVal position this will be used in drawing bar graph aswell
   XvalPositionXvalPosition = XvalPosition + widthcalculation;

   //to incrment the yVal Positions
   yValXvalPositionyValXvalPosition = yValXvalPosition + yValheightcalculation;


   // //End of all Increments

   // here we draw the Lable and text.
   ctx.fillRect(labelBarX, labelBarY, labelBarWidth, labelBarHeight);
   // 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.
   if ($('#rdoAlaramOn:checked').val() == "rdoAlaramOn") {
      // Here we can see fo ever chart value we check with the condition .we have initially declare the alertCheckValue as 300.
      //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.
      //user can change this to your requiremnt if needed.This is optioan function for the Pie Chart.
      if (parseInt($(this).val()) >= alertCheckValue) {
         ctx.drawImage(greenImage, alertImgXVal, alertImgYVal, imagesize, imagesize);
      }
      else {
         ctx.drawImage(redImage, alertImgXVal, alertImgYVal, imagesize, imagesize);
      }
   }
   //Draw the Pie Chart Label text and Value
   ctx.fillStyle = "#000000";
   ctx.font = '10pt Calibri';
   ctx.fillText($(this).text(), labelTextXVal, labelTextYXVal);

   // To Increment and draw the next bar ,label Text and Alart Image.

   labelBarYlabelBarY = labelBarY + labelBarHeight + 10;
   labelTextYXVal = labelBarY + labelBarHeight - 8;
   alertImgYVal = labelBarY + labelBarHeight - 24;
   colorvalcolorval = colorval + 1;

   });

   //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.
   ctx.globalAlpha = 0.1;
   ctx.font = '72pt Calibri';
   ctx.fillStyle = "#000000";
   ctx.fillText($('#txtWatermark').val(), canWidth - 120, Canheight);
}

Step 4

Bind Dropdown List Data from DataTable

In the page Load and in the Button Click I will call the “BindDropDownList()” method to populate the Pie Chart values in the 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 results to the dropdown list.

You can write your own code to bind the results to the Dropdown list. You can even change the source from Dropdown List to any control depending on your requirements.

This Dropdown list items will be obtained in JavaScript and using the values, the Pie chart will be created dynamically.

protected void Page_Load(object sender, EventArgs e)
{
   BindDropDownList();
}

protected void Button1_Click(object sender, EventArgs e)
{
   BindDropDownList();
}

private void BindDropDownList()
{
   DataTable dt = new DataTable();
   dt.Clear();
   dt.Rows.Clear();
   dt.Columns.Add("Names");
   dt.Columns.Add("Frequency");
   dt.Columns["Frequency"].DataType = Type.GetType("System.Int32");
   Random random = new Random();
   for (int i = 1; i <=Convert.ToInt32(txtChartCount.Text.Trim()); i++)
   {
      DataRow row = dt.NewRow();
      Int32 value = random.Next(100, 600);
      row["Names"] = "Pie-" + i.ToString() + " - (" + value+") ";
      row["Frequency"] = value;
      dt.Rows.Add(row);
   }
   DropDownList1.DataSource = dt;
   DropDownList1.DataTextField = "Names";
   DropDownList1.DataValueField = "Frequency";
   DropDownList1.DataBind();
}

Complete ASPX Design Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head id="Head1" runat="server">
         <title>SHANU - >PIE Chart USIN HTML 5 CANVAS</title>
      <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
      <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
      <meta http-equiv="x-ua-compatible" content="IE=9" />
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <SCRIPT>
         //public Canvas object to use in all the functions.

        //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.                         var pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209",          "#E67451", "#728C00", "#617C58", "#64E986"]; // green Color Combinations
            // var pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA",             "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations

         function getChartTotal(){
            var chartTotalResult = 0;
            $('#DropDownList1 option').each(function () {

               chartTotalResult += (typeof parseInt($(this).val()) == 'number') ? parseInt($(this).val()) : 0;
            });

            return chartTotalResult;
         }
         function ChangeChartColor() {

            if ($('#rdoColorGreen:checked').val() == "rdoColorGreen") {                       pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D",               "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"]; // green Color Combinations
            }
            else {
               pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F",                "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations
            }
         }
         ChangeChartColor();
         function plotData() {
      ChangeChartColor();
      //During the databind i have store the Minumum and Maximum value of the Drop Downlist.      I will use this Maximum and Minumum value to draw the plots.
      var minDataVal = $('#hidListMin').val();
      var maxDataVal = $('#hidListMax').val();

      var NoofPlots = $("#DropDownList1 option").length;

      var canvas;
      var ctx;
      var lastend = 0;
      //here get the Piechart Value Total result.This will be used to draw the pie charts
      var chartTotalResult = getChartTotal();

      //Declaring all the local variables which need to be draw Pie Chart
      var canWidth = 200;
      var Canheight = 150;
      var labelBarX = 100;
      var labelBarY = 100;
      var labelBarWidth = 100;
      var labelBarHeight = 100;
      var colorval = 0;
      // Decare Images to be displayed as the Alert Message
      var greenImage = new Image();
      var redImage = new Image();
      greenImage.src = 'images/Green.png';
      redImage.src = 'images/Red.png';
      var imagesize = 20;


      var alertCheckValue = 300;
      //Declare Rectangle Array to draw pie Chart
      rect = {};
      rectInner = {};

      //storing the Canvas Context to local variable ctx.This variable will be used to draw the Pie Chart
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      //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.
      ctx.globalAlpha = 1;
      //Every time we clear the canvas and draw the chart
      ctx.clearRect(0, 0, canvas.width, canvas.height);


      //Setting Canvas width ,height and Rectangle size for drawing Piw chart and Label as rectangle.
      canWidth = (canvas.width/2)-150;
      Canheight = (canvas.height/2)-20;

      //rect.startX = 4;
      //rect.startY = 46;
      //rect.w = canWidth / 3 +40;
      //rect.h = canvas.height - 60;

      rect.startX = canvas.width-((canvas.width/5)-40);
      rect.startY = 30;
      rect.w = canWidth / 3 + 40;
      rect.h = canvas.height - 60;

      //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.
      var titelXVal=canWidth - 120;
      var titelYVal = 40;

      ctx.font = '32pt Calibri';
      ctx.fillStyle = "#15317E";
      ctx.fillText($('#txtTitle').val(), titelXVal, titelYVal);

      // Here we add the Logo Image and draw the Log Image at PIE Chart.
      var LogoImage = new Image();
      LogoImage.src = 'images/shanu.jpg';
      var LogoImgSize = 40;
      var logoXVal = 0;
      var logolYVal = canvas.height-42;

      //here we draw the Logo for teh chart and i have used the alpha to fade and display the Logo.
      ctx.globalAlpha = 0.6;

      ctx.drawImage(LogoImage, logoXVal, logolYVal, LogoImgSize, LogoImgSize);

      ctx.globalAlpha =1;
      // For Filling the Rectangle for outer brown Color
      ctx.fillStyle = "#7F462C";
      ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
      //Drawing Inner White color Rectange with in Above brown rectangle to plot all the Lables with color,Text and Value.
      ctx.fillStyle = "#FFFFFF";
      rectrectInner.startX = rect.startX + 1;
      rectrectInner.startY = rect.startY + 1;
      rectrectInner.w = rect.w - 2;
      rectrectInner.h = rect.h - 2;

      //-- draw bar X-Axis and Y-Axis Line
      var yLineStartPosition = 100;
      var yLineEndPosition = 40;
      var yLineHeight = canvas.height - 50;
      var xLineWidth = rect.startX - 40;

      ctx.moveTo(yLineStartPosition, yLineHeight);
      ctx.lineTo(xLineWidth, yLineHeight);
      ctx.stroke();

      ctx.moveTo(yLineStartPosition, yLineHeight);
      ctx.lineTo(yLineStartPosition, yLineEndPosition);
      ctx.stroke();
      // To Darw the Xval Frequency vertical Line
      var resultMaxMin = maxDataVal - minDataVal;

      //Callculation for ploting the xval data
      var MeasurementXAxisValue = parseInt(resultMaxMin / NoofPlots);
      var widthcalculation = parseInt(((parseInt(xLineWidth)-100) / NoofPlots));

      var XvalPosition = yLineStartPosition + widthcalculation;
      var historgramHeigt = yLineHeight;
      var maxFreqValue = parseInt(MeasurementXAxisValue + resultMaxMin / NoofPlots + (resultMaxMin / NoofPlots) * 0.2);
      var minFreqValue = 0;
      //--

      // Calculating For plotting the Yval Data
      var yValMeasurementYAxisValue = parseInt(maxDataVal / NoofPlots);
      var yValheightcalculation = parseInt(historgramHeigt / NoofPlots);
      var yValXvalPosition = parseInt(yValheightcalculation);
      var yvalPlotStartPoint = parseInt(yLineStartPosition);
      var plotYvals = parseInt(maxDataVal);// + (parseInt(maxDataVal) * 0.2);

      ctx.fillRect(rectInner.startX, rectInner.startY, rectInner.w, rectInner.h);
      // For inner Legend Drawing

      //Setting the Lable Rectangle positions to draw lables.
      labelBarX = rect.startX+10;
      labelBarY = rect.startY+10;
      labelBarWidth = 140;
      labelBarHeight = 26;
      var labelTextXVal = labelBarX+24;
      var labelTextYXVal = labelBarY + 20;

      var alertImgXVal = labelBarX + 2;
      var alertImgYVal = labelBarY + 2;

      //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.
      $('#DropDownList1 option').each(function () {


      // For Ploting the Xais Value
      // MeasurementXAxisValue = parseInt(MeasurementXAxisValue + resultMaxMin / NoofPlots + (resultMaxMin / NoofPlots) * 0.2);

      //alert(XvalPosition)

      ctx.moveTo(XvalPosition, historgramHeigt);
      ctx.lineTo(XvalPosition, historgramHeigt + 15);
      ctx.stroke();
      ctx.fillStyle = "#000000";
      ctx.font = '10pt Calibri';

      ctx.fillText('Bar' + parseInt(colorval + 1), XvalPosition - 28, historgramHeigt + 24);


      // ***** Her we draw the bar Chart
      // alert($(this).val())
      var barRatio = parseInt($(this).val()) / maxDataVal;
      //alert(ratio)
      var barfillHeight = parseInt(barRatio * (parseInt(yLineHeight - yLineStartPosition)));
      // alert(barHeight)
      ctx.fillRect(XvalPosition - widthcalculation - 1, yLineHeight - 1, widthcalculation + 2, -barfillHeight);
      ctx.fillStyle = pirChartColor[colorval];
      // e.DrawRectangle(B1pen, XvalPosition_Start, Ystartval, XvalPosition_new, YEndval);
      ctx.fillRect(XvalPosition - widthcalculation, yLineHeight, widthcalculation, -barfillHeight);

      //ctx.fillRect(XvalPosition - widthcalculation, yLineHeight, widthcalculation, yLineHeight- parseInt($(this).val()));
      // *****

      ctx.fillStyle = "#000000";
      ctx.font = '12pt Calibri';
      ctx.fillText($(this).val(), XvalPosition - widthcalculation + 20 ,yLineHeight- barfillHeight-8);
      ctx.fillStyle = pirChartColor[colorval];

      //
      //To increment and plot the next XVal position this will be used in drawing bar graph aswell
      XvalPositionXvalPosition = XvalPosition + widthcalculation;

      //to incrment the yVal Positions
      yValXvalPositionyValXvalPosition = yValXvalPosition + yValheightcalculation;

      // //End of all Increments

      // here we draw the Lable and text.
      ctx.fillRect(labelBarX, labelBarY, labelBarWidth, labelBarHeight);
      // 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.
      if ($('#rdoAlaramOn:checked').val() == "rdoAlaramOn") {
         // Here we can see fo ever chart value we check with the condition .we have initially          declare the alertCheckValue as 300.
      //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.
      //user can change this to your requiremnt if needed.This is optioan function for the Pie Chart.
      if (parseInt($(this).val()) >= alertCheckValue) {
         ctx.drawImage(greenImage, alertImgXVal, alertImgYVal, imagesize, imagesize);
      }
      else {
         ctx.drawImage(redImage, alertImgXVal, alertImgYVal, imagesize, imagesize);
      }
   }
   //Draw the Pie Chart Label text and Value
   ctx.fillStyle = "#000000";
   ctx.font = '10pt Calibri';
   ctx.fillText($(this).text(), labelTextXVal, labelTextYXVal);

   // To Increment and draw the next bar ,label Text and Alart Image.

   labelBarYlabelBarY = labelBarY + labelBarHeight + 10;
   labelTextYXVal = labelBarY + labelBarHeight - 8;
   alertImgYVal = labelBarY + labelBarHeight - 24;
   colorvalcolorval = colorval + 1;

   });

   //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.
   ctx.globalAlpha = 0.1;
   ctx.font = '72pt Calibri';
   ctx.fillStyle = "#000000";
   ctx.fillText($('#txtWatermark').val(), canWidth - 120, Canheight);
}

//Save as Image file
function ShanuSaveImage() {

   var m = confirm("Are you sure to Save ");
   if (m) {
      if (navigator.appName == 'Microsoft Internet Explorer') {

      var image_NEW = document.getElementById("canvas").toDataURL("image/png");
      image_NEWimage_NEW = image_NEW.replace('data:image/png;base64,', '');

      $.ajax({
         type: 'POST',
         contentType: 'application/json; charset=utf-8',
         url: '/shanuHTML5PIEChart.aspx/SaveImage',
         data: '{ "imageData" : "' + image_NEW + '" }',
         async: false,
         success: function (msg) {
            alert(msg.d);
      },
      error: function () {
         alert("Pie Chart Not Saved");
      }

      });
   }
   else {
      // save image without file type
      var canvas = document.getElementById("canvas");
      document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

      var ImageSave = document.createElement('a');
      ImageSave.download = "shanuPIEImage.png";
      ImageSave.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;
      ImageSave.click();
      alert("Image Saved");
   }
   }
}

plotData();
</script>
</head>
<body>
   <form id="form1" runat="server">
      <img src="images/blank.gif" alt="" width="1" height="10" />
      <table width="99%" style=" border-bottom:3px solid #3273d5;">
      <tr>

         <td width=" 250">
            <table width="99%">
               <tr>
                  <td>
                     Created by SHANU

                  </td>
               </tr>
            </table>
         </td>
         <td class="style1" align="center">
            <h3>ASP.NET BAR Chart USING HTML5 and Jquery</h3>

         </td>

      </tr>
   </table>
   <img src="~/Images/blank.gif" alt="" width="1" height="10" />
   <table style=" padding: 5px;width: 99%;table-layout:fixed; border-bottom:3px solid #3273d5;"">
   <tr>
      <td >
         <table width="100%" >
            <tr>

               <td style="background-color:#ECF3F4;"" >
                  Enter BAR Chart Draw Count:

               </td>
               <td width="90">

                  <asp:TextBox ID="txtChartCount" runat="server" Height="26px" MaxLength="2" Width="90"
                     onkeypress="if(event.keyCode<48 || event.keyCode>57)event.returnValue=false;" >7</asp:TextBox><br />
                  <asp:RangeValidator ID="RangeValidator1" Type="Integer" MinimumValue="1" MaximumValue="12"                      ControlToValidate="txtChartCount" runat="server" ErrorMessage="No <= 12"></asp:RangeValidator>
               </td>
               <td style="background-color:#ECF3F4;"" >
                  Click Button to fill BAR Chart Data:

               </td>
               <td>
                  <asp:DropDownList ID="DropDownList1" runat="server" Width="140px" Height="36px">
                  </asp:DropDownList>
               </td>
            <td>
            <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" />
         </td>
         <td style="background-color:#ECF3F4;" >
            Click to Draw Dynamic Pic Chart:

         </td>
         <td rowspan="2">
             <img src="images/Bar.png" onClick="plotData()" alt="Click to Draw BAR Chart" />
         </td>
         <td style="background-color:#ECF3F4;"" rowspan="2">
            Save Pic Chart:

         </td>
         <td rowspan="2">
            <img src="images/Save.png" onClick="ShanuSaveImage()" alt="Click to Save BAR Chart" />
         </td>
      </tr>
      <tr>
         <td style="background-color:#ECF3F4;"" >
            Enter Chart Title:
         </td>
   <td>

      <asp:TextBox ID="txtTitle" runat="server" Height="26px" MaxLength="40" Width="120" >SHANU BAR Chart</asp:TextBox><br />
   </td>
   <td style="background-color:#ECF3F4;"" >
      Chart WaterMark:

   </td>
   <td>

      <asp:TextBox ID="txtWatermark" runat="server" Height="26px" MaxLength="40" Width="120px" >SHANU</asp:TextBox><br />
   </td>
   <td style="background-color:#ECF3F4;"" >
      Alert Status </td>
      <td>

      <asp:RadioButton ID="rdoAlaramOn" runat="server" Checked="True" GroupName="Alaram" Text="Alert On" />
      <asp:RadioButton ID="rdoAlaramOff" runat="server" GroupName="Alaram" Text="Alert Off" />
      <b> /</b>

         <asp:RadioButton ID="rdoColorGreen" runat="server" Checked="True" GroupName="Colors" Text="Chart Green Theme" />
         <asp:RadioButton ID="rdoColorBlue" runat="server" GroupName="Colors" Text="Chart Blue Theme" />

         <br />
         </td>
      </tr>
   </table>
   </td>
</tr>
</table>
   <img src="~/Images/blank.gif" alt="" width="1" height="10" />
      <table width="99%" class="search">
         <table style=" solid 2px #3273d5; padding: 5px;width: 99%;table-layout:fixed; border-top:3px solid #3273d5;"">
            <tr>
               <td align="center">
                  <SECTION style="border-style: solid; border-width: 2px; width: 1024px;height:500px;">

                  <CANVAS HEIGHT="500" WIDTH="1024px" ID="canvas">
                     Your browser is not supporting HTML5 Canvas .Upgrade Browser to view this program or check with                      Chrome or in Firefox.
                  </CANVAS>

                  </SECTION>
               </td>
            </tr>
         </table>

         <asp:HiddenField ID="hidListMax" runat="server" />
         <asp:HiddenField ID="hidListMin" runat="server" />
      </form>

   </body>
</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