Introduction
There might be some questions about why we need to draw our own Chart as lots of free and 3rd party Charts are available for MVC Application.
The answer to this question is, even if there are lots of free Chart controls available, sometimes the chart controls will not fulfill our requirements.
For example if we want to add our own water marks to our Chart, if we want to display our own alert Status Image Display, If we want to add our Company Logo to Chart and etc.
It will be hard to find the Chart controls with all our extra requirements. The Customization will not be possible with other Chart controls. Think if we draw and design our own 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.
Here we have planned to write a series of article .In each article we will explain in detail about how to draw our own chart for MVC web application using HTML5 Canvas, JQuery, WEB API and AngularJS.
In this series we will see one by one in detail starting from:
- MVC Dynamic Bar Chart using WEB API, AngularJS and JQuery
- MVC Dynamic Pie Chart using WEB API, AngularJS and JQuery
- MVC Dynamic Line Chart using WEB API, AngularJS and JQuery
- MVC Dynamic Line&Bar Chart using WEB API, AngularJS and JQuery
- MVC Dynamic Donut Chart using WEB API, AngularJS and JQuery
- MVC Dynamic Bubble Chart using WEB API, AngularJS and JQuery
Our Chart Features
- 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.
- 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.
- 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. (User can redesign and customize as per your requirements if needed).
- Chart Water Mark Text: In some cases we need to add our Company name as Water Mark to our Chart. Here in our example we will draw the Water mark Textbox text at the center of the Chart. (User can redesign and customize as per your requirements if needed).
- Chart Company LOGO: User can add their own Company logo to the Chart.(Here for sample we have added my own image as a Logo at the Top left corner.( User can redesign and customize as per your requirements if needed.).
- 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 projects. 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 your requirement and add your own image and logics.).
- Save Chart as Image: user can save the chart as Image.
- 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 numbers of theme as they required.
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 3 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 aItemMaster 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.
- USEMASTER
- GO
-
-
- IFEXISTS(SELECT [name] FROMsys.databasesWHERE [name] ='ItemsDB')
- DROPDATABASEItemsDB
- GO
-
- CREATEDATABASEItemsDB
- GO
-
- USEItemsDB
- GO
-
-
-
-
- IFEXISTS(SELECT [name] FROMsys.tablesWHERE [name] ='ItemMaster')
- DROPTABLEItemMaster
- GO
-
- CREATETABLE [dbo].[ItemMaster](
- [ItemID] INTIDENTITYPRIMARYKEY,
- [ItemName] [varchar](100)NOTNULL,
- [SaleCount] [varchar](10)NOTNULL
- )
-
-
- INSERTINTOItemMaster([ItemName],[SaleCount])
- VALUES ('Item1','100')
-
- INSERTINTOItemMaster([ItemName],[SaleCount])
- VALUES ('Item2','82')
-
- INSERTINTOItemMaster([ItemName],[SaleCount])
- VALUES ('Item3','98')
-
- INSERTINTOItemMaster([ItemName],[SaleCount])
- VALUES ('Item4','34')
-
- INSERTINTOItemMaster([ItemName],[SaleCount])
- VALUES ('Item5','68')
-
- select*fromItemMaster
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CREATEPROCEDURE [dbo].[USP_Item_Select]
- (
- @ItemName VARCHAR(100)=''
- )
- AS
- BEGIN
- SELECTItemName,
- SaleCount
- FROMItemMaster
- WHERE
- ItemNamelike @ItemName+'%'
- OrderBYItemName
- END
- GO
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CREATEPROCEDURE [dbo].[USP_Item_Edit]
- (
- @ItemName VARCHAR(100)='',
- @SaleCount VARCHAR(10)=''
-
- )
- AS
- BEGIN
- IFNOTEXISTS(SELECT*FROMItemMasterWHEREItemName=@ItemName)
- BEGIN
-
- INSERTINTOItemMaster([ItemName],[SaleCount])
- VALUES (@ItemName,@SaleCount)
-
- Select'Inserted'as results
- return;
- END
- ELSE
- BEGIN
- UpdateItemMasterSET
- SaleCount=@SaleCount
- WHEREItemName=@ItemName
- Select'Updated'as results
- return;
- END
- Select'Error'as results
- END
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CREATEPROCEDURE [dbo].[USP_ItemMaxMin_Select]
- (
- @ItemName VARCHAR(100)=''
- )
- AS
- BEGIN
- SELECTMIN(convert(int,SaleCount))asMinValue,
- MAX(convert(int,SaleCount))asMaxValue
- FROMItemMaster
- WHERE
- ItemNamelike @ItemName+'%'
-
- END
- GO
Step 2: Create your MVC Web Application in Visual Studio 2015 After installing our Visual Studio 2015 click Start, then Programs and select
Visual Studio 2015 - Click
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 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 -> New Item.
Select Data->Select ADO.NET Entity Data Model> 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 SQL 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 need to be used and click finish.
Here we can see we have selected our table ItemMasters and all needed Stored Procedures after selecting 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-> Click 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. Here for my Web API Controller I have given name as “
StudentsController”.
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 itemMastertable 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.
- publicclassItemAPIController: ApiController
- {
- ItemsDBEntitiesobjapi = newItemsDBEntities();
-
- [HttpGet]
- publicIEnumerable < USP_Item_Select_Result > getItemDetails(stringItemName)
- {
- if (ItemName == null) ItemName = "";
- returnobjapi.USP_Item_Select(ItemName).AsEnumerable();
- }
-
- [HttpGet]
- publicIEnumerable < USP_ItemMaxMin_Select_Result > getItemMaxMinDetails(stringItemNM)
- {
- if (ItemNM == null) ItemNM = "";
- returnobjapi.USP_ItemMaxMin_Select(ItemNM).AsEnumerable();
- }
-
- [HttpGet]
- publicIEnumerable < string > insertItem(stringitemName, stringSaleCount)
- {
- returnobjapi.USP_Item_Edit(itemName, SaleCount).AsEnumerable();
- }
- }
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
First create a folder inside the Script Folder and we give the folder name as “
MyAngular”.
First create a folder inside the Script Folder and Igiven the folder name as “
MyAngular”.
Now add your Angular Controller inside the folder.
Right Click the MyAngular Folder and click Add and New Item>Select Web>Select AngularJS Controller and give name to Controller. We have given my AngularJS Controller as “
Controller.js”
If the Angular JS 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”.
-
-
-
-
- var app;
- (function () {
- app = angular.module("AngularJS_Module", ['ngAnimate']);
- })();
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.
- app.controller("AngularJS_Controller", function($scope, $timeout, $rootScope, $window, $http, FileUploadService)
- {
- $scope.date = newDate();
-
-
-
-
- var app;
- (function()
- {
- app = angular.module("RESTClientModule", ['ngAnimate']);
- })();
- app.controller("AngularJS_Controller", function($scope, $timeout, $rootScope, $window, $http)
- {
- $scope.date = newDate();
- $scope.MyName = "shanu";
- $scope.sItemName = "";
- $scope.itemCount = 5;
- $scope.selectedItem = "";
- $scope.chartTitle = "SHANU Bar Chart";
- $scope.waterMark = "SHANU";
- $scope.ItemValues = 0;
- $scope.ItemNames = "";
- $scope.showItemAdd = false;
- $scope.minsnew = 0;
- $scope.maxnew = 0;
- }
- }
2. 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.
-
- selectuerRoleDetails($scope.sItemName);
-
- functionselectuerRoleDetails(ItemName)
- {
- $http.get('/api/ItemAPI/getItemDetails/',
- {
- params:
- {
- ItemName: ItemName
- }
- }).success(function(data)
- {
- $scope.itemData = data;
- $scope.itemCount = $scope.itemData.length;
- $scope.selectedItem = $scope.itemData[0].SaleCount;
- }).error(function()
- {
- $scope.error = "An Error has occured while loading posts!";
- });
- $http.get('/api/ItemAPI/getItemMaxMinDetails/',
- {
- params:
- {
- ItemNM: $scope.sItemName
- }
- }).success(function(data)
- {
- $scope.itemDataMaxMin = data;
- $scope.minsnew = $scope.itemDataMaxMin[0].MinValue;
- $scope.maxnew = $scope.itemDataMaxMin[0].MaxValue;
- }).error(function()
- {
- $scope.error = "An Error has occured while loading posts!";
- });
- }
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.
-
- $scope.saveDetails = function()
- {
- $scope.IsFormSubmitted = true;
- $scope.Message = "";
- if ($scope.ItemNames == "")
- {
- alert("Enter Item Name");
- return;
- }
- if ($scope.ItemValues == "")
- {
- alert("Enter Item Value");
- return;
- }
- if ($scope.IsFormValid)
- {
- alert($scope.ItemNames);
- $http.get('/api/ItemAPI/insertItem/',
- {
- params:
- {
- itemName: $scope.ItemNames,
- SaleCount: $scope.ItemValues
- }
- })
- .success(function(data)
- {
- $scope.CharDataInserted = data;
- alert($scope.CharDataInserted);
- cleardetails();
- selectuerRoleDetails($scope.sItemName);
- })
- .error(function()
- {
- $scope.error = "An Error has occured while loading posts!";
- });
- }
- else
- {
- $scope.Message = "All the fields are required.";
- }
- };
- });
Step 3: To draw our Chart using JQuery to our MVC page Canvas Tag
Here we will see in detail about how to draw our Bar Chart on our MVC Web Application using JQuery.
Inside the Java Script 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’s to add with Bar Chart. If you want you can add more from here. Here we have 2 set of color combination one with Green base and one with Blue base. User can add as per your requirement here.
- varpirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"];
-
-
-
-
-
- functionChangeChartColor()
- {
- if ($('#rdoColorGreen:checked').val() == "Green Theme")
- {
- pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"];
- lineColor = "#3090C7";
- lineOuterCircleColor = "#6CBB3C";
- }
- else
- {
- pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"];
- lineColor = "#F87217";
- lineOuterCircleColor = "#F70D1A ";
- }
- }
Method to get X plot and Y Plot Value: here we calculate to draw our Chart item in X and in Y Axis.
-
- functiongetXPlotvalue(val)
- {
- return (Math.round((chartWidth) / noOfPlots)) * val + (xSpace * 1.5) - 20;
- }
-
- functiongetYPlotVale(val)
- {
- returnchartHeight - (((chartHeight - xSpace) / maxDataVal) * val);
- }
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.
-
- functiondrawLengends()
- {
- ctx.fillStyle = "#7F462C";
- ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
-
-
-
- ctx.fillStyle = "#FFFFFF";
- rectInner.startX = rect.startX + 1;
- rectInner.startY = rect.startY + 1;
- rectInner.w = rect.w - 2;
- rectInner.h = rect.h - 2;
- ctx.fillRect(rectInner.startX, rectInner.startY, rectInner.w, rectInner.h);
- labelBarX = rectInner.startX + 4;
- labelBarY = rectInner.startY + 4;
- labelBarWidth = rectInner.w - 10;
- labelBarHeight = (rectInner.h / noOfPlots) - 5;
- colorval = 0;
-
-
-
- $('#DropDownList1 option').each(function()
- {
- ctx.fillStyle = pirChartColor[colorval];
- ctx.fillRect(labelBarX, labelBarY, labelBarWidth, labelBarHeight);
-
-
-
- if ($('#rdoAlaramOn:checked').val() == "Alert On")
- {
-
-
-
-
- if (parseInt($(this).val()) >= alertCheckValue)
- {
- ctx.drawImage(greenImage, labelBarX, labelBarY + (labelBarHeight / 3) - 4, imagesize, imagesize);
- }
- else
- {
- ctx.drawImage(redImage, labelBarX, labelBarY + (labelBarHeight / 3) - 4, imagesize, imagesize);
- }
- }
-
-
- ctx.fillStyle = "#000000";
- ctx.font = '10pt Calibri';
- ctx.fillText($(this).text(), labelBarX + imagesize + 2, labelBarY + (labelBarHeight / 2));
-
-
-
- labelBarY = labelBarY + labelBarHeight + 4;
-
-
-
- colorval = colorval + 1;
- });
- }
Draw Chart: This is our main Function .Here we get all the details to draw our Bar Chart. In this function we will draw Chart Titile, Chart Water Mark text, Chart Logo Image and finally call draw Bar chart Method to draw our bar chart inside Canvas Tag.
-
- functiondrawChart()
- {
- ChangeChartColor();
-
-
-
- greenImage.src = '../images/Green.png';
- redImage.src = '../images/Red.png';
- LogoImage.src = '../images/shanu.jpg';
-
-
-
- minDataVal = $('input:text[name=hidListMin]').val();
- maxDataVal = $('input:text[name=hidListMax]').val();
-
-
-
- noOfPlots = $("#DropDownList1 option").length;
- maxValdivValue = Math.round((maxDataVal / noOfPlots));
-
-
-
- canvas = document.getElementById("canvas");
- ctx = canvas.getContext("2d");
-
-
-
- ctx.globalAlpha = 1;
- ctx.fillStyle = "#000000";
- ctx.strokeStyle = '#000000';
-
-
-
- ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-
-
- chartWidth = canvas.width - xSpace;
- chartHeight = canvas.height - ySpace;
-
-
-
- if ($('#chkLegend:checked').val() == "Show Legend")
- {
- chartWidth = canvas.width - ((canvas.width / 3) - (xSpace / 2));
- chartHeight = canvas.height - ySpace - 10;
- legendWidth = canvas.width - ((canvas.width / 3) - xSpace);
- legendHeight = ySpace;
- rect.startX = legendWidth;
- rect.startY = legendHeight;
- rect.w = canvas.width / 3 - xSpace - 10;
- rect.h = canvas.height - ySpace - 10;
-
-
-
- drawLengends();
- }
-
-
-
- varchartMidPosition = chartWidth / 2 - 60;
-
-
-
-
-
-
-
- varlogoXVal = canvas.width - LogoImgWidth - 10;
- varlogolYVal = 0;
-
-
-
- ctx.globalAlpha = 0.6;
- ctx.drawImage(LogoImage, logoXVal, logolYVal, LogoImgWidth, LogoImgHeight);
- ctx.globalAlpha = 1;
- ctx.font = '22pt Calibri';
- ctx.fillStyle = "#15317E";
- vartitletxt = $('input:text[name=txtTitle]').val();
- ctx.fillText(titletxt, chartMidPosition, chartHeight + 60);
- ctx.fillStyle = "#000000";
- ctx.font = '10pt Calibri';
-
-
-
-
-
-
- ctx.beginPath();
- ctx.moveTo(xSpace, ySpace);
-
-
-
- ctx.lineTo(xSpace, chartHeight);
-
-
-
- ctx.lineTo(chartWidth, chartHeight);
- ctx.stroke();
-
-
-
-
-
-
-
-
-
-
-
- varvAxisPoints = 0;
- var max = maxDataVal;
- max += 10 - max % 10;
- for (vari = 0; i <= maxDataVal; i += maxValdivValue)
- {
- ctx.fillStyle = fotnColor;
- ctx.font = axisfontSize + 'pt Calibri';
- ctx.fillText(i, xSpace - 40, getYPlotVale(i));
-
-
-
- ctx.beginPath();
- ctx.moveTo(xSpace, getYPlotVale(i));
- ctx.lineTo(xSpace - 10, getYPlotVale(i));
- ctx.stroke();
- vAxisPoints = vAxisPoints + maxValdivValue;
- }
-
-
-
-
-
- drawBarChart();
-
-
-
-
- varwaterMarktxt = $('input:text[name=txtWatermark]').val();
-
-
-
- ctx.globalAlpha = 0.1;
- ctx.font = '86pt Calibri';
- ctx.fillStyle = "#000000";
- ctx.fillText(waterMarktxt, chartMidPosition - 40, chartHeight / 2);
- ctx.font = '10pt Calibri';
- ctx.globalAlpha = 1;
-
-
- }
Draw Chart: In this function we get loop the ComboBox items and get all item Name and Value and draw bar chart and plot values one by one in our Canvas Tag.
- functiondrawBarChart()
- {
- varXvalPosition = xSpace;
- widthcalculation = parseInt(((parseInt(chartWidth) - 100) / noOfPlots));
- colorval = 0;
- varcountval = 0;
- $('#DropDownList1').val($('#DropDownList1 option').eq(0).val());
- $('#DropDownList1 option').each(function(i)
- {
-
-
-
- XvalPosition = XvalPosition + widthcalculation;
- ctx.moveTo(XvalPosition, chartHeight);
- ctx.lineTo(XvalPosition, chartHeight + 15);
- ctx.stroke();
- ctx.fillStyle = "#000000";
- ctx.font = '10pt Calibri';
- ctx.fillText($(this).text(), XvalPosition - 28, chartHeight + 24);
-
-
-
-
- varbarRatio = parseInt($(this).val()) / maxDataVal;
-
-
-
- varbarfillHeight = parseInt(barRatio * (parseInt(chartHeight - xSpace)));
-
-
-
- ctx.fillRect(XvalPosition - widthcalculation - 1, chartHeight - 1, widthcalculation + 2, -barfillHeight);
- ctx.fillStyle = pirChartColor[colorval];
-
-
-
- ctx.fillRect(XvalPosition - widthcalculation, chartHeight, widthcalculation, -barfillHeight);
-
-
-
-
- ctx.fillStyle = "#000000";
- ctx.font = '10pt Calibri';
- ctx.fillText($(this).val(), XvalPosition - widthcalculation + 4, chartHeight - barfillHeight - 8);
- ctx.fillStyle = pirChartColor[colorval];
-
-
-
- colorval = colorval + 1;
- }
-
- }
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.
Tested Browsers:
Read more articles on ASP.NET: