In this post, we will see how we can use an IgniteUI chart control in our MVC Application. If you are new to IgniteUI controls, I strongly recommend you to read my previous post related to the IgniteUI grid. Here, I am working with IgniteUI Grid Control. We are going to use the chart control available in the kit. We will create MVC Application in Visual Studio. I hope you will like this.

Background

I determine that you have already gone though my previous article about IgniteUI grid control. You can consider it as an introduction to the control kit. Now as I mentioned, we will try to create a chart, using the chart control.

Prerequisites

As I said in the introduction part, we are going to create an IgniteUI grid in MVC Application. So, you must have Visual Studio installed in your machine.

  • Visual Studio
  • SQL
  • IgniteUI control

Table of Content

  • Download and install IgniteUI
  • Set up database
  • Creating models and entity
  • Configure MVC application
  • Creating IgniteUI Chart

Download and install IgniteUI

Please see my previous post to see the steps of installing the Ignite UI in your machine.

Set up database

  1. USE [master]
  2. GO
  3. /****** Object: Database [TrialsDB] Script Date: 07/14/2016 10:56:41 AM ******/
  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
Create table with data
  1. USE [TrialsDB]
  2. GO
  3. /****** Object: Table [dbo].[Product] Script Date: 5/12/2016 10:54:48 AM ******/
  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
  36. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (1, N'Adjustable Race', N'AR-5381', 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N'694215b7-08f7-4c0d-acb1-d734ba44c0c8', CAST(0x00009A5C00A53CF8 AS DateTime))
  37. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (2, N'Bearing Ball', N'BA-8327', 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N'58ae3c20-4f3a-4749-a7d4-d568806cc537', CAST(0x00009A5C00A53CF8 AS DateTime))
  38. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (3, N'BB Ball Bearing', N'BE-2349', 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 1, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N'9c21aed2-5bfa-4f18-bcb8-f11638dc2e4e', CAST(0x00009A5C00A53CF8 AS DateTime))
  39. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (4, N'Headset Ball Bearings', N'BE-2908', 0, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N'ecfed6cb-51ff-49b5-b06c-7d8ac834db8b', CAST(0x00009A5C00A53CF8 AS DateTime))
  40. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (316, N'Blade', N'BL-2036', 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 1, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N'e73e9750-603b-4131-89f5-3dd15ed5ff80', CAST(0x00009A5C00A53CF8 AS DateTime))
  41. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (317, N'LL Crankarm', N'CA-5965', 0, 0, N'Black', 500, 375, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, N'L ', NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N'3c9d10b7-a6b2-4774-9963-c19dcee72fea', CAST(0x00009A5C00A53CF8 AS DateTime))
  42. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (318, N'ML Crankarm', N'CA-6738', 0, 0, N'Black', 500, 375, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, N'M ', NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N'eabb9a92-fa07-4eab-8955-f0517b4a4ca7', CAST(0x00009A5C00A53CF8 AS DateTime))
Creating models and entity

If you don’t know how to create an entity in your solution, please read here. I have mentioned the steps to be followed in that article. Once you have created the entity, you are good to go.

Here, I am assuming that you have created an entity and got a model class as preceding.

  1. //------------------------------------------------------------------------------
  2. // <auto-generated>
  3. // This code was generated from a template.
  4. //
  5. // Manual changes to this file may cause unexpected behavior in your application.
  6. // Manual changes to this file will be overwritten if the code is regenerated.
  7. // </auto-generated>
  8. //------------------------------------------------------------------------------
  9. namespace IgniteUI.Models
  10. {
  11. using System;
  12. using System.Collections.Generic;
  13. public partial class Product {
  14. public int ProductID {
  15. get;
  16. set;
  17. }
  18. public string Name {
  19. get;
  20. set;
  21. }
  22. public string ProductNumber {
  23. get;
  24. set;
  25. }
  26. public bool MakeFlag {
  27. get;
  28. set;
  29. }
  30. public bool FinishedGoodsFlag {
  31. get;
  32. set;
  33. }
  34. public string Color {
  35. get;
  36. set;
  37. }
  38. public short SafetyStockLevel {
  39. get;
  40. set;
  41. }
  42. public short ReorderPoint {
  43. get;
  44. set;
  45. }
  46. public decimal StandardCost {
  47. get;
  48. set;
  49. }
  50. public decimal ListPrice {
  51. get;
  52. set;
  53. }
  54. public string Size {
  55. get;
  56. set;
  57. }
  58. public string SizeUnitMeasureCode {
  59. get;
  60. set;
  61. }
  62. public string WeightUnitMeasureCode {
  63. get;
  64. set;
  65. }
  66. public Nullable < decimal > Weight {
  67. get;
  68. set;
  69. }
  70. public int DaysToManufacture {
  71. get;
  72. set;
  73. }
  74. public string ProductLine {
  75. get;
  76. set;
  77. }
  78. public string Class {
  79. get;
  80. set;
  81. }
  82. public string Style {
  83. get;
  84. set;
  85. }
  86. public Nullable < int > ProductSubcategoryID {
  87. get;
  88. set;
  89. }
  90. public Nullable < int > ProductModelID {
  91. get;
  92. set;
  93. }
  94. public System.DateTime SellStartDate {
  95. get;
  96. set;
  97. }
  98. public Nullable < System.DateTime > SellEndDate {
  99. get;
  100. set;
  101. }
  102. public Nullable < System.DateTime > DiscontinuedDate {
  103. get;
  104. set;
  105. }
  106. public System.Guid rowguid {
  107. get;
  108. set;
  109. }
  110. public System.DateTime ModifiedDate {
  111. get;
  112. set;
  113. }
  114. }
  115. }
