Post
Ask Question

MVC Dynamic Pie Chart Using Web API, AngularJS And JQuery

Introduction

In our previous article we have seen in detail how to draw Bar and Line Chart in MVC web Application. In this article we will see how to draw Pie Chart for MVC application using HTML5 Canvas, JQuery, WEB API and AngularJS.

In this series we will see one-by-one in detail starting from:

  1. MVC Dynamic Bar Chart using WEB API, AngularJS and JQuery
  2. MVC Dynamic Line Chart using WEB API, AngularJS and JQuery
  3. MVC Dynamic Pie Chart using WEB API, AngularJS and JQuery
  4. MVC Dynamic Line&Bar Chart using WEB API, AngularJS and JQuery
  5. MVC Dynamic Donut Chart using WEB API, AngularJS and JQuery
  6. MVC Dynamic Bubble Chart using WEB API, AngularJS and JQuery

Our Chart Features

  1. Chart Source Data:

    Using WEB API and AngularJS we will be loading chart data from database to a Combobox. In our JQuery we will be plotting chart details from the Combobox.
  2. Chart Number of Category:

    Chart Items will be dynamically loaded from database. Here we will plot all the Items in Combobox. It’s good to plot less than 12 Items per chart.
  3. Chart Title Text:

    User can add their own Chart Title and dynamically change the titles if required. Here in our example we will draw the Title Textbox text at the bottom of the Chart. (You can redesign and customize as per your requirement if needed).
  4. Chart Water Mark Text:

    In some cases we need to add our Company name as watermark to our Chart. Here in our example we will draw the watermark Textbox text at the center of the Chart. (You can redesign and customize as per your requirement if needed).
  5. Chart Company LOGO:

    User can add own Company logo to the Chart. (Here for sample we have added own image as a Logo at the top left corner. (You can redesign and customize as per your requirement if needed.).
  6. Chart Alert Image Display:

    If the “Alert On” radio button is checked we will display the Alert Image. If the “Alert Off” radio button is clicked then the Alert Image will not be displayed. In JQuery we have declared alertCheckValue = 90; and we check the plot data with this aleartcheckValue and if the plot value is greater than this check value then we will display the alert image in the legend.

    What is the use of Alert Image?

    Let’s consider a real time project. For example, we need to display the chart for a Manufacturing factory with production result as Good and Bad. For example, if production result for each quality value is above 90 we need to display the Alert green Image and if the quality value is below 90 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 a sample we have used for quality check and display green and red image, but users can customize as per their requirement and add own image and logics.).

  7. Save Chart as Image: User can save the chart as Image.
  8. Chart Theme:

    Here we have created 2 themes, Blue and Green for our Chart. We can see both theme output here. User can also add any number of themes as they require.

Blue Theme

Green Theme

In this article we have 2 parts,

  • Chart Item and Value Insert/Update to database, Select Chart Item and Value to Combobox from database using WEB API, AngularJS
  • Using JQuery Draw our own Chart to HTML5 Canvas tag in our MVC page.

Prerequisites

Visual Studio 2015: You can download it from here .

Code Part

In code part we can see the following three steps,

Step 1: Explains about how to create a sample Database, Table, Stored procedure to select, Insert and Update Chart data to SQL Server.

Step 2: Explains about how to create a WEB API to get the data and bind the result to MVC page using AngularJS.

Step 3: Explains about how to draw our own Chart to our MVC Web application using JQuery.

Step 1: Script to create Table and Stored Procedure

