Post
Ask Question

Chart Widgets With Server Side Data In MVC Using Angular JS And Web API

I am creating this application in Visual Studio 2015. In this project we cover how to use HighChart with AngularJS. Now we will go and create our application. I hope you will like this.

Download the source code

You can always download the source code here.

  • Widgets With Server Side Data
  • SQL Scripts With Insert Queries


    • Background

    I am working now in a personal dashboard application in which I use HighChart products for the chart integration. We can always load the chart widgets with server side data and AngularJS, right? Here we will discuss that. We are going to create the preceding charts for our dashboard.

    • Pie Chart
    • Spline Chart
    • Bar Chart
    • Line Chart
    • Scatter Chart
    • Column Chart

    Once we are done, this is how our application's output will be.

    Chart Widgets With Server Side Data In MVC Using Angular JS And Web API Output

    Figure: Chart Widgets With Server Side Data In MVC Using AngularJS And Web API Output

    Create a MVC application

    Click File, New, then Project then select MVC application. From the following pop up we will select the template as empty and select the core references and folders for MVC.

    MVC Project With Empty Template
    Figure: MVC Project With Empty Template

    Once you click OK, a project with MVC like folder structure with core references will be created for you.

    Folder Structure And References For Empty MVC Project
    Figure: Folder Structure And References For Empty MVC Project

    Before going to start the coding part, make sure that all the required extensions/references are installed. Below are the required things to start with.

    • Angular JS
    • jQuery

    You can get all the items mentioned above from NuGet. Right click on your project name and select Manage NuGet packages.

    Manage NuGet Package Window
    Figure: Manage NuGet Package Window

    Once you have installed those items, please make sure that all the items(jQuery, AngularJS files) are loaded in your scripts folder.

    Using the code

    As I have said before, we are going to use AngularJS for our client side operations, so it is better to create the Angular JS script files first, right? Just to make sure that we have got all the required things :). For that, create a folder named Widget in script folder and right click Add, New Item, then select AngularJS Module and enter the module name, then click Add.

    Creating Angular JS Modue In MVC Application
    Figure: Creating Angular JS Modue In MVC Application

    Follow the same procedure to create AngularJS factory and AngularJS controller. Yes, we have set everything to get started with our coding. Now we will create a Web API controller and get the data from database in JSON format. Let’s start then.

    Create Web API Controller

    To create a Web API controller, just right click on your controller folder and click Add -> Controller -> Select Web API controller – Empty ( We will create our own actions later) -> Name the controller (Here I am giving the controller name as Widget).

    So our controller is ready, now we need to set up our database so that we can create Entity Model for our application later.

    Create a database

    The following query can be used to create a database in your SQL Server.

    1. USE [master]  
    2. GO  
    3. /****** Object: Database [TrialsDB] Script Date: 16-Mar-16 4:08:15 PM ******/  
    4. CREATE DATABASE [TrialsDB]  
    5. CONTAINMENT = NONE  
    6. ON PRIMARY  
    7. ( NAME = N'TrialsDB', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB.mdf' , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )  
    8. LOG ON  
    9. ( NAME = N'TrialsDB_log', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB_log.ldf' , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)  
    10. GO  
    11. ALTER DATABASE [TrialsDB] SET COMPATIBILITY_LEVEL = 110  
    12. GO  
    13. IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))  
    14. begin  
    15. EXEC [TrialsDB].[dbo].[sp_fulltext_database] @action = 'enable'  
    16. end  
    17. GO  
    18. ALTER DATABASE [TrialsDB] SET ANSI_NULL_DEFAULT OFF  
    19. GO  
    20. ALTER DATABASE [TrialsDB] SET ANSI_NULLS OFF  
    21. GO  
    22. ALTER DATABASE [TrialsDB] SET ANSI_PADDING OFF  
    23. GO  
    24. ALTER DATABASE [TrialsDB] SET ANSI_WARNINGS OFF  
    25. GO  
    26. ALTER DATABASE [TrialsDB] SET ARITHABORT OFF  
    27. GO  
    28. ALTER DATABASE [TrialsDB] SET AUTO_CLOSE OFF  
    29. GO  
    30. ALTER DATABASE [TrialsDB] SET AUTO_CREATE_STATISTICS ON  
    31. GO  
    32. ALTER DATABASE [TrialsDB] SET AUTO_SHRINK OFF  
    33. GO  
    34. ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS ON  
    35. GO  
    36. ALTER DATABASE [TrialsDB] SET CURSOR_CLOSE_ON_COMMIT OFF  
    37. GO  
    38. ALTER DATABASE [TrialsDB] SET CURSOR_DEFAULT GLOBAL  
    39. GO  
    40. ALTER DATABASE [TrialsDB] SET CONCAT_NULL_YIELDS_NULL OFF  
    41. GO  
    42. ALTER DATABASE [TrialsDB] SET NUMERIC_ROUNDABORT OFF  
    43. GO  
    44. ALTER DATABASE [TrialsDB] SET QUOTED_IDENTIFIER OFF  
    45. GO  
    46. ALTER DATABASE [TrialsDB] SET RECURSIVE_TRIGGERS OFF  
    47. GO  
    48. ALTER DATABASE [TrialsDB] SET DISABLE_BROKER  
    49. GO  
    50. ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF  
    51. GO  
    52. ALTER DATABASE [TrialsDB] SET DATE_CORRELATION_OPTIMIZATION OFF  
    53. GO  
    54. ALTER DATABASE [TrialsDB] SET TRUSTWORTHY OFF  
    55. GO  
    56. ALTER DATABASE [TrialsDB] SET ALLOW_SNAPSHOT_ISOLATION OFF  
    57. GO  
    58. ALTER DATABASE [TrialsDB] SET PARAMETERIZATION SIMPLE  
    59. GO  
    60. ALTER DATABASE [TrialsDB] SET READ_COMMITTED_SNAPSHOT OFF  
    61. GO  
    62. ALTER DATABASE [TrialsDB] SET HONOR_BROKER_PRIORITY OFF  
    63. GO  
    64. ALTER DATABASE [TrialsDB] SET RECOVERY FULL  
    65. GO  
    66. ALTER DATABASE [TrialsDB] SET MULTI_USER  
    67. GO  
    68. ALTER DATABASE [TrialsDB] SET PAGE_VERIFY CHECKSUM  
    69. GO  
    70. ALTER DATABASE [TrialsDB] SET DB_CHAINING OFF  
    71. GO  
    72. ALTER DATABASE [TrialsDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )  
    73. GO  
    74. ALTER DATABASE [TrialsDB] SET TARGET_RECOVERY_TIME = 0 SECONDS  
    75. GO  
    76. ALTER DATABASE [TrialsDB] SET READ_WRITE  
    77. GO  

    Now we will create the tables we needed. As of now I am going to create two tables.

    • SalesOrderDetail
    • Product

    These tables are having relationships by the key ProductID.

    Create tables in database

    Below is the query to create SalesOrderDetail table in database.

    1. USE [TrialsDB]  
    2. GO  
    3. /****** Object: Table [dbo].[SalesOrderDetail] Script Date: 16-Mar-16 4:10:22 PM ******/  
    4. SET ANSI_NULLS ON  
    5. GO  
    6. SET QUOTED_IDENTIFIER ON  
    7. GO  
    8. CREATE TABLE [dbo].[SalesOrderDetail](  
    9. [SalesOrderID] [int] NOT NULL,  
    10. [SalesOrderDetailID] [int] IDENTITY(1,1) NOT NULL,  
    11. [CarrierTrackingNumber] [nvarchar](25) NULL,  
    12. [OrderQty] [smallint] NOT NULL,  
    13. [ProductID] [int] NOT NULL,  
    14. [SpecialOfferID] [int] NOT NULL,  
    15. [UnitPrice] [money] NOT NULL,  
    16. [UnitPriceDiscount] [money] NOT NULL,  
    17. [LineTotal] AS (isnull(([UnitPrice]*((1.0)-[UnitPriceDiscount]))*[OrderQty],(0.0))),  
    18. [rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,  
    19. [ModifiedDate] [datetime] NOT NULL,  
    20. CONSTRAINT [PK_SalesOrderDetail_SalesOrderID_SalesOrderDetailID] PRIMARY KEY CLUSTERED  
    21. (  
    22. [SalesOrderID] ASC,  
    23. [SalesOrderDetailID] ASC  
    24. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
    25. ) ON [PRIMARY]  
    26. GO  

    Now we will create the table Product.

    1. USE [TrialsDB]  
    2. GO  
    3. /****** Object: Table [dbo].[Product] Script Date: 16-Mar-16 4:11:29 PM ******/  
    4. SET ANSI_NULLS ON  
    5. GO  
    6. SET QUOTED_IDENTIFIER ON  
    7. GO  
    8. CREATE TABLE [dbo].[Product](  
    9. [ProductID] [int] NOT NULL,  
    10. [Name] [nvarchar](max) NOT NULL,  
    11. [ProductNumber] [nvarchar](25) NOT NULL,  
    12. [MakeFlag] [bit] NOT NULL,  
    13. [FinishedGoodsFlag] [bit] NOT NULL,  
    14. [Color] [nvarchar](15) NULL,  
    15. [SafetyStockLevel] [smallint] NOT NULL,  
    16. [ReorderPoint] [smallint] NOT NULL,  
    17. [StandardCost] [money] NOT NULL,  
    18. [ListPrice] [money] NOT NULL,  
    19. [Size] [nvarchar](5) NULL,  
    20. [SizeUnitMeasureCode] [nchar](3) NULL,  
    21. [WeightUnitMeasureCode] [nchar](3) NULL,  
    22. [Weight] [decimal](8, 2) NULL,  
    23. [DaysToManufacture] [int] NOT NULL,  
    24. [ProductLine] [nchar](2) NULL,  
    25. [Class] [nchar](2) NULL,  
    26. [Style] [nchar](2) NULL,  
    27. [ProductSubcategoryID] [int] NULL,  
    28. [ProductModelID] [int] NULL,  
    29. [SellStartDate] [datetime] NOT NULL,  
    30. [SellEndDate] [datetime] NULL,  
    31. [DiscontinuedDate] [datetime] NULL,  
    32. [rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,  
    33. [ModifiedDate] [datetime] NOT NULL  
    34. ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]  
    35. GO  

    Can we insert some data to the tables now?

    Insert data to table

    You can use the below query to insert the data to SalesOrderDetail.

    1. USE [TrialsDB]  
    2. GO  
    3. INSERT INTO [dbo].[SalesOrderDetail]  
    4. ([SalesOrderID]  
    5. ,[CarrierTrackingNumber]  
    6. ,[OrderQty]  
    7. ,[ProductID]  
    8. ,[SpecialOfferID]  
    9. ,[UnitPrice]  
    10. ,[UnitPriceDiscount]  
    11. ,[rowguid]  
    12. ,[ModifiedDate])  
    13. VALUES  
    14. (<SalesOrderID, int,>  
    15. ,<CarrierTrackingNumber, nvarchar(25),>  
    16. ,<OrderQty, smallint,>  
    17. ,<ProductID, int,>  
    18. ,<SpecialOfferID, int,>  
    19. ,<UnitPrice, money,>  
    20. ,<UnitPriceDiscount, money,>  
    21. ,<rowguid, uniqueidentifier,>  
    22. ,<ModifiedDate, datetime,>)  
    23. GO 

    And the following query can be used for the table Product,

    1. USE [TrialsDB]  
    2. GO  
    3. INSERT INTO [dbo].[Product]  
    4. ([ProductID]  
    5. ,[Name]  
    6. ,[ProductNumber]  
    7. ,[MakeFlag]  
    8. ,[FinishedGoodsFlag]  
    9. ,[Color]  
    10. ,[SafetyStockLevel]  
    11. ,[ReorderPoint]  
    12. ,[StandardCost]  
    13. ,[ListPrice]  
    14. ,[Size]  
    15. ,[SizeUnitMeasureCode]  
    16. ,[WeightUnitMeasureCode]  
    17. ,[Weight]  
    18. ,[DaysToManufacture]  
    19. ,[ProductLine]  
    20. ,[Class]  
    21. ,[Style]  
    22. ,[ProductSubcategoryID]  
    23. ,[ProductModelID]  
    24. ,[SellStartDate]  
    25. ,[SellEndDate]  
    26. ,[DiscontinuedDate]  
    27. ,[rowguid]  
    28. ,[ModifiedDate])  
    29. VALUES  
    30. (<ProductID, int,>  
    31. ,<Name, nvarchar(max),>  
    32. ,<ProductNumber, nvarchar(25),>  
    33. ,<MakeFlag, bit,>  
    34. ,<FinishedGoodsFlag, bit,>  
    35. ,<Color, nvarchar(15),>  
    36. ,<SafetyStockLevel, smallint,>  
    37. ,<ReorderPoint, smallint,>  
    38. ,<StandardCost, money,>  
    39. ,<ListPrice, money,>  
    40. ,<Size, nvarchar(5),>  
    41. ,<SizeUnitMeasureCode, nchar(3),>  
    42. ,<WeightUnitMeasureCode, nchar(3),>  
    43. ,<Weight, decimal(8,2),>  
    44. ,<DaysToManufacture, int,>  
    45. ,<ProductLine, nchar(2),>  
    46. ,<Class, nchar(2),>  
    47. ,<Style, nchar(2),>  
    48. ,<ProductSubcategoryID, int,>  
    49. ,<ProductModelID, int,>  
    50. ,<SellStartDate, datetime,>  
    51. ,<SellEndDate, datetime,>  
    52. ,<DiscontinuedDate, datetime,>  
    53. ,<rowguid, uniqueidentifier,>  
    54. ,<ModifiedDate, datetime,>)  
    55. GO  

    So let us say, we have inserted the data as follows. If you feel tired of inserting data manually, you can always turn the SQL script file attached which has the insertion queries. Just run that, you will be all OK. If you don’t know how to generate SQL scripts with data, I strongly recommend you to have a read here.

    Next thing we are going to do is creating a ADO.NET Entity Data Model.

    Create Entity Data Model

    Right click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the processes, you can see the edmx file and other files in your model folder. Here I gave Dashboard for our Entity data model name. Now you can see a file with edmx extension has been created. If you open that file, you can see as below.

    Entity Data Model
    Figure: Entity Data Model

    Now go back our Web API controller. Please change the code as below.

    1. using System;  
    2. using  System.Collections.Generic;  
    3. using  System.Linq;  
    4. using  System.Net;  
    5. using  System.Net.Http;  
    6. using  System.Web.Http;  
    7. using  MyDashboard.Models;  
    8. using  Newtonsoft.Json;  
    9. namespace MyDashboard.Controllers  
    10. {  
    11.     public class WidgetController: ApiController  
    12.     {  
    13.         public DashboardEntities de = new DashboardEntities();  
    14.         Retriever ret = new Retriever();  
    15.         public string getWidgetData()  
    16.         {  
    17.             var dataList = ret.GetWidgetData(de);  
    18.             return dataList;  
    19.         }  
    20.     }  
    21. }   

    Here we have created a new model class Retriever and we have added a method GetWidgetData in that class. Now let us see what I have coded in that.

    1. using Newtonsoft.Json;  
    2. using System;  
    3. using System.Collections.Generic;  
    4. using System.Linq;  
    5. using System.Web;  
    6. namespace MyDashboard.Models  
    7. {  
    8.     public class Retriever  
    9.     {  
    10.         public string GetWidgetData(DashboardEntities de)  
    11.         {  
    12.             try  
    13.             {  
    14.                 using(de)  
    15.                 {  
    16.                     var resList = (from sales in de.SalesOrderDetails join prod in de.Products on sales.ProductID equals prod.ProductID select new  
    17.                     {  
    18.                         ProductName = prod.Name,  
    19.                             QuantityOrdered = sales.OrderQty  
    20.                     });  
    21.                     var res = resList.GroupBy(d => d.ProductName).Select(g => new  
    22.                     {  
    23.                         name = g.FirstOrDefault().ProductName,  
    24.                             y = g.Sum(s => s.QuantityOrdered)  
    25.                     });  
    26.                     return JsonConvert.SerializeObject(res, Formatting.None, new JsonSerializerSettings()  
    27.                     {  
    28.                         ReferenceLoopHandling = ReferenceLoopHandling.Ignore  
    29.                     });  
    30.                 }  
    31.             }  
    32.             catch(Exception)  
    33.             {  
    34.                 throw new NotImplementedException();  
    35.             }  
    36.         }  
    37.     }  
    38. }   

    Here we are using LINQ to fetch the data, we use JOIN in the query to find the Name from the table Products. Once the data is ready, we just group by the column ProductName and sum ofQuantityOrdered.

    1. var res = resList.GroupBy(d => d.ProductName).Select(g => new  
    2. {  
    3.     name = g.FirstOrDefault().ProductName,  
    4.         y = g.Sum(s => s.QuantityOrdered)  
    5. });   

    So the coding part to fetch the data from database is read, now we need to check whether our Web API is ready for action!. To check that, you just need to run the URL http://localhost:1646/Api/Widget. Here, Widget is our Web API controller name. I hope you get the data as a result. If you are getting the errorServer Error in ‘/’ Application The resource cannot be found, you need to configure your Web API in Global.asax.cs. You got this error just because you created an Empty project with only needed references. So here we need to do his step by our own. No worries, we will do it now. Just change the Global.asax.cs as follows.

    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.Http;  
    6. using System.Web.Mvc;  
    7. using System.Web.Routing;  
    8. namespace MyDashboard  
    9. {  
    10.     public class MvcApplication: System.Web.HttpApplication  
    11.     {  
    12.         protected void Application_Start()  
    13.         {  
    14.             AreaRegistration.RegisterAllAreas();  
    15.             GlobalConfiguration.Configure(WebApiConfig.Register); //This is for setting the configuration  
    16.             RouteConfig.RegisterRoutes(RouteTable.Routes);  
    17.         }  
    18.     }  
    19. }   

    Now build your application and run the same URL again, you will get the output as follows.

    Web API Output
    Figure:  Web API Output

    Now we will go back to our angular JS files and consume this Web API. You need to change the scripts in the app.js, controller.js, factory.js as follows.

    app.js

    1. (function () {  
    2.    'use strict';  
    3.    angular.module('WidgetsApp', []);  
    4. })();  

    controller.js

    1. (function()  
    2. {  
    3.     'use strict';  
    4.     angular.module('WidgetsApp').controller('WidgetsController', function($scope, factory)  
    5.     {  
    6.         var res = factory.getData();  
    7.         var options;  
    8.         if(res != undefined)  
    9.         {  
    10.             res.then(function(d)  
    11.             {  
    12.                 var data = JSON.parse(d.data);  
    13.             }, function(error)  
    14.             {  
    15.                 console.log('Oops! Something went wrong while fetching the data.');  
    16.             });  
    17.         }  
    18.     });  
    19. })();   

    Once our service is called, we will get the data in return. We will parse the same and store it in a variable for future use.

    1. var data = JSON.parse(d.data);   

    factory.js

    1. (function()  
    2. {  
    3.     'use strict';  
    4.     angular.module('WidgetsApp').service('factory', function($http)  
    5.     {  
    6.         this.getData = function()  
    7.         {  
    8.             var url = 'Api/Widget';  
    9.             return $http(  
    10.             {  
    11.                 type: 'get',  
    12.                 url: url  
    13.             });  
    14.         }  
    15.     });  
    16. })();   

    AS you can see we are just calling our Web API Api/Widget with the help of Angular $http.

    Now we need a view to show our data right? Yes, we need a controller too!

    Create a MVC controller

    To create a controller, we need to right click on the controller folder, Add – Controller. I hope you will be given a controller as follows.

    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.Mvc;  
    6. namespace MyDashboard.Controllers  
    7. {  
    8.     public class HomeController: Controller  
    9.     {  
    10.         // GET: Home  
    11.         public ActionResult Index()  
    12.         {  
    13.             return View();  
    14.         }  
    15.     }  
    16. }  

    Here Home is our controller name.

    Now we need a view, right?

    Creating a view

    To create a view, just right click on your controller name, Add View, then click  Add.

    Creating a view
                                                             Figure: Creating a view

    Now in your view add the needed references.

    1. <script src="~/scripts/jquery-1.10.2.min.js"></script>  
    2. <script src="~/scripts/jquery-ui-1.11.4.min.js"></script>  
    3. <script src="~/scripts/angular.min.js"></script>  
    4. <script src="~/scripts/angular-aria.js"></script>  
    5. <script src="~/scripts/angular-route.js"></script>  
    6. <script src="~/scripts/Widgets/app.js"></script>  
    7. <script src="~/scripts/Widgets/controller.js"></script>  
    8. <script src="~/scripts/Widgets/factory.js"></script>  

    Once we add the references, we can call our AngularJS controller as follows.

    1. <div ng-app="WidgetsApp">  
    2.     <div ng-controller="WidgetsController"> </div>  
    3. </div>   

    Now if you run your application, you can see our Web API call works fine and successfully get the data. Next thing we need to do is create charts with the data we get.

    Create chart widgets with the data

    As I said, we are going to to create HighChart chart widgets, we need to add a reference to use that plug in.

    1. <script src="https://code.highcharts.com/highcharts.js"></script>   

    Now create elements where we can load our chart.

    1. <div ng-app="WidgetsApp">  
    2.     <div ng-controller="WidgetsController">  
    3.         <div id="widgetPie" class="widget">Placeholder for chart</div>  
    4.         <div id="widgetspline" class="widget">Placeholder for chart</div>  
    5.         <div id="widgetBar" class="widget">Placeholder for chart</div>  
    6.         <div id="widgetLine" class="widget">Placeholder for chart</div>  
    7.         <div id="widgetScatter" class="widget">Placeholder for chart</div>  
    8.         <div id="widgetColumn" class="widget">Placeholder for chart</div>  
    9.     </div>  
    10. </div>   

    You can style your elements as follows if you want, but this is optional.

    1. <style>  
    2.     .widget {  
    3.         width: 30%;  
    4.         border: 1px solid #ccc;  
    5.         padding: 10px;  
    6.         margin: 5px;  
    7.         border-radius: 3px;  
    8.         transition: none;  
    9.         -webkit-transition: none;  
    10.         -moz-transition: none;  
    11.         -o-transition: none;  
    12.         cursor: move;  
    13.         display: inline-block;  
    14.         float: left;  
    15.     }  
    16. </style>   

    Go back to our Angular JS controller and add the below codes right after we get the data from server.

    Pie Chart

    1. var data = JSON.parse(d.data);  
    2. var categories = [];  
    3. for(var i = 0; i < data.length; i++)  
    4. {  
    5.     categories.push(data[i].name)  
    6. }  
    7. options = new Highcharts.chart('widgetPie',  
    8. {  
    9.     credits:  
    10.     {  
    11.         enabled: false  
    12.     },  
    13.     chart:  
    14.     {  
    15.         type: 'pie',  
    16.         renderTo: ''  
    17.     },  
    18.     title:  
    19.     {  
    20.         text: 'Product VS Quantity - Pie Chart'  
    21.     },  
    22.     plotOptions:  
    23.     {  
    24.         pie:  
    25.         {  
    26.             allowPointSelect: true,  
    27.             cursor: 'pointer',  
    28.             dataLabels:  
    29.             {  
    30.                 enabled: false,  
    31.                 format: '<b>{point.name}</b>: {point.y:,.0f}'  
    32.             }  
    33.         }  
    34.     },  
    35.     series: [  
    36.     {  
    37.         name: 'Quantity',  
    38.         data: data  
    39.     }]  
    40. });   

    Now run your application, you can see a pie chart with the data given.

    Pie Chart In MVC With Angular JS And Web API
    Figure:  Pie Chart In MVC With Angular JS And Web API

    Column Chart

    1. options = new Highcharts.chart('widgetColumn',  
    2. {  
    3.     credits:  
    4.     {  
    5.         enabled: false  
    6.     },  
    7.     chart:  
    8.     {  
    9.         type: 'column',  
    10.         renderTo: ''  
    11.     },  
    12.     title:  
    13.     {  
    14.         text: 'Product VS Quantity - Column Chart'  
    15.     },  
    16.     series: [  
    17.     {  
    18.         name: 'Quantity',  
    19.         data: data  
    20.     }]  
    21. });   

    Now run your application, you can see a column chart with the data given.

    Column Chart In MVC With Angular JS And Web API
    Figure:  Column Chart In MVC With Angular JS And Web API

    Bar Chart

    1. options = new Highcharts.chart('widgetBar',  
    2. {  
    3.     credits:  
    4.     {  
    5.         enabled: false  
    6.     },  
    7.     chart:  
    8.     {  
    9.         type: 'bar',  
    10.         renderTo: ''  
    11.     },  
    12.     title:  
    13.     {  
    14.         text: 'Product VS Quantity - Bar Chart'  
    15.     },  
    16.     series: [  
    17.     {  
    18.         name: 'Quantity',  
    19.         data: data  
    20.     }]  
    21. });   

    Now run your application, you can see a Bar chart with the data given.

    Bar Chart In MVC With Angular JS And Web API
    Figure:  Bar Chart In MVC With Angular JS And Web API

    Line Chart

    1. options = new Highcharts.chart('widgetLine',  
    2. {  
    3.     credits:  
    4.     {  
    5.         enabled: false  
    6.     },  
    7.     chart:  
    8.     {  
    9.         type: 'line',  
    10.         renderTo: ''  
    11.     },  
    12.     title:  
    13.     {  
    14.         text: 'Product VS Quantity - Line Chart'  
    15.     },  
    16.     series: [  
    17.     {  
    18.         name: 'Quantity',  
    19.         data: data  
    20.     }]  
    21. });   

    Now run your application, you can see a Line chart with the data given.

    Line Chart In MVC With Angular JS And Web API
    Figure: Line Chart In MVC With Angular JS And Web API

    Spline Chart

    1. options = new Highcharts.chart('widgetspline',  
    2. {  
    3.     credits:  
    4.     {  
    5.         enabled: false  
    6.     },  
    7.     chart:  
    8.     {  
    9.         type: 'spline',  
    10.         renderTo: ''  
    11.     },  
    12.     title:  
    13.     {  
    14.         text: 'Product VS Quantity - Spline Chart'  
    15.     },  
    16.     series: [  
    17.     {  
    18.         name: 'Quantity',  
    19.         data: data  
    20.     }]  
    21. });   

    Now run your application, you can see a Spline chart with the data given.

    Spline Chart In MVC With Angular JS And Web API
    Figure: Spline Chart In MVC With Angular JS And Web API

    Scatter Chart

    1. options = new Highcharts.chart('widgetScatter',  
    2. {  
    3.     credits:  
    4.     {  
    5.         enabled: false  
    6.     },  
    7.     chart:  
    8.     {  
    9.         type: 'scatter',  
    10.         renderTo: ''  
    11.     },  
    12.     title:  
    13.     {  
    14.         text: 'Product VS Quantity - Scatter Chart'  
    15.     },  
    16.     series: [  
    17.     {  
    18.         name: 'Quantity',  
    19.         data: data  
    20.     }]  
    21. });   

    Now run your application, you can see a Scatter chart with the data given.

    Scatter Chart In MVC With Angular JS And Web API
    Figure: Scatter Chart In MVC With Angular JS And Web API

    Now this is how the complete code for our controller.js file looks.

    1. (function()  
    2. {  
    3.     'use strict';  
    4.     angular.module('WidgetsApp').controller('WidgetsController', function($scope, factory)  
    5.     {  
    6.         var res = factory.getData();  
    7.         var options;  
    8.         if(res != undefined)  
    9.         {  
    10.             res.then(function(d)  
    11.             {  
    12.                 var data = JSON.parse(d.data);  
    13.                 var categories = [];  
    14.                 for(var i = 0; i < data.length; i++)  
    15.                 {  
    16.                     categories.push(data[i].name)  
    17.                 }  
    18.                 options = new Highcharts.chart('widgetPie',  
    19.                 {  
    20.                     credits:  
    21.                     {  
    22.                         enabled: false  
    23.                     },  
    24.                     chart:  
    25.                     {  
    26.                         type: 'pie',  
    27.                         renderTo: ''  
    28.                     },  
    29.                     title:  
    30.                     {  
    31.                         text: 'Product VS Quantity - Pie Chart'  
    32.                     },  
    33.                     plotOptions:  
    34.                     {  
    35.                         pie:  
    36.                         {  
    37.                             allowPointSelect: true,  
    38.                             cursor: 'pointer',  
    39.                             dataLabels:  
    40.                             {  
    41.                                 enabled: false,  
    42.                                 format: '<b>{point.name}</b>: {point.y:,.0f}'  
    43.                             }  
    44.                         }  
    45.                     },  
    46.                     series: [  
    47.                     {  
    48.                         name: 'Quantity',  
    49.                         data: data  
    50.                     }]  
    51.                 });  
    52.                 options = new Highcharts.chart('widgetColumn',  
    53.                 {  
    54.                     credits:  
    55.                     {  
    56.                         enabled: false  
    57.                     },  
    58.                     chart:  
    59.                     {  
    60.                         type: 'column',  
    61.                         renderTo: ''  
    62.                     },  
    63.                     title:  
    64.                     {  
    65.                         text: 'Product VS Quantity - Column Chart'  
    66.                     },  
    67.                     series: [  
    68.                     {  
    69.                         name: 'Quantity',  
    70.                         data: data  
    71.                     }]  
    72.                 });  
    73.                 options = new Highcharts.chart('widgetBar',  
    74.                 {  
    75.                     credits:  
    76.                     {  
    77.                         enabled: false  
    78.                     },  
    79.                     chart:  
    80.                     {  
    81.                         type: 'bar',  
    82.                         renderTo: ''  
    83.                     },  
    84.                     title:  
    85.                     {  
    86.                         text: 'Product VS Quantity - Bar Chart'  
    87.                     },  
    88.                     series: [  
    89.                     {  
    90.                         name: 'Quantity',  
    91.                         data: data  
    92.                     }]  
    93.                 });  
    94.                 options = new Highcharts.chart('widgetLine',  
    95.                 {  
    96.                     credits:  
    97.                     {  
    98.                         enabled: false  
    99.                     },  
    100.                     chart:  
    101.                     {  
    102.                         type: 'line',  
    103.                         renderTo: ''  
    104.                     },  
    105.                     title:  
    106.                     {  
    107.                         text: 'Product VS Quantity - Line Chart'  
    108.                     },  
    109.                     series: [  
    110.                     {  
    111.                         name: 'Quantity',  
    112.                         data: data  
    113.                     }]  
    114.                 });  
    115.                 options = new Highcharts.chart('widgetspline',  
    116.                 {  
    117.                     credits:  
    118.                     {  
    119.                         enabled: false  
    120.                     },  
    121.                     chart:  
    122.                     {  
    123.                         type: 'spline',  
    124.                         renderTo: ''  
    125.                     },  
    126.                     title:  
    127.                     {  
    128.                         text: 'Product VS Quantity - Spline Chart'  
    129.                     },  
    130.                     series: [  
    131.                     {  
    132.                         name: 'Quantity',  
    133.                         data: data  
    134.                     }]  
    135.                 });  
    136.                 options = new Highcharts.chart('widgetScatter',  
    137.                 {  
    138.                     credits:  
    139.                     {  
    140.                         enabled: false  
    141.                     },  
    142.                     chart:  
    143.                     {  
    144.                         type: 'scatter',  
    145.                         renderTo: ''  
    146.                     },  
    147.                     title:  
    148.                     {  
    149.                         text: 'Product VS Quantity - Scatter Chart'  
    150.                     },  
    151.                     series: [  
    152.                     {  
    153.                         name: 'Quantity',  
    154.                         data: data  
    155.                     }]  
    156.                 });  
    157.             }, function(error)  
    158.             {  
    159.                 console.log('Oops! Something went wrong while fetching the data.');  
    160.             });  
    161.         }  
    162.     });  
    163. })();   

    If you have configured all the chart types, we can see the output now:

    Chart Widgets In MVC With Angular JS And Web API
    We have done everything!. That’s fantastic right? Have a happy coding.

    Conclusion

    Did I miss anything that you may think is needed? Did you try Web API yet? Have you ever wanted to do this requirement? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

    Your turn. What do you think?

    A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, ASP.NET Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

    Please see this article in my blog here . 
     
    Read more articles on ASP.NET:


    Similar Articles