Working With IgniteUI Chart igDataChart Control

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] [intNOT NULL,  
  10. [Name] [nvarchar](maxNOT NULL,  
  11. [ProductNumber] [nvarchar](25) NOT NULL,  
  12. [MakeFlag] [bitNOT NULL,  
  13. [FinishedGoodsFlag] [bitNOT NULL,  
  14. [Color] [nvarchar](15) NULL,  
  15. [SafetyStockLevel] [smallintNOT NULL,  
  16. [ReorderPoint] [smallintNOT 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] [intNOT NULL,  
  24. [ProductLine] [nchar](2) NULL,  
  25. [Class] [nchar](2) NULL,  
  26. [Style] [nchar](2) NULL,  
  27. [ProductSubcategoryID] [intNULL,  
  28. [ProductModelID] [intNULL,  
  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, NULLNULLNULLNULL, 0, NULLNULLNULLNULLNULLCAST(0x0000921E00000000 AS DateTime), NULLNULL, 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, NULLNULLNULLNULL, 0, NULLNULLNULLNULLNULLCAST(0x0000921E00000000 AS DateTime), NULLNULL, 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, NULLNULLNULLNULL, 1, NULLNULLNULLNULLNULLCAST(0x0000921E00000000 AS DateTime), NULLNULL, 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, NULLNULLNULLNULL, 0, NULLNULLNULLNULLNULLCAST(0x0000921E00000000 AS DateTime), NULLNULL, 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, NULLNULLNULLNULL, 1, NULLNULLNULLNULLNULLCAST(0x0000921E00000000 AS DateTime), NULLNULL, 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, NULLNULLNULLNULL, 0, NULL, N'L 'NULLNULLNULLCAST(0x0000921E00000000 AS DateTime), NULLNULL, 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, NULLNULLNULLNULL, 0, NULL, N'M 'NULLNULLNULLCAST(0x0000921E00000000 AS DateTime), NULLNULL, 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.

Up Next
    Ebook Download
    View all
    Learn
    View all