We will create an ItemMaster table under the Database ‘ItemsDB. The following is the script to create a database, table and sample insert query. Run this script in your SQL Server. I have used SQL Server 2014.

  1. USE MASTER    
  2. GO    
  3.       
  4. -- 1) Check for the Database Exists .If the database is exist then drop and create new DB    
  5. IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'ItemsDB' )    
  6. DROP DATABASE ItemsDB    
  7. GO    
  8.       
  9. CREATE DATABASE ItemsDB    
  10. GO    
  11.       
  12. USE ItemsDB    
  13. GO    
  14.       
  15.       
  16. -- 1) //////////// Item Masters    
  17.       
  18. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ItemMaster' )    
  19. DROP TABLE ItemMaster    
  20. GO    
  21.       
  22. CREATE TABLE [dbo].[ItemMaster](    
  23.         [ItemID] INT IDENTITY PRIMARY KEY,    
  24.         [ItemName] [varchar](100) NOT NULL,       
  25.         [SaleCount]  [varchar](10) NOT NULL   
  26. )    
  27.       
  28. -- insert sample data to Item Master table    
  29. INSERT INTO ItemMaster   ([ItemName],[SaleCount])    
  30.      VALUES ('Item1','100')    
  31.       
  32. INSERT INTO ItemMaster   ([ItemName],[SaleCount])    
  33.      VALUES ('Item2','82')    
  34.     
  35. INSERT INTO ItemMaster   ([ItemName],[SaleCount])    
  36.      VALUES ('Item3','98')    
  37.     
  38. INSERT INTO ItemMaster   ([ItemName],[SaleCount])    
  39.      VALUES ('Item4','34')    
  40.     
  41. INSERT INTO ItemMaster   ([ItemName],[SaleCount])    
  42.      VALUES ('Item5','68')    
  43.     
  44. select * from ItemMaster   
  45.     
  46.     
  47. -- 1)To Select Item Details         
  48.     
  49. -- Author      : Shanu                                                                  
  50. -- Create date :  2016-03-15                                                                  
  51. -- Description :To Select Item Details                                             
  52. -- Tables used :  ItemMaster                                                              
  53. -- Modifier    : Shanu                                                                  
  54. -- Modify date : 2016-03-15                                                                  
  55. -- =============================================    
  56. -- To Select Item Details  
  57. -- EXEC USP_Item_Select ''  
  58. -- =============================================    
  59. CREATE PROCEDURE [dbo].[USP_Item_Select]     
  60. (    
  61.      @ItemName               VARCHAR(100)     = ''      
  62.       )         
  63. AS                                                                  
  64. BEGIN          
  65.         SELECT  ItemName,  
  66.                 SaleCount  
  67.             FROM ItemMaster  
  68.                 WHERE  
  69.                 ItemName like  @ItemName +'%'  
  70.          Order BY ItemName  
  71. END  
  72. GO      
  73.     
  74.     
  75.     
  76. -- 2) To Insert/Update Item Details         
  77.     
  78. -- Author      : Shanu                                                                  
  79. -- Create date :  2016-03-15                                                                  
  80. -- Description :To Insert/Update Item Details                                             
  81. -- Tables used :  ItemMaster                                                              
  82. -- Modifier    : Shanu                                                                  
  83. -- Modify date : 2016-03-15                                                                  
  84. -- =============================================    
  85. -- To Insert/Update Item Details  
  86. -- EXEC USP_Item_Edit ''  
  87. -- =============================================                              
  88. CREATE PROCEDURE [dbo].[USP_Item_Edit]                                                
  89.    (                         
  90.      @ItemName        VARCHAR(100)     = '',  
  91.      @SaleCount            VARCHAR(10)     = ''   
  92.         
  93.       )                                                          
  94. AS                                                                  
  95. BEGIN          
  96.         IF NOT EXISTS (SELECT * FROM ItemMaster WHERE ItemName=@ItemName)  
  97.             BEGIN  
  98.     
  99.                 INSERT INTO ItemMaster   ([ItemName],[SaleCount])    
  100.                 VALUES (@ItemName,@SaleCount)    
  101.                                    
  102.                     Select 'Inserted' as results  
  103.                     return;      
  104.             END  
  105.          ELSE  
  106.              BEGIN  
  107.                     Update ItemMaster SET  
  108.                             SaleCount=@SaleCount  
  109.                                 WHERE ItemName=@ItemName  
  110.                      Select 'Updated' as results  
  111.                      return;  
  112.               END  
  113.               Select 'Error' as results  
  114. END  
  115.     
  116.     
  117. -- 3)To Max and Min Value  
  118.     
  119. -- Author      : Shanu                                                                  
  120. -- Create date :  2016-03-15                                                                  
  121. -- Description :To Max and Min Value                              
  122. -- Tables used :  ItemMaster                                                              
  123. -- Modifier    : Shanu                                                                  
  124. -- Modify date : 2016-03-15                                                                  
  125. -- =============================================    
  126. -- To Max and Min Value  
  127. -- EXEC USP_ItemMaxMin_Select ''  
  128. -- =============================================    
  129. CREATE PROCEDURE [dbo].[USP_ItemMaxMin_Select]     
  130. (    
  131.      @ItemName               VARCHAR(100)     = ''      
  132.       )         
  133. AS                                                                  
  134. BEGIN          
  135.         SELECT   MIN(convert(int,SaleCount)) as MinValue,  
  136.                  MAX(convert(int,SaleCount)) as MaxValue                  
  137.             FROM ItemMaster  
  138.                 WHERE  
  139.                 ItemName like  @ItemName +'%'  
  140.              
  141. END  
  142. GO  
Step 2: Create your MVC Web Application in Visual Studio 2015

After installing Visual Studio 2015, click Start, then Programs and select Visual Studio 2015. Click New, then Project, select Web and then select ASP.NET Web Application. Enter your project name and click OK.

Select MVC, Web API and click OK.

Now we have created our MVC Application and as a next step we add our SQL Server database as Entity Data Model to our application.

Add Database using ADO.NET Entity Data Model

Right click our project and click Add, then New Item.

Select Data, ADO.NET Entity Data Model and then give the name for our EF and click Add

Select EF Designer from database and click next.

Here click New Connection and provide your SQL Server - Server Name and connect to your database.

Here we can see we have given our Server name, Id and PWD and after it connected we have selected the data base as ItemsDB as we have created the Database using my SQL Script.

Click next and select our Tables and SP need to be used and click finish.

Once Entity has been created, next step we add WEB API to our controller and write function to Select/Insert/Update and Delete.

Steps to add our WEB API Controller.

Right Click Controllers folder, Click Add and then Controller.

As we are going to create our WEB API Controller select Controller and add Empty WEB API 2 Controller. Give your Name to Web API controller and click OK.

As we all know Web API is a simple and easy to build HTTP Services for Browsers and Mobiles

Web API has four methods as Get/Post/Put and Delete where,

Get is to request for the data. (Select)

Post is to create a data. (Insert)

Put is to update the data.

Delete is to delete data.

In our example we will use both Get and Post as we need to get all image name and descriptions from database and to insert new Image Name and Image Description to database.

Get Method

In our example I have used only Get method as I am using only Stored Procedure. We need to create object for our Entity and write our Get Method to perform Select/Insert/Update and Delete operations.

Select Operation

We use get Method to get all the details of itemMaster table using entity object and we return the result as IEnumerable. We use this method in our AngularJS and bind the result in ComboBox and insert the new chart Item to Database using the Insert Method.

  1. public class ItemAPIController : ApiController  
  2.     {  
  3.         ItemsDBEntities objapi = new ItemsDBEntities();  
  4.     
  5.         // To get all Item chart detaiuls  
  6.         [HttpGet]  
  7.         public IEnumerable<USP_Item_Select_Result> getItemDetails(string ItemName)  
  8.         {  
  9.             if (ItemName == null)  
  10.                 ItemName = "";  
  11.             return objapi.USP_Item_Select(ItemName).AsEnumerable();  
  12.         }  
  13.     
  14.         // To get maximum and Minimum value  
  15.         [HttpGet]  
  16.         public IEnumerable<USP_ItemMaxMin_Select_Result> getItemMaxMinDetails(string ItemNM)  
  17.         {  
  18.             if (ItemNM == null)  
  19.                 ItemNM = "";  
  20.             return objapi.USP_ItemMaxMin_Select(ItemNM).AsEnumerable();  
  21.         }  
  22.     
  23.         // To Insert/Update Item Details  
  24.         [HttpGet]  
  25.         public IEnumerable<string> insertItem(string itemName, string SaleCount)  
  26.         {  
  27.             return objapi.USP_Item_Edit(itemName,SaleCount).AsEnumerable();  
  28.         }  
  29.     
  30.     }  