Configure MVC application

As you have finished your installing, we can create an MVC application now. Open your Visual Studio and click on new project. Name your project. Here, I am going to name my project as IgniteUIGrid. Select MVC template and click OK.

Click on the reference and add DLL reference of IgiteUI from C:\Program Files (x86)\Infragistics\2016.1\Ignite UI\MVC\MVC6\Bin\dnx451 or from the folder where you have installed the IgniteUI.

Create controller and actions

Now, create a Controller, as follows.

  1. using System.Web.Mvc;
  2. namespace IgniteUI.Controllers
  3. {
  4. public class ChartController: Controller
  5. {
  6. private IgniteUI.Models.TrialsDBEntities db = new IgniteUI.Models.TrialsDBEntities();
  7. public ActionResult Index()
  8. {
  9. return View();
  10. }
  11. }
  12. }
Now, we will create a JsonResult action for fetching the products from database.
  1. [HttpGet]
  2. public JsonResult Getproducts()
  3. {
  4. var model = db.Products.AsQueryable().GroupBy(g => g.Name, g => g.ReorderPoint, (key, g) => new
  5. {
  6. Name = key,
  7. ReorderPoint = g.Take(1)
  8. }).Take(10);
  9. return Json(model, JsonRequestBehavior.AllowGet);
  10. }
Here, I am just grouping the items together and taking the first value for Y axis. And as you know, we will be setting ‘Name’ as the X axis value in chart.

Now, shall we create a view.

Create view

  1. @using Infragistics.Web.Mvc;
  2. @using IgniteUI.Models;
  3. @model IQueryable<IgniteUI.Models.Product>
Creating IgniteUI Chart

So, our view is ready. We will create an element where we can render our chart.

  1. <div style="width: 100%;">
  2. <div id="chart"></div>
  3. </div>
What is next? Yes, you are right. We need an AJAX call.
  1. <script>
  2. $(function() {
  3. $.ajax({
  4. type: 'GET',
  5. url: 'http://localhost:39044/chart/Getproducts',
  6. beforeSend: function() {},
  7. success: function(data) {
  8. GenerateChart(data);
  9. },
  10. error: function(e) {
  11. console.log('Error occured: ' + e.message);
  12. }
  13. });
  14. });
  15. </script>
Here, GenerateChart is where we actually build our chart.
  1. function GenerateChart(chartData)
  2. {
  3. $("#chart").igDataChart({
  4. width: "100%",
  5. height: "500px",
  6. title: "Product vs Reorder Point",
  7. subtitle: "Final products and reorder Point",
  8. dataSource: chartData,
  9. axes: [{
  10. name: "NameAxis",
  11. type: "categoryX",
  12. title: "Product Name",
  13. label: "Name"
  14. }, {
  15. name: "YAxisReorderPoint",
  16. type: "numericY",
  17. minimumValue: 0,
  18. title: "Reorder Point",
  19. }],
  20. series: [{
  21. name: "NameReorderPoint",
  22. type: "column",
  23. isHighlightingEnabled: true,
  24. isTransitionInEnabled: true,
  25. xAxis: "NameAxis",
  26. yAxis: "YAxisReorderPoint",
  27. valueMemberPath: "ReorderPoint"
  28. }]
  29. });
  30. }
Go to your shared view folder, open _Layout.cshtml and add the following references to the view.
  1. <!-- Ignite UI Required Combined CSS Files -->
  2. < link href = "http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css"
  3. rel = "stylesheet" / > < link href = "http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css"
  4. rel = "stylesheet" / >
  5. <!--CSS file specific for chart styling -->
  6. < link href = "http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/modules/infragistics.ui.chart.css"
  7. rel = "stylesheet" / > < script src = "http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js" > < /script> < script src = "http://code.jquery.com/jquery-1.9.1.min.js" > < /script> < script src = "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" > < /script>
  8. <!-- Ignite UI Required Combined JavaScript Files -->
  9. < script src = "http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js" > < /script> < script src = "http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js" > < /script> < script src = "http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.dv.js" > < /script>
Now, please run your application and go to the http://localhost:39044/Chart. There, you can see a chart with the data you have given.

Ignite_UI_Chart_Control
Ignite_UI_Chart_Control

Sounds good? I hope you have got some knowledge about the Ignite UI chart control. That’s all for today. See you soon with other Ignite UI controls.

Conclusion

Did I miss anything that you think was needed? 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, or ASP.Net Forum instead of commenting here. Tweet or email me a link to your question there. I’ll definitely try to help if I can.

Please see this article in my blog here.