Now we have created our Web API Controller Class. Next step we need to create our AngularJS Module and Controller. Let’s see how to create our AngularJS Controller. In Visual Studio 2015 it’s much easy to add our AngularJS Controller. Let’s see step by step on how to create and write our AngularJS Controller. 

Creating AngularJS Controller

Firstly, create a folder inside the Script Folder and give the folder name as “MyAngular”

Now add your Angular Controller inside the folder.

Right Click the MyAngular Folder and click Add and New Item, then select Web and then AngularJS Controller and give name to Controller. We have given my AngularJS Controller as “controller.js”

If the AngularJS package is missing then add the package to your project.

Right Click your MVC project and click Manage NuGet Packages. Search for AngularJS and click Install.

Modules.js:

Here we will add the reference to the AngularJS JavaScript and create an Angular Module named "AngularJs_Module”.

  1. // <reference path="../angular.js" />  
  2. /// <reference path="../angular.min.js" />  
  3. /// <reference path="../angular-animate.js" />  
  4. /// <reference path="../angular-animate.min.js" />  
  5. var app;  
  6. (function () {  
  7. app = angular.module("AngularJs_Module", ['ngAnimate']);  
  8. })();  

Controllers:

In AngularJS Controller I have done all the business logic and returned the data from Web API to our MVC HTML page.

1. Variable declarations: Firstly, we declared all the local variables need to be used.

  1. app.controller("AngularJs_Controller", function ($scope, $timeout, $rootScope, $window, $http, FileUploadService) {  
  2.     $scope.date = new Date();  
  3. // <reference path="../angular.js" />    
  4. /// <reference path="../angular.min.js" />     
  5. /// <reference path="../angular-animate.js" />     
  6. /// <reference path="../angular-animate.min.js" />     
  7. var app;  
  8. (function () {  
  9.     app = angular.module("RESTClientModule", ['ngAnimate']);  
  10. })();  
  11.     
  12.     
  13. app.controller("AngularJs_Controller", function ($scope, $timeout, $rootScope, $window, $http) {  
  14.     $scope.date = new Date();  
  15.     $scope.MyName = "shanu";  
  16.     $scope.sItemName = "";  
  17.     $scope.itemCount = 5;  
  18.     $scope.selectedItem = "";  
  19.     $scope.chartTitle = "SHANU Line Chart";  
  20.     $scope.waterMark = "SHANU";  
  21.     $scope.ItemValues = 0;  
  22.     $scope.ItemNames = "";  
  23.     $scope.showItemAdd = false;  
  24.     
  25.     $scope.minsnew = 0;  
  26.     $scope.maxnew =0;  

2. Methods

Select Method

Here we get all the data from WEB API and bind the result to our ComboBox and we have used another method to get the Maximum and Minimum Value of Chart Value and bind in hidden field.

  1. // This method is to get all the Item  Details to bind in Combobox for plotting in Graph  
  2.     selectuerRoleDetails($scope.sItemName);  
  3.     // This method is to get all the Item  Details to bind in Combobox for plotting in Graph  
  4.     function selectuerRoleDetails(ItemName) {   
  5.         $http.get('/api/ItemAPI/getItemDetails/', { params: { ItemName: ItemName } }).success(function (data) {  
  6.             $scope.itemData = data;  
  7.             $scope.itemCount = $scope.itemData.length;  
  8.             $scope.selectedItem = $scope.itemData[0].SaleCount;      
  9.     
  10.         })  
  11.   .error(function () {  
  12.       $scope.error = "An Error has occured while loading posts!";  
  13.   });  
  14.     
  15.         $http.get('/api/ItemAPI/getItemMaxMinDetails/', { params: { ItemNM: $scope.sItemName } }).success(function (data) {  
  16.             $scope.itemDataMaxMin = data;  
  17.             $scope.minsnew = $scope.itemDataMaxMin[0].MinValue;  
  18.             $scope.maxnew = $scope.itemDataMaxMin[0].MaxValue;   
  19.     
  20.         })  
  21.        .error(function () {  
  22.            $scope.error = "An Error has occured while loading posts!";  
  23.        });  
  24.            
  25.     }  

Insert Method

User can insert or update Chart Item value by clicking Add Chart Item Details. After validation we pass the Chart Item name and Value to Web API method to insert in to our database.



  1. //Save File  
  2.     $scope.saveDetails = function () {  
  3.            
  4.         $scope.IsFormSubmitted = true;  
  5.     
  6.         $scope.Message = "";  
  7.         if ($scope.ItemNames == "")  
  8.         {  
  9.             alert("Enter Item Name");  
  10.             return;  
  11.         }  
  12.     
  13.         if ($scope.ItemValues == "") {  
  14.             alert("Enter Item Value");  
  15.             return;  
  16.         }  
  17.     
  18.     
  19.     
  20.         if ($scope.IsFormValid) {  
  21.             alert($scope.ItemNames);  
  22.             $http.get('/api/ItemAPI/insertItem/', { params: { itemName: $scope.ItemNames, SaleCount: $scope.ItemValues } }).success(function (data) {  
  23.     
  24.                 $scope.CharDataInserted = data;  
  25.                 alert($scope.CharDataInserted);  
  26.     
  27.                 cleardetails();  
  28.                 selectuerRoleDetails($scope.sItemName);  
  29.             })  
  30.              .error(function () {  
  31.                  $scope.error = "An Error has occured while loading posts!";  
  32.              });  
  33.         }  
  34.         else {  
  35.             $scope.Message = "All the fields are required.";  
  36.         }   
  37.     };   
  38. });  
Step 3: To draw our Chart using JQuery to our MVC page Canvas Tag

Here we will see in detail how to draw our Pie Chart on our MVC Web Application using JQuery.

Inside 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 Chart category colors to array. Here we have fixed to 12 colors and 12 data to add with Pie Chart. If you want you can add more in the code. Here we have 2 set of color combination one with Green base and one with Blue base. User can add as per the requirement here.

  1. var pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00","#617C58", "#64E986"]; // green Color Combinations  
  2.  // var pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations  
  3.     
  4. //This method will be used to check for user selected Color Theme and Change the color  
  5.         function ChangeChartColor() {  
  6.              
  7.             if ($('#rdoColorGreen:checked').val() == "Green Theme") {  
  8.                 pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209","#E67451", "#728C00", "#617C58", "#64E986"]; // green Color Combinations  
  9.                 lineColor = "#3090C7"; // Blue Color for Line  
  10.                 lineOuterCircleColor = "#6CBB3C"; // Green Color for Outer Circle  
  11.                     
  12.             }  
  13.             else {  
  14.                 pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF","#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations  
  15.                 lineColor = "#F87217";  // Orange Color for the Line  
  16.                 lineOuterCircleColor = "#F70D1A "; // Red Color for the outer circle  
  17.             }  
  18.         }  

Draw Legend

If the Show Legend radio button is clicked then we draw a Legend for our Chart item inside Canvas Tag and also in this method we check to display Alert Image or not.

  1. // This function is used to draw the Legend  
  2.        function drawLengends() {  
  3.            ctx.fillStyle = "#7F462C";  
  4.            ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);  
  5.            //Drawing Inner White color Rectange with in Above brown rectangle to plot all the Lables with color,Text and Value.  
  6.            ctx.fillStyle = "#FFFFFF";  
  7.            rectInner.startX = rect.startX + 1;  
  8.            rectInner.startY = rect.startY + 1;  
  9.            rectInner.w = rect.w - 2;  
  10.            rectInner.h = rect.h - 2;  
  11.            ctx.fillRect(rectInner.startX, rectInner.startY, rectInner.w, rectInner.h);  
  12.    
  13.    
  14.            labelBarX = rectInner.startX + 4;  
  15.            labelBarY = rectInner.startY + 4;  
  16.            labelBarWidth = rectInner.w - 10;  
  17.            labelBarHeight = (rectInner.h / noOfPlots) - 5;  
  18.            colorval = 0;  
  19.            // here to draw all the rectangle for Lables with Image display  
  20.            $('#DropDownList1 option').each(function () {  
  21.                ctx.fillStyle = pirChartColor[colorval];  
  22.    
  23.                ctx.fillRect(labelBarX, labelBarY, labelBarWidth, labelBarHeight);  
  24.                // 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.  
  25.                if ($('#rdoAlaramOn:checked').val() == "Alert On") {  
  26.                    // Here we can see fo ever chart value we check with the condition .we have initially declare the alertCheckValue as 300.  
  27.                    //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.  
  28.                    //user can change this to your requiremnt if needed.This is optioan function for the Pie Chart.  
  29.                    if (parseInt($(this).val()) >= alertCheckValue) {  
  30.                        ctx.drawImage(greenImage, labelBarX, labelBarY + (labelBarHeight / 3) - 4, imagesize, imagesize);  
  31.                    }  
  32.                    else {  
  33.                        ctx.drawImage(redImage, labelBarX, labelBarY + (labelBarHeight / 3) - 4, imagesize, imagesize);  
  34.                    }  
  35.                }  
  36.                //Draw the Pie Chart Label text and Value  
  37.                ctx.fillStyle = "#000000";  
  38.                ctx.font = '10pt Calibri';  
  39.                ctx.fillText($(this).text(), labelBarX + imagesize + 2, labelBarY + (labelBarHeight / 2));  
  40.    
  41.                // To Increment and draw the next bar ,label Text and Alart Image.  
  42.    
  43.                labelBarY = labelBarY + labelBarHeight + 4;  
  44.                //  labelTextYXVal = labelBarY + labelBarHeight - 4;  
  45.    
  46.                colorval = colorval + 1;  
  47.    
  48.            });  
  49.        }  
Draw Chart

This is our main function. Here we get all the details to draw our Line Chart. In this function we will draw Chart Titile, Chart Water Mark text, Chart Logo Image and finally call draw Pie chart Method to draw our Pie chart inside Canvas Tag.

  1. // This is the main function to darw the Charts  
  2.     function drawChart() {  
  3.     
  4.         ChangeChartColor();  
  5.     
  6.         // asign the images path for both Alert images  
  7.         greenImage.src = '../images/Green.png';  
  8.         redImage.src = '../images/Red.png';  
  9.     
  10.         LogoImage.src = '../images/shanu.jpg';  
  11.     
  12.         // Get the minumum and maximum value.here i have used the hidden filed from code behind wich will stored the Maximum and Minimum value of the Drop down list box.  
  13.     
  14.         minDataVal = $('input:text[name=hidListMin]').val();  
  15.         maxDataVal = $('input:text[name=hidListMax]').val();  
  16.     
  17.         // Total no of plots we are going to draw.  
  18.         noOfPlots = $("#DropDownList1 option").length;  
  19.     
  20.         maxValdivValue = Math.round((maxDataVal / noOfPlots));  
  21.     
  22.     
  23.         //storing the Canvas Context to local variable ctx.This variable will be used to draw the Pie Chart  
  24.         canvas = document.getElementById("canvas");  
  25.         ctx = canvas.getContext("2d");  
  26.         //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.  
  27.         ctx.globalAlpha = 1;  
  28.         ctx.fillStyle = "#000000";  
  29.         ctx.strokeStyle = '#000000';  
  30.         //Every time we clear the canvas and draw the chart  
  31.         ctx.clearRect(0, 0, canvas.width, canvas.height);  
  32.     
  33.         //If need to draw without legend for the PIE Chart  
  34.         chartWidth = canvas.width - xSpace;  
  35.         chartHeight = canvas.height - ySpace;  
  36.     
  37.     
  38.         //  step 1) Draw legend $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$########################  
  39.         if ($('#chkLegend:checked').val() == "Show Legend") {  
  40.     
  41.             chartWidth = canvas.width - ((canvas.width / 3) - (xSpace / 2));  
  42.             chartHeight = canvas.height - ySpace - 10;  
  43.     
  44.             legendWidth = canvas.width - ((canvas.width / 3) - xSpace);  
  45.             legendHeight = ySpace;  
  46.     
  47.             rect.startX = legendWidth;  
  48.             rect.startY = legendHeight;  
  49.             rect.w = canvas.width / 3 - xSpace - 10;  
  50.             rect.h = canvas.height - ySpace - 10;  
  51.     
  52.             //In this method i will draw the legend with the Alert Image.  
  53.             drawLengends();  
  54.     
  55.         }  
  56.         // end step 1) $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  
  57.     
  58.         var chartMidPosition = chartWidth / 2 - 60;  
  59.     
  60.         ////        //If need to draw with legend  
  61.         ////        chartWidth = canvas.width - ((canvas.width / 3) - (xSpace / 2));  
  62.         ////        chartHeight = canvas.height - ySpace - 10;  
  63.     
  64.     
  65.         // Step 2 ) +++++++++++++ To Add Chart Titel and  Company Logo  
  66.         //To Add Logo to Chart  
  67.     
  68.     
  69.     
  70.         var logoXVal = canvas.width - LogoImgWidth - 10;  
  71.         var logolYVal = 0;  
  72.     
  73.         //here we draw the Logo for teh chart and i have used the alpha to fade and display the Logo.  
  74.         ctx.globalAlpha = 0.6;  
  75.     
  76.         ctx.drawImage(LogoImage, logoXVal, logolYVal, LogoImgWidth, LogoImgHeight);  
  77.     
  78.         ctx.globalAlpha = 1;  
  79.     
  80.         ctx.font = '22pt Calibri';  
  81.         ctx.fillStyle = "#15317E";  
  82.     
  83.         var titletxt = $('input:text[name=txtTitle]').val();  
  84.     
  85.         ctx.fillText(titletxt, chartMidPosition, chartHeight + 60);  
  86.     
  87.     
  88.         ctx.fillStyle = "#000000";  
  89.         ctx.font = '10pt Calibri';  
  90.     
  91.         // end step 2) +++++++++++ End of Title and Company Logo Add  
  92.     
  93.         // Step 3 ) +++++++++++++ toDraw the X-Axis and Y-Axis  
  94.     
  95.         //  >>>>>>>>> Draw Y-Axis and X-Axis Line(Horizontal Line)  
  96.         // Draw the axises  
  97.         //////ctx.beginPath();  
  98.         //////ctx.moveTo(xSpace, ySpace);  
  99.         //////// first Draw Y Axis  
  100.         //////ctx.lineTo(xSpace, chartHeight);  
  101.     
  102.         //////// Next draw the X-Axis  
  103.         //////ctx.lineTo(chartWidth, chartHeight);  
  104.         //////ctx.stroke();  
  105.         //  >>>>>>>>>>>>> End of X-Axis PIE Draw  
  106.         //end step 3) +++++++++++++++++++++++  
  107.     
  108.     
  109.         // Step 4) <<<<<<<<<<<<<<<<<<<<<<< To Draw X - Axis Plot Values <<<<<<<<<<<<< }}}}}}  
  110.         // Draw the X value texts  
  111.         // --->>>>>>>>>>>>  for the Bar Chart i have draw the X-Axis plot in with drawBarChart  
  112.         //  <<<<<<<<<<<<<<<<<<<<<<< End of X Axis Draw  
  113.     
  114.         // end Step 4) <<<<<<<<<<<<<<<<<<<<<<<  
  115.     
  116.     
  117.         // Step 5){{{{{{{{{{{{  
  118.         // {{{{{{{{{{{{{To Draw the Y Axis Plot Values}}}}}}}}}}}}}}  
  119.     
  120.         ////////var vAxisPoints = 0;  
  121.         ////////var max = maxDataVal;  
  122.         ////////max += 10 - max % 10;  
  123.         ////////for (var i = 0; i <= maxDataVal; i += maxValdivValue) {  
  124.     
  125.         ////////    ctx.fillStyle = fotnColor;  
  126.         ////////    ctx.font = axisfontSize + 'pt Calibri';  
  127.         ////////    ctx.fillText(i, xSpace - 40, getYPlotVale(i));  
  128.     
  129.         ////////    //Here we draw the Y-Axis point PIE  
  130.         ////////    ctx.beginPath();  
  131.         ////////    ctx.moveTo(xSpace, getYPlotVale(i));  
  132.     
  133.         ////////    ctx.lineTo(xSpace - 10, getYPlotVale(i));  
  134.         ////////    ctx.stroke();  
  135.         ////////    vAxisPoints = vAxisPoints + maxValdivValue;  
  136.     
  137.     
  138.         ////////}  
  139.     
  140.          //}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}  
  141.     
  142.         //Step 5) *********************************************************  
  143.         //Function to Draw our Chart here we can Call/Bar Chart/PIE Chart or Pie Chart  
  144.     
  145.         drawPieChart();  
  146.     
  147.         // end step 6) **************  
  148.     
  149.         //Step 7)  :::::::::::::::::::: to add the Water mark Text  
  150.         var waterMarktxt = $('input:text[name=txtWatermark]').val();  
  151.     
  152.     
  153.         // Here add the Water mark text at center of the chart  
  154.         ctx.globalAlpha = 0.1;  
  155.         ctx.font = '86pt Calibri';  
  156.         ctx.fillStyle = "#000000";  
  157.         ctx.fillText(waterMarktxt, chartMidPosition - 40, chartHeight / 2);  
  158.     
  159.         ctx.font = '10pt Calibri';  
  160.         ctx.globalAlpha = 1;  
  161.         /// end step 7) ::::::::::::::::::::::::::::::::::::::  
  162.     
  163.     }  
Draw PieChart:

In this function we get all item name and value using foreach of ComboBox and here we plot all value and draw Pie Chart using the ComboBox values. Firstly, we will get total of all values from the getChartTotal() Method. We will be using this total value to calculate and draw our Pie Chart.

  1. function drawPieChart() {  
  2.     
  3.         var lastend = 0;  
  4.         var XvalPosition = xSpace;  
  5.     
  6.         chartWidth = (canvas.width / 2) - xSpace;  
  7.         chartHeight = (canvas.height / 2) - (xSpace / 2);  
  8.     
  9.         widthcalculation = parseInt(((parseInt(chartWidth) - 100) / noOfPlots));  
  10.     
  11.         //Draw Xaxis Line  
  12.         //-- draw bar X-Axis and Y-Axis Line  
  13.         var XLineStartPosition = xSpace;  
  14.         var yLineStartPosition = xSpace;  
  15.         var yLineHeight = chartHeight;  
  16.         var xLineWidth = chartWidth;  
  17.     
  18.         colorval = 0;  
  19.         var chartTotalResult = getChartTotal();  
  20.     
  21.         $('#DropDownList1 option').each(function () {  
  22.     
  23.     
  24.             ctx.fillStyle = pirChartColor[colorval];  
  25.             ctx.beginPath();  
  26.             ctx.moveTo(chartWidth, chartHeight);  
  27.             //Here we draw the each Pic Chart arc with values and size.  
  28.             ctx.arc(chartWidth, chartHeight + 6, chartHeight, lastend, lastend +  
  29.               (Math.PI * 2 * (parseInt($(this).val()) / chartTotalResult)), false);  
  30.     
  31.             ctx.lineTo(chartWidth, chartHeight);  
  32.     
  33.             ctx.fill();  
  34.             lastend += Math.PI * 2 * (parseInt($(this).val()) / chartTotalResult);  
  35.     
  36.     
  37.             //END Draw Bar Graph  **************==================********************  
  38.             colorval = colorval + 1;  
  39.         });  
  40.     
  41.           
  42.     }  
  43.     
  44.     function getChartTotal() {  
  45.         var chartTotalResult = 0;  
  46.         $('#DropDownList1 option').each(function () {  
  47.     
  48.             chartTotalResult += (typeof parseInt($(this).val()) == 'number') ? parseInt($(this).val()) : 0;  
  49.         });  
  50. return chartTotalResult;  
  51.     }  
Note

Run the SQL Script in your SQL Server to created DB, Table and stored procedure. In web.config change the connection string to your local SQL Server connection. In the attached zip file you can find code for both Bar, Line and Pie Chart.

Tested Browsers


Similar Articles