Post
Ask Question

Create Charts In ASP.NET MVC Using Ignite UI jQuery

In enterprise applications, our focus is on the representation of data in the form of information. Visual elements are the best way to represent data so that data can be easy to understand.

The objective of the business application is to turn data into data analysis so that top authorities can make some important decisions. The best way is data visualization charts. Unfortunately, there are not enough built-in controls in MVC that give the best pictorial representation of data. However, there are several third-party component vendors that provide rich chart data controls and one of those component vendors is Infragistics. 

In this tutorial, I will show you how to build a complete data-presentable MVC web application using Visual Studio 2017, C#, and Ignite UI JavaScript chart controls. You can download a trial version of Ignite UI for JavaScript here.

The tutorial will cover following charts and their subcategories:

  1. Business chart
  2. Polar Chart
  3. Radial Chart
  4. Range Chart
  5. Shape Chart
  6. Spline Chart
  7. Stacked Chart
  8. Step Chart

Let’s start. First, create an MVC web application in Visual Studio 2017 and open  “~/Views/Shared/_Layout.cshtml” page and add the following Ignite-UI CSS

  1. theme.css
  2. CSS

And also add the scripts files

  1. core.js
  2. dv.js
  1. <!-- Ignite UI Required Combined CSS Files -->  
  2. <link href="http://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />  
  3. <link href="http://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet" />  
  4.   
  5. <!-- Ignite UI Required Combined JavaScript Files -->  
  6. <script src="http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script>  
  7. <script src="http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.dv.js"></script>  

Listing 1.

Also make sure your project includes “jquery-1.11.3.js”, “modernizr-2.8.3.js”, and “jquery-ui” (1.11.1) and above versions if not please add the following scripting links.

  1. <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>  
  2. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>  
  3. <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>  

Listing 2.

Now, add a new controller named “ChartsController.cs” also add a view named “index.cshtml” in “~/views/Charts/” and make it the default controller in “~/App_Start/RouteConfig.cs” file as shown in Listing 3.

  1. public static void RegisterRoutes(RouteCollection routes)  
  2. {  
  3.      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  4.   
  5.      routes.MapRoute(  
  6.          name: "Default",  
  7.          url: "{controller}/{action}/{id}",  
  8.          defaults: new { controller = "Charts", action = "Index", id = UrlParameter.Optional }  
  9.      );  
  10. }   

Listing 3.

Add two data models “Chart” and “Charts” in models folder. These data models will represent the main and subcategories of charts as shown in listing 4 and 5.

  1. /// <summary>  
  2. /// This will represent the chart  
  3. /// </summary>  
  4. public class Chart  
  5. {  
  6.     /// <summary>  
  7.     /// Every chart has a Id like 1, 2, 3 so on  
  8.     /// </summary>  
  9.     public int Id { get; set; }  
  10.     /// <summary>  
  11.     ///  Category Id will hold the Id of parent chart to maintain Category and sub category relationship  
  12.     /// </summary>  
  13.     public int CategoryId { get; set; }  
  14.     /// <summary>  
  15.     /// Name of the Chart  
  16.     /// </summary>  
  17.     public string Name { get; set; }  
  18.     /// <summary>  
  19.     /// To hold the data for a chart  
  20.     /// </summary>  
  21.     public string Data { get; set; }  
  22. }  

Listing 4.

  1. /// <summary>  
  2. /// This class will represent the List of charts with main and sub subcategories  
  3. /// </summary>  
  4. public class Charts  
  5. {  
  6.     /// <summary>  
  7.     /// This is main category of chart  
  8.     /// </summary>  
  9.     public Chart Category { get; set; }  
  10.     /// <summary>  
  11.     /// This will hold the subcategories of this main chart  
  12.     /// </summary>  
  13.     public List<Chart> SubCategory { get; set; }  
  14. }  

Listing 5.

Now, open the ChartsController.cs and the following code. We have a property chart, it will hold the list of charts in ignite ui and in the constructor of ChartsController we are calling the LoadCharts() method that assigns the list of charts as shown in Listing 6.

  1. /// <summary>  
  2. /// This will hold list of charts  
  3. /// </summary>  
  4. public List<Charts> Charts { get; set; }  
  5.   
  6. /// <summary>  
  7. /// Constructor to initialize the charts property  
  8. /// </summary>  
  9. public ChartsController()  
  10. {  
  11.     Charts = LoadCharts();  
  12. }  
  13.   
  14. /// <summary>  
  15. /// This Method will add all the charts  
  16. /// </summary>  
  17. /// <returns></returns>  
  18. public List<Charts> LoadCharts()  
  19. {  
  20.     return Charts = new List<Charts>()  
  21.     {  
  22.         new Charts  
  23.         {  
  24.             Category = new Chart { Id = 1, CategoryId = 0, Name = "Business Chart" },  
  25.             SubCategory = new List<Chart>  
  26.             {  
  27.                 new Chart { Id = 1, CategoryId =1, Name = "Bar"  },  
  28.                 new Chart { Id = 2, CategoryId =1, Name = "Bubble"  },  
  29.                 new Chart { Id = 3, CategoryId =1, Name = "Column"  },  
  30.                 new Chart { Id = 4, CategoryId =1, Name = "Doughnut" },  
  31.                 new Chart { Id = 5, CategoryId =1, Name = "Financial"  },  
  32.                 new Chart { Id = 6, CategoryId =1, Name = "Funnel"  },  
  33.                 new Chart { Id = 7, CategoryId =1, Name = "Line"  },  
  34.                 new Chart { Id = 8, CategoryId =1, Name = "Pie" },  
  35.                 new Chart { Id = 8, CategoryId =1, Name = "Point" },  
  36.                 new Chart { Id = 8, CategoryId =1, Name = "Scatter" },  
  37.                 new Chart { Id = 8, CategoryId =1, Name = "Sparkline" }  
  38.   
  39.             }  
  40.         },  
  41.         new Charts  
  42.         {  
  43.             Category = new Chart { Id = 2, CategoryId = 0, Name = "Polar Chart" },  
  44.             SubCategory = new List<Chart>  
  45.               {  
  46.                   new Chart { Id = 1, CategoryId =2, Name = "Polar Area"  },  
  47.                   new Chart { Id = 2, CategoryId =2, Name = "Polar Line"  },  
  48.                   new Chart { Id = 3, CategoryId =2, Name = "Polar Point"  },  
  49.                   new Chart { Id = 4, CategoryId =2, Name = "Polar Spline" },  
  50.                   new Chart { Id = 5, CategoryId =2, Name = "Polar Spline Area"  }  
  51.               }  
  52.           },  
  53.   
  54.           new Charts  
  55.           {  
  56.               Category = new Chart { Id = 3, CategoryId = 0, Name = "Radial Chart" },  
  57.               SubCategory = new List<Chart>  
  58.               {  
  59.                   new Chart { Id = 1, CategoryId =3, Name = "Radial Area"  },  
  60.                   new Chart { Id = 2, CategoryId =3, Name = "Radial Line"  },  
  61.                   new Chart { Id = 3, CategoryId =3, Name = "Radial Column"  },  
  62.                   new Chart { Id = 4, CategoryId =3, Name = "Radial Pie" }  
  63.               }  
  64.           },  
  65.           new Charts  
  66.           {  
  67.               Category = new Chart { Id = 4, CategoryId = 0, Name = "Range Chart" },  
  68.               SubCategory = new List<Chart>  
  69.               {  
  70.                   new Chart { Id = 1, CategoryId =4, Name = "Range Area"  },  
  71.                   new Chart { Id = 2, CategoryId =4, Name = "Range Column"  }  
  72.   
  73.               }  
  74.           },  
  75.           new Charts  
  76.           {  
  77.               Category = new Chart { Id = 5, CategoryId = 0, Name = "Spline Chart" },  
  78.               SubCategory = new List<Chart>  
  79.               {  
  80.                   new Chart { Id = 1, CategoryId =5, Name = "Spline"  },  
  81.                   new Chart { Id = 2, CategoryId =5, Name = "Spline Area"  }  
  82.   
  83.               }  
  84.           },  
  85.           new Charts  
  86.           {  
  87.               Category = new Chart { Id = 6, CategoryId = 0, Name = "Stacked Chart" },  
  88.               SubCategory = new List<Chart>  
  89.               {  
  90.                   new Chart { Id = 1, CategoryId =6, Name = "Stacked Area"  },  
  91.                   new Chart { Id = 2, CategoryId =6, Name = "Stacked Bar"  },  
  92.                   new Chart { Id = 3, CategoryId =6, Name = "Stacked Column"  },  
  93.                   new Chart { Id = 4, CategoryId =6, Name = "Stacked Line"  },  
  94.                   new Chart { Id = 5, CategoryId =6, Name = "Stacked Spline"  },  
  95.                   new Chart { Id = 6, CategoryId =6, Name = "Stacked Spline Area"  },  
  96.                   new Chart { Id = 7, CategoryId =6, Name = "100% Stacked Area"  },  
  97.                   new Chart { Id = 8, CategoryId =6, Name = "100% Stacked Bar" },  
  98.                   new Chart { Id = 9, CategoryId =6, Name = "100% Stacked Column" },  
  99.                   new Chart { Id = 10, CategoryId =6, Name = "100% Stacked Line" },  
  100.                   new Chart { Id = 11, CategoryId =6, Name = "100% Stacked Spline" },  
  101.                   new Chart { Id = 12, CategoryId =6, Name = "100% Stacked Spline Area" }  
  102.               }  
  103.           },  
  104.           new Charts  
  105.           {  
  106.               Category = new Chart { Id = 7, CategoryId = 0, Name = "Step Chart" },  
  107.               SubCategory = new List<Chart>  
  108.               {  
  109.                   new Chart { Id = 1, CategoryId =7, Name = "Step Area"  },  
  110.                   new Chart { Id = 2, CategoryId =7, Name = "Step Line"  },  
  111.                   new Chart { Id = 3, CategoryId =7, Name = "Waterfall"  }  
  112.   
  113.               }  
  114.           },  
  115.           new Charts  
  116.           {  
  117.               Category = new Chart { Id = 8, CategoryId = 0, Name = "Shape Chart" },  
  118.               SubCategory = new List<Chart>  
  119.               {  
  120.                   new Chart { Id = 1, CategoryId =7, Name = "Binding Break Point Event"  },  
  121.                   new Chart { Id = 2, CategoryId =7, Name = "Polygon"  },  
  122.                   new Chart { Id = 3, CategoryId =7, Name = "Polyline"  }  
  123.   
  124.               }  
  125.           }  
  126.   
  127.   
  128.       };  
  129.   }  

Listing 6.

Index() action has a list of charts. In this charts property, we are constructing another list of charts with the help of this. This list contains the list of SelectListItem class with value and text properties that are going to bind with the drop-down on the view with the help of ViewData as shown in Listing 7.

  1. public ActionResult Index()  
  2. {  
  3.     List<SelectListItem> Charts = new List<SelectListItem>();  
  4.     var CategorysCharts = (from chart in this.Charts select chart.Category).ToList();  
  5.   
  6.     foreach (var chart in CategorysCharts)  
  7.     {  
  8.         Charts.Add(new SelectListItem { Value = chart.Id.ToString(), Text = chart.Name });  
  9.     }  
  10.   
  11.     ViewData["CategoryCharts"] = Charts;  
  12. ViewData["SubCategoryCharts"] = new List<SelectListItem>();  
  13.   
  14.     return View();  
  15. }  

Listing 7.

In listing 8, GetSubCategoryCharts() method is taking one argument, CategoryChartId, and returning the list of subcategories of charts.  

  1. [HttpPost]  
  2. public ActionResult GetSubCategoryCharts(string CategoryChartId)  
  3. {  
  4.     int pId;  
  5.     List<Chart> charts = new List<Chart>();  
  6.     if (!string.IsNullOrEmpty(CategoryChartId))  
  7.     {  
  8.         pId = Convert.ToInt32(CategoryChartId);  
  9.         List<Chart> SubCategoryCharts = (from chart in Charts where chart.Category.Id == pId select                                       chart.SubCategory).FirstOrDefault();  
  10.         SubCategoryCharts.ForEach(x =>  
  11.         {  
  12.             charts.Add(new Chart { Id = x.Id, Name = x.Name, CategoryId=x.CategoryId });  
  13.         });  
  14.     }  
  15.       
  16. return Json(charts, JsonRequestBehavior.AllowGet);  
  17. }  

Listing 8.

Now, open the view to add two dropdowns controls, one for main chart category and another one for subcategories as shown in Listing 9.

When user will change the item in ddlMainCategoryChart dropdown, LoadSubCategoryCharts() javascript function will add the list of subcategories charts in ddlSubCategoryChart dropdown and when user will select subcategory chart using ddlSubCategoryChart, a javascript function renderChart() will load that particular chart as partial view with the help of LoadPartialView().

  1. @model charts_demo_ignite_ui.Models.Chart  
  2.   
  3. <script>  
  4.     function LoadSubCategoryCharts() {  
  5.         var id = $('#ddlMainCategoryChart').val();  
  6.   
  7.         $.ajax({  
  8.             type: "post",  
  9.             url: "/Charts/GetSubCategoryCharts",  
  10.             dataType: "html",  
  11.             data: "CategoryChartId=" + id,  
  12.             contentType: "application/x-www-form-urlencoded;charset=utf-8",  
  13.             //  async: true,  
  14.             success: function (data) {  
  15.                 var items = "";  
  16.                 items = "<option value=''>--select--</option>";  
  17.                 $.each(JSON.parse(data), function (i, item) {  
  18.   
  19.                     items += "<option value=\"" + item.Id + "\">" + item.Name + "</option>";  
  20.                 });  
  21.                 $('#ddlSubCategoryChart').html(items);  
  22.             },  
  23.             error: function (e) { display(e); }  
  24.         });  
  25.     }  
  26.   
  27.   
  28.     function renderChart() {  
  29.         var name = $("#ddlSubCategoryChart :selected").text();  
  30.         $.ajax({  
  31.             type: "post",  
  32.             url: "/Charts/RenderChart",  
  33.             dataType: "html",  
  34.             data: "name=" + name,  
  35.             contentType: "application/x-www-form-urlencoded;charset=utf-8",  
  36.             //  async: true,  
  37.             success: function (result) { LoadPartialView(result); },  
  38.             error: function (e) {  
  39.                 console.log(JSON.stringify(e));  
  40.             }  
  41.         });  
  42.     }  
  43.   
  44.     function LoadPartialView(result) {  
  45.         $("#partialView").html("");  
  46.         $("#partialView").html(result);  
  47.     }  
  48.   
  49. </script>  
  50.   
  51. @{  
  52.     ViewBag.Title = "ignite UI Charts";  
  53. }  
  54. <br />  
  55. <div class="form-group">  
  56.     <label class="col-lg-2 control-label" for="business">Charts:</label>  
  57.     <div class="col-lg-10">  
  58.         @Html.DropDownListFor(model => model.Id, ViewData["CategoryCharts"] as List<SelectListItem>, "Select", new { onchange = "LoadSubCategoryCharts();", @id = "ddlMainCategoryChart", @class = "form-control input-xlarge required", @type = "text", @autocomplete = "off" })  
  59.     </div>  
  60. </div>  
  61. <br />  
  62. <br />  
  63. <div class="form-group">  
  64.     <label class="col-lg-2 control-label" for="business">Subcategory  Charts:</label>  
  65.     <div class="col-lg-10">  
  66.         @Html.DropDownListFor(model => model.Id, ViewData["SubCategoryCharts"] as List<SelectListItem>, "Select", new { onchange = "renderChart();", @id = "ddlSubCategoryChart", @class = "form-control input-xlarge required", @type = "text", @autocomplete = "off" })  
  67.     </div>  
  68. </div>  
  69. <br />  
  70. <br />  
  71. <div class="form-group">  
  72.     <div id="partialView">  
  73.     </div>  
  74. </div>  

Listing 9.

Add a partial view named “~/Views/Shared/_RenderChart.cshtml” in which we can render our chart.

Now, build the project and run it in the web browser.

MVC
Figure 1. 

Web user interface is ready to render ignite-ui charts. 

Let’s add data models which are going to be used as data source for the charts. In Listing 10 the “CountryEnergyProductionModel” will represent the year-by-year energy production for five countries. This data model is going to be used in "Stacked Area", "Stacked Bar", "Stacked", "Stacked Line","Stacked Spline","Stacked Spline Area","100 % Stacked Area","100 % Stacked Bar","100 % Stacked Column","100% Stacked Line","100% Stacked Spline","100% Stacked Spline Area","Bar","Column","Line" ,"Point".

  1. public class CountryEnergyProductionModel  
  2.  {  
  3.      public int Year { get; set; }  
  4.      public double Canada { get; set; }  
  5.      public double SaudiArabia { get; set; }  
  6.      public double Russia { get; set; }  
  7.      public double UnitedStates { get; set; }  
  8.      public double China { get; set; }  
  9.   
  10.      public string GetCountriesEnergyProductionInJosn()  
  11.      {  
  12.          List<CountryEnergyProductionModel> data = new List<CountryEnergyProductionModel>();  
  13.   
  14.          CountryEnergyProductionModel year1 = new CountryEnergyProductionModel();  
  15.          year1.Year = 2005;  
  16.          year1.Canada = 18.8932;  
  17.          year1.SaudiArabia = 25.4401;  
  18.          year1.Russia = 51.0796;  
  19.          year1.UnitedStates = 69.4437;  
  20.          year1.China = 63.9524;  
  21.          data.Add(year1);  
  22.   
  23.          CountryEnergyProductionModel year2 = new CountryEnergyProductionModel();  
  24.          year2.Year = 2006;  
  25.          year2.Canada = 19.2273;  
  26.          year2.SaudiArabia = 24.6105;  
  27.          year2.Russia = 52.0557;  
  28.          year2.UnitedStates = 70.7539;  
  29.          year2.China = 68.2333;  
  30.          data.Add(year2);  
  31.   
  32.   
  33.          CountryEnergyProductionModel year3 = new CountryEnergyProductionModel();  
  34.          year3.Year = 2007;  
  35.          year3.Canada = 19.5439;  
  36.          year3.SaudiArabia = 23.7326;  
  37.          year3.Russia = 52.5599;  
  38.          year3.UnitedStates = 71.4000;  
  39.          year3.China = 73.2809;  
  40.          data.Add(year3);  
  41.          CountryEnergyProductionModel year4 = new CountryEnergyProductionModel();  
  42.          year4.Year = 2008;  
  43.          year4.Canada = 19.0196;  
  44.          year4.SaudiArabia = 25.1682;  
  45.          year4.Russia = 52.5460;  
  46.          year4.UnitedStates = 73.2178;  
  47.          year4.China = 78.3599;  
  48.          data.Add(year4);  
  49.   
  50.          CountryEnergyProductionModel year5 = new CountryEnergyProductionModel();  
  51.          year5.Year = 2009;  
  52.          year5.Canada = 18.3249;  
  53.          year5.SaudiArabia = 22.837;  
  54.          year5.Russia = 50.4291;  
  55.          year5.UnitedStates = 72.6409;  
  56.          year5.China = 84.0643;  
  57.          data.Add(year5);  
  58.   
  59.          var json = new JavaScriptSerializer().Serialize(data);  
  60.          return json;  
  61.      }  
  62.  }  

Listing 10.

As shown in Listing 11, second data model is “CountryPopulationModel” which represents the country-wise population growth for 2 years for the following countries: “China”, “India”, “United States”, and “Brazil”; and this data model is going to be used in "Spline", "Spline Area", "Step Area", "Step Line", "Waterfall", "Doughnut", and "Pie".

  1. public class CountryPopulationModel  
  2. {  
  3.         public string CountryName { get; set; }  
  4.         public int Pop1995 { get; set; }  
  5.         public int Pop2005 { get; set; }  
  6.   
  7.         public string GetCountriesPopulationInJson()  
  8.         {  
  9.             List<CountryPopulationModel> countries = new List<CountryPopulationModel>();  
  10.   
  11.             CountryPopulationModel country1 = new CountryPopulationModel();  
  12.             country1.CountryName = "China";  
  13.             country1.Pop1995 = 1216;  
  14.             country1.Pop2005 = 1216;  
  15.             countries.Add(country1);  
  16.   
  17.             CountryPopulationModel country2 = new CountryPopulationModel();  
  18.             country2.CountryName = "India";  
  19.             country2.Pop1995= 920;  
  20.             country2.Pop2005= 1090;  
  21.             countries.Add(country2);  
  22.   
  23.             CountryPopulationModel country3 = new CountryPopulationModel();  
  24.             country3.CountryName = "United States";  
  25.             country3.Pop1995 = 266;  
  26.             country3.Pop2005 = 295;  
  27.             countries.Add(country3);  
  28.   
  29.             CountryPopulationModel country4 = new CountryPopulationModel();  
  30.             country4.CountryName = "Indonesia";  
  31.             country4.Pop1995 = 197;  
  32.             country4.Pop2005 = 229;  
  33.             countries.Add(country4);  
  34.   
  35.             CountryPopulationModel country5 = new CountryPopulationModel();  
  36.             country5.CountryName = "Brazil";  
  37.             country5.Pop1995 = 161;  
  38.             country5.Pop2005 = 186;  
  39.             countries.Add(country5);  
  40.   
  41.             var json = new JavaScriptSerializer().Serialize(countries);  
  42.   
  43.             return json;  
  44.         }  
  45.          
  46.   
  47. }  

Listing 11.

In listing 12, CityTemperatureModel data model represents the counties wise temperature for two cities on a particular date and it shows the variation in temperature every two hours. This data model will be used in "Radial Area", "Radial Column", "Radial Line", "Radial Pie", "Range Area", and "Range Column".

  1. public class CityTemperatureModel  
  2.  {  
  3.      public dynamic Date { get; set; }  
  4.      public string Time { get; set; }  
  5.      public double NewYorkCityTemp { get; set; }  
  6.      public double PhiladelphiaTemp { get; set; }  
  7.   
  8.   
  9.      public string GetCountriesTemperatureInJson()  
  10.      {  
  11.          List<CityTemperatureModel> countries = new List<CityTemperatureModel>();  
  12.   
  13.          CityTemperatureModel country1 = new CityTemperatureModel();  
  14.          country1.Date= "2013-07-16";  
  15.          country1.Time="1:00";  
  16.          country1.NewYorkCityTemp=85.46;  
  17.          country1.PhiladelphiaTemp=86.72;  
  18.          countries.Add(country1);  
  19.   
  20.          CityTemperatureModel country2 = new CityTemperatureModel();  
  21.          country2.Date="2013-07-16";  
  22.          country2.Time="3:00";  
  23.          country2.NewYorkCityTemp=82.76;  
  24.          country2.PhiladelphiaTemp=84.74;  
  25.          countries.Add(country2);  
  26.   
  27.          CityTemperatureModel country3 = new CityTemperatureModel();  
  28.          country3.Date="2013-07-16";  
  29.          country3.Time="5:00";  
  30.          country3.NewYorkCityTemp=80.6;  
  31.          country3.PhiladelphiaTemp=82.94;  
  32.          countries.Add(country3);  
  33.   
  34.          CityTemperatureModel country4 = new CityTemperatureModel();  
  35.          country4.Date="2013-07-16";  
  36.          country4.Time="7:00";  
  37.          country4.NewYorkCityTemp=79.34;  
  38.          country4.PhiladelphiaTemp = 82.22;  
  39.          countries.Add(country4);  
  40.   
  41.          CityTemperatureModel country5 = new CityTemperatureModel();  
  42.          country5.Date="2013-07-16";  
  43.          country5.Time="9:00";  
  44.          country5.NewYorkCityTemp=82.76;  
  45.          country5.PhiladelphiaTemp = 86;  
  46.          countries.Add(country5);  
  47.   
  48.          CityTemperatureModel country6 = new CityTemperatureModel();  
  49.          country6.Date="2013-07-16";  
  50.          country6.Time="11:00";  
  51.          country6.NewYorkCityTemp=86.54;  
  52.          country6.PhiladelphiaTemp= 88.88;  
  53.          countries.Add(country6);  
  54.   
  55.          CityTemperatureModel country7 = new CityTemperatureModel();  
  56.          country7.Date="2013-07-16";  
  57.          country7.Time="13:00";  
  58.          country7.NewYorkCityTemp=89.78;  
  59.          country7.PhiladelphiaTemp = 93.38;  
  60.          countries.Add(country7);  
  61.   
  62.          CityTemperatureModel country8 = new CityTemperatureModel();  
  63.          country8.Date="2013-07-16";  
  64.          country8.Time="15:00";  
  65.          country8.NewYorkCityTemp=92.48;  
  66.          country8.PhiladelphiaTemp= 93.2;  
  67.          countries.Add(country8);  
  68.   
  69.          CityTemperatureModel country9 = new CityTemperatureModel();  
  70.          country9.Date="2013-07-16";  
  71.          country9.Time="17:00";  
  72.          country9.NewYorkCityTemp=93.2;  
  73.          country9.PhiladelphiaTemp = 92.3;  
  74.          countries.Add(country9);  
  75.   
  76.          CityTemperatureModel country10 = new CityTemperatureModel();  
  77.          country10.Date="2013-07-16";  
  78.          country10.Time="19:00";  
  79.          country10.NewYorkCityTemp=91.4;  
  80.          country10.PhiladelphiaTemp= 92.48;  
  81.          countries.Add(country10);  
  82.   
  83.          CityTemperatureModel country11 = new CityTemperatureModel();  
  84.          country11.Date="2013-07-16";  
  85.          country11.Time="21:00";  
  86.          country11.NewYorkCityTemp=88.52;  
  87.          country11.PhiladelphiaTemp= 89.78;  
  88.          countries.Add(country11);  
  89.   
  90.          CityTemperatureModel country12 = new CityTemperatureModel();  
  91.          country12.Date="2013-07-16";  
  92.          country12.Time="23:00";  
  93.          country12.NewYorkCityTemp=88.16;  
  94.          country12.PhiladelphiaTemp = 86.72;  
  95.          countries.Add(country12);  
  96.   
  97.          var json = new JavaScriptSerializer().Serialize(countries);  
  98.          return json;  
  99.      }  
  100.   
  101.  }  

Listing 12.

In listing 13, the data model WeatherModel represent the hour wise weather forecast on a particular date, and  this data model is used in Polar Area", "Polar Line", "Polar Point", "Polar Spline", and "Polar Spline Area".

  1. public class WeatherModel  
  2.     {  
  3.         public int id { get; set; }  
  4.         public dynamic Date { get; set; }  
  5.         public string Time { get; set; }  
  6.         public double WindSpeed { get; set; }  
  7.         public double WindDirection { get; set; }  
  8.   
  9.         public string GetCountriesTemperatureInJson()  
  10.         {  
  11.             List<WeatherModel> weatherReport = new List<WeatherModel>();  
  12.   
  13.             WeatherModel weather1 = new WeatherModel();  
  14.             weather1.id = 0;  
  15.             weather1.Date = "2013-07-16";  
  16.             weather1.Time = "10:00";  
  17.             weather1.WindSpeed = 3.305;  
  18.             weather1.WindDirection = 141;  
  19.             weatherReport.Add(weather1);  
  20.   
  21.             WeatherModel weather2 = new WeatherModel();  
  22.             weather2.id = 1;  
  23.             weather2.Date = "2013-07-16";  
  24.             weather2.Time = "11:00";  
  25.             weather2.WindSpeed = 5.832;  
  26.             weather2.WindDirection = 181;  
  27.             weatherReport.Add(weather2);  
  28.   
  29.             WeatherModel weather3 = new WeatherModel();  
  30.             weather3.id = 2;  
  31.             weather3.Date = "2013-07-16";  
  32.             weather3.Time = "12:00";  
  33.             weather3.WindSpeed = 5.637;  
  34.             weather3.WindDirection = 179;  
  35.             weatherReport.Add(weather3);  
  36.   
  37.             WeatherModel weather4 = new WeatherModel();  
  38.             weather4.id = 3;  
  39.             weather4.Date = "2013-07-16";  
  40.             weather4.Time = "13:00";  
  41.             weather4.WindSpeed = 8.747;  
  42.             weather4.WindDirection = 196;  
  43.             weatherReport.Add(weather4);  
  44.   
  45.             WeatherModel weather5 = new WeatherModel();  
  46.             weather5.id = 4;  
  47.             weather5.Date = "2013-07-16";  
  48.             weather5.Time = "14:00";  
  49.             weather5.WindSpeed = 8.553;  
  50.             weather5.WindDirection = 208;  
  51.             weatherReport.Add(weather5);  
  52.   
  53.             WeatherModel weather6 = new WeatherModel();  
  54.             weather6.id = 5;  
  55.             weather6.Date = "2013-07-16";  
  56.             weather6.Time = "15:00";  
  57.             weather6.WindSpeed = 7.581;  
  58.             weather6.WindDirection = 207;  
  59.             weatherReport.Add(weather6);  
  60.   
  61.             WeatherModel weather7 = new WeatherModel();  
  62.             weather7.id = 6;  
  63.             weather7.Date = "2013-07-16";  
  64.             weather7.Time = "16:00";  
  65.             weather7.WindSpeed = 7.775;  
  66.             weather7.WindDirection = 211;  
  67.             weatherReport.Add(weather7);  
  68.   
  69.             WeatherModel weather8 = new WeatherModel();  
  70.             weather8.id = 7;  
  71.             weather8.Date = "2013-07-16";  
  72.             weather8.Time = "17:00";  
  73.             weather8.WindSpeed = 6.026;  
  74.             weather8.WindDirection = 214;  
  75.             weatherReport.Add(weather8);  
  76.   
  77.             WeatherModel weather9 = new WeatherModel();  
  78.             weather9.id = 8;  
  79.             weather9.Date = "2013-07-16";  
  80.             weather9.Time = "18:00";  
  81.             weather9.WindSpeed = 6.803;  
  82.             weather9.WindDirection = 208;  
  83.             weatherReport.Add(weather9);  
  84.   
  85.             WeatherModel weather10 = new WeatherModel();  
  86.             weather10.id = 9;  
  87.             weather10.Date = "2013-07-16";  
  88.             weather10.Time = "19:00";  
  89.             weather10.WindSpeed = 0.583;  
  90.             weather10.WindDirection = 236;  
  91.             weatherReport.Add(weather10);  
  92.   
  93.             WeatherModel weather11 = new WeatherModel();  
  94.             weather11.id = 10;  
  95.             weather11.Date = "2013-07-16";  
  96.             weather11.Time = "20:00";  
  97.             weather11.WindSpeed = 6.609;  
  98.             weather11.WindDirection = 307;  
  99.             weatherReport.Add(weather11);  
  100.   
  101.             WeatherModel weather12 = new WeatherModel();  
  102.             weather12.id = 10;  
  103.             weather12.Date = "2013-07-16";  
  104.             weather12.Time = "21:00";  
  105.             weather12.WindSpeed = 0.000;  
  106.             weather12.WindDirection = 357;  
  107.             weatherReport.Add(weather12);  
  108.   
  109.   
  110.             var json = new JavaScriptSerializer().Serialize(weatherReport);  
  111.   
  112.             return json;  
  113.         }  
  114.   
  115.     }  

Listing 15.

Add the RenderChart action method in ChartsController that will load the partial view _RenderChart.cshtml with charts data model which contains the data property. It has JSON formatted data that will plot the chart on the page as shown in listing 16.

  1. public ActionResult RenderChart(string name)  
  2.   {  
  3.       string data = string.Empty;  
  4.       CountryPopulationModel countryPopulation = new CountryPopulationModel();  
  5.       CityTemperatureModel cityTemperature = new CityTemperatureModel();  
  6.       CountryEnergyProductionModel countryEnergy = new CountryEnergyProductionModel();  
  7.       WeatherModel weather = new WeatherModel();  
  8.   
  9.       switch (name)  
  10.       {  
  11.           case "Stacked Area":  
  12.           case "Stacked Bar":  
  13.           case "Stacked Column":  
  14.           case "Stacked Line":  
  15.           case "Stacked Spline":  
  16.           case "Stacked Spline Area":  
  17.           case "100% Stacked Area":  
  18.           case "100% Stacked Bar":  
  19.           case "100% Stacked Column":  
  20.           case "100% Stacked Line":  
  21.           case "100% Stacked Spline":  
  22.           case "100% Stacked Spline Area":  
  23.           case "Bar":  
  24.           case "Column":  
  25.           case "Line":  
  26.           case "Point":  
  27.            
  28.               data = countryEnergy.GetCountriesEnergyProductionInJosn();  
  29.               break;  
  30.   
  31.           case "Radial Area":  
  32.           case "Radial Column":  
  33.           case "Radial Line":  
  34.           case "Radial Pie":  
  35.   
  36.           case "Range Area":  
  37.           case "Range Column":  
  38.               data = cityTemperature.GetCountriesTemperatureInJson();  
  39.               break;  
  40.   
  41.           case "Spline":  
  42.           case "Spline Area":  
  43.           case "Step Area":  
  44.           case "Step Line":  
  45.           case "Waterfall":  
  46.           case "Doughnut":  
  47.           case "Pie":  
  48.               data = countryPopulation.GetCountriesPopulationInJson();  
  49.               break;  
  50.   
  51.           case "Polar Area":  
  52.           case "Polar Line":  
  53.           case "Polar Point":  
  54.           case "Polar Spline":  
  55.           case "Polar Spline Area":  
  56.               data = weather.GetCountriesTemperatureInJson();  
  57.               break;  
  58.   
  59.   
  60.           default:  
  61.               break;  
  62.       }  
  63.   
  64.   
  65.       return PartialView("_RenderChart", new charts_demo_ignite_ui.Models.Chart { Name = name, Data = data });  
  66.   }  

Listing 16.

In _RenderCharts.cshtml file add the following code which will render the chart with the data which will be selected in subcategory dropdown list as shown in listing 17.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. @{  
  3.     switch (@Model.Name)  
  4.     {  
  5.         case "Bar":  
  6.             @Html.Partial("~/Views/shared/BusinessCharts/_Bar.cshtml", Model)  
  7.             break;  
  8.         case "Bubble":  
  9.             @Html.Partial("~/Views/shared/BusinessCharts/_Bubble.cshtml")  
  10.             break;  
  11.         case "Column":  
  12.             @Html.Partial("~/Views/shared/BusinessCharts/_Column.cshtml", Model)  
  13.             break;  
  14.         case "Doughnut":  
  15.             @Html.Partial("~/Views/shared/BusinessCharts/_Doughnut.cshtml", Model)  
  16.             break;  
  17.         case "Financial":  
  18.             @Html.Partial("~/Views/shared/BusinessCharts/_Financial.cshtml")  
  19.             break;  
  20.         case "Funnel":  
  21.             @Html.Partial("~/Views/shared/BusinessCharts/_Funnel.cshtml")  
  22.             break;  
  23.         case "Line":  
  24.             @Html.Partial("~/Views/shared/BusinessCharts/_Line.cshtml", Model)  
  25.             break;  
  26.         case "Pie":  
  27.             @Html.Partial("~/Views/shared/BusinessCharts/_Pie.cshtml", Model)  
  28.             break;  
  29.         case "Point":  
  30.             @Html.Partial("~/Views/shared/BusinessCharts/_Point.cshtml", Model)  
  31.             break;  
  32.         case "Scatter":  
  33.             @Html.Partial("~/Views/shared/BusinessCharts/_Scatter.cshtml")  
  34.             break;  
  35.         case "Sparkline":  
  36.             @Html.Partial("~/Views/shared/BusinessCharts/_Sparkline.cshtml")  
  37.             break;  
  38.         case "Polar Area":  
  39.             @Html.Partial("~/Views/shared/PolarCharts/_PolarArea.cshtml", Model)  
  40.             break;  
  41.         case "Polar Line":  
  42.             @Html.Partial("~/Views/shared/PolarCharts/_PolarLine.cshtml", Model)  
  43.             break;  
  44.         case "Polar Point":  
  45.             @Html.Partial("~/Views/shared/PolarCharts/_PolarPoint.cshtml", Model)  
  46.             break;  
  47.         case "Polar Spline":  
  48.             @Html.Partial("~/Views/shared/PolarCharts/_PolarSpline.cshtml", Model)  
  49.             break;  
  50.         case "Polar Spline Area":  
  51.             @Html.Partial("~/Views/shared/PolarCharts/_PolarSplineArea.cshtml", Model)  
  52.             break;  
  53.         case "Radial Area":  
  54.             @Html.Partial("~/Views/shared/RadialCharts/_RadialArea.cshtml", Model)  
  55.             break;  
  56.         case "Radial Column":  
  57.             @Html.Partial("~/Views/shared/RadialCharts/_RadialColumn.cshtml", Model)  
  58.             break;  
  59.         case "Radial Line":  
  60.             @Html.Partial("~/Views/shared/RadialCharts/_RadialLine.cshtml", Model)  
  61.             break;  
  62.         case "Radial Pie":  
  63.             @Html.Partial("~/Views/shared/RadialCharts/_RadialPie.cshtml", Model)  
  64.             break;  
  65.         case "Range Area":  
  66.             @Html.Partial("~/Views/shared/RangeCharts/_RangeArea.cshtml", Model)  
  67.             break;  
  68.         case "Range Column":  
  69.             @Html.Partial("~/Views/shared/RangeCharts/_RangeColumn.cshtml", Model)  
  70.             break;  
  71.         case "Spline":  
  72.             @Html.Partial("~/Views/shared/SplineCharts/_Spline.cshtml", Model)  
  73.             break;  
  74.         case "Spline Area":  
  75.             @Html.Partial("~/Views/shared/SplineCharts/_SplineArea.cshtml", Model)  
  76.             break;  
  77.         case "Stacked Area":  
  78.             @Html.Partial("~/Views/shared/StackedCharts/_StackedArea.cshtml", Model)  
  79.             break;  
  80.         case "Stacked Bar":  
  81.             @Html.Partial("~/Views/shared/StackedCharts/_StackedBar.cshtml", Model)  
  82.             break;  
  83.         case "Stacked Column":  
  84.             @Html.Partial("~/Views/shared/StackedCharts/_StackedColumn.cshtml", Model)  
  85.             break;  
  86.         case "Stacked Line":  
  87.             @Html.Partial("~/Views/shared/StackedCharts/_StackedLine.cshtml", Model)  
  88.             break;  
  89.         case "Stacked Spline":  
  90.             @Html.Partial("~/Views/shared/StackedCharts/_StackedSpline.cshtml", Model)  
  91.             break;  
  92.         case "Stacked Spline Area":  
  93.             @Html.Partial("~/Views/shared/StackedCharts/_StackedSplineArea.cshtml", Model)  
  94.             break;  
  95.         case "100% Stacked Area":  
  96.             @Html.Partial("~/Views/shared/StackedCharts/_100StackedArea.cshtml", Model)  
  97.             break;  
  98.         case "100% Stacked Bar":  
  99.             @Html.Partial("~/Views/shared/StackedCharts/_100StackedBar.cshtml", Model)  
  100.             break;  
  101.         case "100% Stacked Column":  
  102.             @Html.Partial("~/Views/shared/StackedCharts/_100StackedColumn.cshtml", Model)  
  103.             break;  
  104.         case "100% Stacked Line":  
  105.             @Html.Partial("~/Views/shared/StackedCharts/_100StackedLine.cshtml", Model)  
  106.             break;  
  107.         case "100% Stacked Spline":  
  108.             @Html.Partial("~/Views/shared/StackedCharts/_100StackedSpline.cshtml", Model)  
  109.             break;  
  110.         case "100% Stacked Spline Area":  
  111.             @Html.Partial("~/Views/shared/StackedCharts/_100StackedSplineArea.cshtml", Model)  
  112.             break;  
  113.         case "Step Area":  
  114.             @Html.Partial("~/Views/shared/StepCharts/_StepArea.cshtml",Model)  
  115.             break;  
  116.         case "Step Line":  
  117.             @Html.Partial("~/Views/shared/StepCharts/_StepLine.cshtml", Model)  
  118.             break;  
  119.         case "Waterfall":  
  120.             @Html.Partial("~/Views/shared/StepCharts/_Waterfall.cshtml", Model)  
  121.             break;  
  122.         case "Binding Break Event Data":  
  123.             @Html.Partial("~/Views/shared/ShapeCharts/_BindingBreakEvenData.cshtml")  
  124.             break;  
  125.         case "Polygon":  
  126.             @Html.Partial("~/Views/shared/ShapeCharts/_Polygon.cshtml")  
  127.             break;  
  128.         case "Polyline":  
  129.             @Html.Partial("~/Views/shared/ShapeCharts/_Polyline.cshtml")  
  130.             break;  
  131.         default:  
  132.             break;  
  133.     }  
  134.   
  135. }  

Listing 17.

Each chart has HTML and script with the data source property that draws the chart in the web page, and we need to assign the data source for each chart and in the .cshtml page, we have a markup @Html.Raw(Model.Data) which will populate the data source as JSON. 

Business Charts

Let’s render the business charts category.

Bar Chart 

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Bar.cshtml” and add the following html in it as shown in Listing 18.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  3. <script type="text/javascript">  
  4.     var lastFiveYears = @Html.Raw(Model.Data);  
  5.     $(document).ready(function () {  
  6.         $("#barChart").igDataChart({  
  7.             width: "98%",  
  8.             height: "550px",  
  9.             dataSource: lastFiveYears,  
  10.             title: "Energy Production Per Country",  
  11.             subtitle: "3 years Total Primary Energy producers",  
  12.             legend: { element: "barLegend" },  
  13.             axes: [{  
  14.                 name: "xAxis",  
  15.                 type: "numericX",  
  16.                 title: "Quadrillion Btu"  
  17.             }, {  
  18.                 name: "yAxis",  
  19.                 type: "categoryY",  
  20.                 label: "Year"  
  21.             }],  
  22.             series: [  
  23.              {  
  24.                 name: "series1",  
  25.                 title: "Russia",  
  26.                 type: "bar",  
  27.                 isHighlightingEnabled: true,  
  28.                 isTransitionInEnabled: true,  
  29.                 xAxis: "xAxis",  
  30.                 yAxis: "yAxis",  
  31.                 valueMemberPath: "Russia"  
  32.             }, {  
  33.                 name: "series2",  
  34.                 title: "United States",  
  35.                 type: "bar",  
  36.                 isHighlightingEnabled: true,  
  37.                 isTransitionInEnabled: true,  
  38.                 xAxis: "xAxis",  
  39.                 yAxis: "yAxis",  
  40.                 valueMemberPath: "UnitedStates"  
  41.             }, {  
  42.                 name: "series3",  
  43.                 title: "China",  
  44.                 type: "bar",  
  45.                 isHighlightingEnabled: true,  
  46.                 isTransitionInEnabled: true,  
  47.                 xAxis: "xAxis",  
  48.                 yAxis: "yAxis",  
  49.                 valueMemberPath: "China"  
  50.             }]  
  51.         });  
  52.     });  
  53. </script>  
  54. <style type="text/css">  
  55.     td {  
  56.         vertical-align: top;  
  57.     }  
  58.   
  59.     .chartElement {  
  60.         padding-bottom: 20px;  
  61.     }  
  62. </style>  
  63.  Bar Chart  
  64. <table>  
  65.     <tr>  
  66.         <td id="barChart" class="chartElement"></td>  
  67.         <td id="barLegend" style="float: left"></td>  
  68.     </tr>  
  69. </table>  

Listing 18.

MVC
Figure 2. 

Bubble Chart 

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Bubble.cshtml” so add the following HTML in it as shown in Listing 19.

  1. <script type="text/javascript" src="https://www.igniteui.com/data-files/us-fao-gross-production.js"></script>  
  2. <div class="chartContainer">  
  3.     <div class="chart">  
  4.         <h4>Bubble Chart</h4>  
  5.         <div id="chartBubble"></div>  
  6.     </div>  
  7. </div>  
  8. <div class="UNdata-attribution">  
  9.     Agricultural data from:<br />  
  10.     <a href="http://data.un.org/" target="_blank">UNdata</a>  
  11. </div>  
  12. <script type="text/javascript">  
  13.     var agriculturalData = [  
  14.         { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2007, "Value_Unit": "1,000,000 Int. $", "Value": 184698, "Population_Unit": "1,000,000 People", "Population": 302 },  
  15.         { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2006, "Value_Unit": "1,000,000 Int. $", "Value": 176803, "Population_Unit": "1,000,000 People", "Population": 299 },  
  16.         { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2005, "Value_Unit": "1,000,000 Int. $", "Value": 181432, "Population_Unit": "1,000,000 People", "Population": 296 },  
  17.         { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2004, "Value_Unit": "1,000,000 Int. $", "Value": 183519, "Population_Unit": "1,000,000 People", "Population": 294 },  
  18.         { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2003, "Value_Unit": "1,000,000 Int. $", "Value": 172458, "Population_Unit": "1,000,000 People", "Population": 291 },  
  19.         { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2002, "Value_Unit": "1,000,000 Int. $", "Value": 167494, "Population_Unit": "1,000,000 People", "Population": 288 },  
  20.         { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2001, "Value_Unit": "1,000,000 Int. $", "Value": 170755, "Population_Unit": "1,000,000 People", "Population": 285 },  
  21.         { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2000, "Value_Unit": "1,000,000 Int. $", "Value": 173640, "Population_Unit": "1,000,000 People", "Population": 282 }  
  22.     ];  
  23.         $(function () {  
  24.             function createBubbleChart(selector, dataSource) {  
  25.                 $(selector).igDataChart({  
  26.                     width: "400px",  
  27.                     height: "400px",  
  28.                     dataSource: dataSource,  
  29.                     title: "U.S. Agricultural Production Per Year",  
  30.                     subtitle: "Data from 2000-2007",  
  31.                     axes: [{  
  32.                         name: "xAxis",  
  33.                         type: "numericX",  
  34.                         interval: 10,  
  35.                         title: "Year",  
  36.                     }, {  
  37.                         name: "yAxis",  
  38.                         type: "numericY",  
  39.                         title: "Billions of USD",  
  40.                         maximumValue: 200000,  
  41.                         formatLabel: function (val) {  
  42.                             var bVal = (val / 1000),  
  43.                             rounded = Math.round(bVal * 100) / 100;  
  44.                             return "$" + rounded;  
  45.                         }  
  46.                     }],  
  47.                     series: [{  
  48.                         name: "bubble",  
  49.                         type: "bubble",  
  50.                         xAxis: "xAxis",  
  51.                         yAxis: "yAxis",  
  52.                         xMemberPath: "Year",  
  53.                         yMemberPath: "Value",  
  54.                         radiusMemberPath: "Population",  
  55.                         fillMemberPath: "Population",  
  56.                         labelMemberPath: "Population",  
  57.                         markerType: "circle",  
  58.                         radiusScale: {  
  59.                             minimumValue: 2,  
  60.                             maximumValue: 12,  
  61.                             isLogarithmic: true  
  62.                         },  
  63.                         fillScale: {  
  64.                             type: "value",  
  65.                             brushes: ["red", "orange", "yellow"],  
  66.                             minimumValue: 150,  
  67.                             maximumValue: 400  
  68.                         }  
  69.                     }],  
  70.                     horizontalZoomable: true,  
  71.                     verticalZoomable: true,  
  72.                     windowResponse: "immediate"  
  73.                 });  
  74.             }  
  75.             var dataSource = agriculturalData;  
  76.             createBubbleChart("#chartBubble", dataSource);  
  77.         });  
  78. </script>  

Listing 19.

MVC
Figure 2.

Column Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Column.cshtml” so add the following HTML in it as shown in Listing 20.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  3. <script type="text/javascript">  
  4. var lastFiveYears = @Html.Raw(Model.Data);  
  5.     $(function () {  
  6.         $("#columnChart").igCategoryChart({  
  7.             width: "98%",  
  8.             height: "350px",  
  9.             dataSource: lastFiveYears,  
  10.             chartType: "column",  
  11.             legend: { element: "columnLegend" },  
  12.             title: "$$(Chart_title_energy_production)",  
  13.             subtitle: "$$(Chart_subtitle_energy_production)",  
  14.             yAxisTitle: "$$(NumericAxis_title_energy_production)",  
  15.             isTransitionInEnabled: true,  
  16.             transitionInDuration: 500  
  17.         });  
  18.     });  
  19. </script>  
  20. <style type="text/css">  
  21.     td {  
  22.         vertical-align: top;  
  23.     }  
  24.     .chartElement {  
  25.         padding-bottom: 20px;  
  26.     }  
  27. </style>  
  28. <div style="display: table">  
  29.     <div id="columnChart" class="chartElement" style="display: table-cell; width: auto; padding-right: 50px"></div>  
  30.     <div id="columnLegend" style="width: 100px; display: table-cell;"></div>  
  31. </div>  
  32. <div class="EIA-attribution">  
  33.     $$(Chart_lbl_energyDataFrom):<br />  
  34.     <a href="http://www.eia.gov" target="_blank">U.S. Energy Information Administration (September 2012) </a>  
  35. </div>  

Listing 20

MVC
Figure 3. 

Doughnut Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Doughnut.cshtml” so add the following HTML in it as shown in Listing 21.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script id="populationTooltipTemplate" type="text/x-ig-tmpl">  
  3.     <div class="ui-chart-tooltip">  
  4.         <div>1995 Population: <label style="font-weight:500">${item.CountryName}</label> - <label style="font-weight:500">${item.Pop1995}0 000 000</label></div>  
  5.     </div>  
  6. </script>  
  7. <div id="chart"></div>  
  8. <script>  
  9.     $(function () {  
  10.         var data = @Html.Raw(Model.Data);  
  11.         $("#chart").igDoughnutChart({  
  12.             width: "100%",  
  13.             height: "550px",  
  14.             series:  
  15.             [{  
  16.                 name: "Pop1995",  
  17.                 labelMemberPath: "CountryName",  
  18.                 valueMemberPath: "Pop1995",  
  19.                 dataSource: data,  
  20.                 labelsPosition: "bestFit",  
  21.                 formatLabel: function (context) {  
  22.                     return context.itemLabel + " (" + context.item.Pop1995 + ")";  
  23.                 },  
  24.                 showTooltip: true,  
  25.                 tooltipTemplate: "populationTooltipTemplate",  
  26.                 brushes: ["#B284BE", "#5D8AA8", "#C9FFE5", "#7CB9E8", "#F19CBB"]  
  27.             }]  
  28.         });  
  29.     });  
  30. </script>  

Listing 21

MVC
Figure 4. 

Financial Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Financial.cshtml” so add the following html in it as shown in Listing 22.

  1. <script type="text/javascript" src="https://www.igniteui.com/data-files/financial-data.js"></script>  
  2. <script type="text/javascript">  
  3.     var dataAdobe = [  
  4.         { "Index": 1, "Date": "7/18/2013", "Open": 48.04, "High": 48.52, "Low": 48, "Close": 48.19, "Volume": 2641582 },  
  5.         { "Index": 2, "Date": "7/17/2013", "Open": 48.17, "High": 48.4, "Low": 47.78, "Close": 48.04, "Volume": 3135777 },  
  6.         { "Index": 3, "Date": "7/16/2013", "Open": 48.05, "High": 48.13, "Low": 47.36, "Close": 47.48, "Volume": 2473018 },  
  7.         { "Index": 4, "Date": "7/15/2013", "Open": 48.25, "High": 48.46, "Low": 48.1, "Close": 48.12, "Volume": 2122706 },  
  8.         { "Index": 5, "Date": "7/12/2013", "Open": 48.35, "High": 48.63, "Low": 48.08, "Close": 48.39, "Volume": 4135697 },  
  9.         { "Index": 6, "Date": "7/11/2013", "Open": 47.62, "High": 48, "Low": 47.5, "Close": 47.99, "Volume": 3293492 },  
  10.         { "Index": 7, "Date": "7/10/2013", "Open": 47.09, "High": 47.33, "Low": 46.64, "Close": 47.25, "Volume": 2683537 },  
  11.         { "Index": 8, "Date": "7/9/2013", "Open": 46.76, "High": 47.31, "Low": 46.73, "Close": 47.26, "Volume": 2578815 },  
  12.         { "Index": 9, "Date": "7/8/2013", "Open": 47.03, "High": 47.49, "Low": 46.44, "Close": 46.62, "Volume": 2813076 },  
  13.         { "Index": 10, "Date": "7/5/2013", "Open": 46.69, "High": 47.1, "Low": 46.55, "Close": 47, "Volume": 1614563 },  
  14.         { "Index": 11, "Date": "7/3/2013", "Open": 45.71, "High": 46.82, "Low": 45.66, "Close": 46.42, "Volume": 1601483 },  
  15.         { "Index": 12, "Date": "7/2/2013", "Open": 46, "High": 46.48, "Low": 45.72, "Close": 46.03, "Volume": 3025049 },  
  16.         { "Index": 13, "Date": "7/1/2013", "Open": 45.23, "High": 47.19, "Low": 44.88, "Close": 46.24, "Volume": 6341593 },  
  17.         { "Index": 14, "Date": "6/28/2013", "Open": 45.99, "High": 45.99, "Low": 45.39, "Close": 45.56, "Volume": 4052512 },  
  18.         { "Index": 15, "Date": "6/27/2013", "Open": 45.9, "High": 46.26, "Low": 45.59, "Close": 45.93, "Volume": 2916446 },  
  19.         { "Index": 16, "Date": "6/26/2013", "Open": 44.95, "High": 45.92, "Low": 44.9, "Close": 45.68, "Volume": 5356322 },  
  20.         { "Index": 17, "Date": "6/25/2013", "Open": 44.04, "High": 44.44, "Low": 43.46, "Close": 44.37, "Volume": 3368384 },  
  21.         { "Index": 18, "Date": "6/24/2013", "Open": 44.34, "High": 44.6, "Low": 43.37, "Close": 43.6, "Volume": 4492827 },  
  22.         { "Index": 19, "Date": "6/21/2013", "Open": 44.92, "High": 45, "Low": 44.23, "Close": 44.77, "Volume": 6294691 },  
  23.         { "Index": 20, "Date": "6/20/2013", "Open": 45.28, "High": 45.29, "Low": 44.45, "Close": 44.9, "Volume": 5488904 }  
  24.     ];  
  25.     var data = [  
  26.         { "Index": 1, "Date": "7/18/2013", "Open": 35.72, "High": 35.89, "Low": 35.22, "Close": 35.44, "Volume": 49547075 },  
  27.         { "Index": 2, "Date": "7/17/2013", "Open": 36.34, "High": 36.39, "Low": 35.49, "Close": 35.74, "Volume": 37289320 },  
  28.         { "Index": 3, "Date": "7/16/2013", "Open": 36.01, "High": 36.43, "Low": 35.96, "Close": 36.27, "Volume": 36378681 },  
  29.         { "Index": 4, "Date": "7/15/2013", "Open": 35.66, "High": 36.22, "Low": 35.58, "Close": 36.17, "Volume": 34145645 },  
  30.         { "Index": 5, "Date": "7/12/2013", "Open": 35.58, "High": 35.73, "Low": 35.28, "Close": 35.67, "Volume": 35502638 },  
  31.         { "Index": 6, "Date": "7/11/2013", "Open": 35, "High": 35.77, "Low": 34.9, "Close": 35.68, "Volume": 53638234 },  
  32.         { "Index": 7, "Date": "7/10/2013", "Open": 34.34, "High": 34.81, "Low": 34.32, "Close": 34.7, "Volume": 29658734 },  
  33.         { "Index": 8, "Date": "7/9/2013", "Open": 34.58, "High": 34.6, "Low": 34.14, "Close": 34.35, "Volume": 25320908 },  
  34.         { "Index": 9, "Date": "7/8/2013", "Open": 34.35, "High": 34.59, "Low": 33.98, "Close": 34.32, "Volume": 32398742 },  
  35.         { "Index": 10, "Date": "7/5/2013", "Open": 34.09, "High": 34.24, "Low": 33.58, "Close": 34.21, "Volume": 26085981 },  
  36.         { "Index": 11, "Date": "7/3/2013", "Open": 33.66, "High": 34.37, "Low": 33.6, "Close": 34.01, "Volume": 15994380 },  
  37.         { "Index": 12, "Date": "7/2/2013", "Open": 34.41, "High": 34.44, "Low": 33.63, "Close": 33.94, "Volume": 37634572 },  
  38.         { "Index": 13, "Date": "7/1/2013", "Open": 34.75, "High": 34.99, "Low": 34.33, "Close": 34.36, "Volume": 31064000 },  
  39.         { "Index": 14, "Date": "6/28/2013", "Open": 34.38, "High": 34.79, "Low": 34.34, "Close": 34.54, "Volume": 65548196 },  
  40.         { "Index": 15, "Date": "6/27/2013", "Open": 34.52, "High": 34.78, "Low": 34.5, "Close": 34.62, "Volume": 28993542 },  
  41.         { "Index": 16, "Date": "6/26/2013", "Open": 34.12, "High": 34.48, "Low": 33.89, "Close": 34.35, "Volume": 48667834 },  
  42.         { "Index": 17, "Date": "6/25/2013", "Open": 34.08, "High": 34.38, "Low": 33.46, "Close": 33.67, "Volume": 44073348 },  
  43.         { "Index": 18, "Date": "6/24/2013", "Open": 32.94, "High": 34.2, "Low": 32.57, "Close": 33.72, "Volume": 56113708 },  
  44.         { "Index": 19, "Date": "6/21/2013", "Open": 33.66, "High": 33.73, "Low": 33.05, "Close": 33.26, "Volume": 85338395 },  
  45.         { "Index": 20, "Date": "6/20/2013", "Open": 34.26, "High": 34.33, "Low": 33.37, "Close": 33.49, "Volume": 54496758 }  
  46.     ];  
  47.     $(function () {  
  48.         $("#candlestickChart").igDataChart({  
  49.             width: "100%",  
  50.             height: "500px",  
  51.             title: "Microsoft (MSFT) vs. Adobe (ADBE)",  
  52.             subtitle: "A comparison of stocks over time",  
  53.             horizontalZoomable: true,  
  54.             verticalZoomable: true,  
  55.             windowResponse: "immediate",  
  56.             axes: [{  
  57.                 name: "xAxis",  
  58.                 type: "categoryX",  
  59.                 dataSource: data,  
  60.                 label: "Date",  
  61.                 title: "Date",  
  62.                 interval: 10  
  63.             }, {  
  64.                 name: "yAxis",  
  65.                 type: "numericY",  
  66.                 title: "Price",  
  67.             }],  
  68.             series: [{  
  69.                 name: "series1",  
  70.                 dataSource: data,  
  71.                 title: "Price Series",  
  72.                 type: "financial",  
  73.                 displayType: "candlestick",  
  74.                 isTransitionInEnabled: true,  
  75.                 isHighlightingEnabled: true,  
  76.                 xAxis: "xAxis",  
  77.                 yAxis: "yAxis",  
  78.                 openMemberPath: "Open",  
  79.                 highMemberPath: "High",  
  80.                 lowMemberPath: "Low",  
  81.                 closeMemberPath: "Close",  
  82.                 showTooltip: true,  
  83.                 thickness: 1,  
  84.                 trendLineBrush: "rgba(68, 172, 214, .8)",  
  85.                 trendLineThickness: 5,  
  86.                 trendLineType: "exponentialAverage",  
  87.                 negativeBrush: "rgba(198, 45, 54, .8)"  
  88.             }, {  
  89.                 name: "series2",  
  90.                 dataSource: dataAdobe,  
  91.                 title: "Price Series",  
  92.                 type: "financial",  
  93.                 isTransitionInEnabled: true,  
  94.                 isHighlightingEnabled: true,  
  95.                 displayType: "candlestick",  
  96.                 xAxis: "xAxis",  
  97.                 yAxis: "yAxis",  
  98.                 openMemberPath: "Open",  
  99.                 highMemberPath: "High",  
  100.                 lowMemberPath: "Low",  
  101.                 closeMemberPath: "Close",  
  102.                 showTooltip: true,  
  103.                 thickness: 1,  
  104.                 trendLineBrush: "rgba(73, 73, 73, .8)",  
  105.                 trendLineThickness: 5,  
  106.                 trendLineType: "exponentialAverage",  
  107.                 negativeBrush: "rgba(198, 45, 54, .8)"  
  108.             }],  
  109.         });  
  110.   
  111.         $("#ohlcChart").igDataChart({  
  112.             width: "100%",  
  113.             height: "500px",  
  114.             title: "Microsoft (MSFT) vs. Adobe (ADBE)",  
  115.             subtitle: "A comparison of stocks over time",  
  116.             axes: [{  
  117.                 name: "xAxis",  
  118.                 type: "categoryX",  
  119.                 dataSource: data,  
  120.                 label: "Date",  
  121.                 interval: 10,  
  122.                 title: "Date",  
  123.             }, {  
  124.                 name: "yAxis",  
  125.                 type: "numericY",  
  126.                 title: "Price",  
  127.             }],  
  128.             series: [{  
  129.                 name: "series1",  
  130.                 dataSource: data,  
  131.                 title: "Price Series",  
  132.                 type: "financial",  
  133.                 isTransitionInEnabled: true,  
  134.                 displayType: "ohlc",  
  135.                 xAxis: "xAxis",  
  136.                 yAxis: "yAxis",  
  137.                 openMemberPath: "Open",  
  138.                 highMemberPath: "High",  
  139.                 lowMemberPath: "Low",  
  140.                 closeMemberPath: "Close",  
  141.                 showTooltip: true,  
  142.                 thickness: 2,  
  143.                 trendLineBrush: "rgba(68, 172, 214, .8)",  
  144.                 trendLineThickness: 5,  
  145.                 trendLineType: "exponentialAverage",  
  146.                 negativeBrush: "rgba(198, 45, 54, .8)"  
  147.             }, {  
  148.                 name: "series2",  
  149.                 dataSource: dataAdobe,  
  150.                 title: "Price Series",  
  151.                 type: "financial",  
  152.                 isTransitionInEnabled: true,  
  153.                 displayType: "ohlc",  
  154.                 xAxis: "xAxis",  
  155.                 yAxis: "yAxis",  
  156.                 openMemberPath: "Open",  
  157.                 highMemberPath: "High",  
  158.                 lowMemberPath: "Low",  
  159.                 closeMemberPath: "Close",  
  160.                 showTooltip: true,  
  161.                 thickness: 2,  
  162.                 trendLineBrush: "rgba(73, 73, 73, .8)",  
  163.                 trendLineThickness: 5,  
  164.                 trendLineType: "exponentialAverage",  
  165.                 negativeBrush: "rgba(198, 45, 54, .8)"  
  166.             }],  
  167.             horizontalZoomable: true,  
  168.             verticalZoomable: true,  
  169.             windowResponse: "immediate"  
  170.         });  
  171.     });  
  172. </script>  
  173.   
  174. <style type="text/css">  
  175.     td {  
  176.         vertical-align: top;  
  177.     }  
  178.   
  179.     .chartElement {  
  180.         margin-right: 10px;  
  181.     }  
  182.   
  183.     .chart-container {  
  184.         width: 49%;  
  185.         box-sizing: border-box;  
  186.         float: left;  
  187.     }  
  188.   
  189.         .chart-container h3 {  
  190.             text-align: center  
  191.         }  
  192.  
  193.     #charts {  
  194.         padding: 1px;  
  195.     }  
  196. </style>  
  197.   
  198. <div id="charts">  
  199.     <div class="chart-container">  
  200.         <h3>Candlestick</h3>  
  201.         <div id="candlestickChart" class="chartElement"></div>  
  202.     </div>  
  203.     <div class="chart-container">  
  204.         <h3>OHLC</h3>  
  205.         <div id="ohlcChart" class="chartElement"></div>  
  206.         <table>  
  207.             <tr><td><div class="Quandldata-attribution">Stock data from: <a href="http://www.quandl.com/" target="_blank">Quandl</a></div></td></tr>  
  208.         </table>  
  209.   
  210. </div>  
  211. </div>  

Listing 22.

MVC
Figure 5.

Funnel Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Funnel.cshtml” so add the following HTML in it as shown in Listing 23.

  1. <link href="https://www.igniteui.com/css/charts/chart-samples.css" type="text/css" rel="stylesheet" />  
  2. <script type="text/javascript">  
  3.         var data = [  
  4.             { Budget: 30, Department: "Administration" },  
  5.             { Budget: 50, Department: "Sales" },  
  6.             { Budget: 60, Department: "IT" },  
  7.             { Budget: 50, Department: "Marketing" },  
  8.             { Budget: 100, Department: "Development" },  
  9.             { Budget: 20, Department: "Support" }  
  10.         ];  
  11.   
  12.         $(function () {  
  13.             //  Create a basic funnel chart  
  14.             $("#chartNormal").igFunnelChart({  
  15.                 width: "100%",  //"325px",  
  16.                 height: "450px",  
  17.                 dataSource: data,  
  18.                 valueMemberPath: "Budget",  
  19.                 innerLabelMemberPath: "Budget",  
  20.                 innerLabelVisibility: "visible",  
  21.                 outerLabelMemberPath: "Department",  
  22.                 outerLabelVisibility: "visible"  
  23.             });  
  24.   
  25.             //  Create a funnel chart with weighted size slices  
  26.             $("#chartWeighted").igFunnelChart({  
  27.                 width: "100%",  //"325px",  
  28.                 height: "450px",  
  29.                 leftMargin: 20,  
  30.                 dataSource: data,  
  31.                 valueMemberPath: "Budget",  
  32.                 innerLabelMemberPath: "Budget",  
  33.                 innerLabelVisibility: "visible",  
  34.                 outerLabelMemberPath: "Department",  
  35.                 outerLabelVisibility: "visible",  
  36.                 funnelSliceDisplay: "weighted"  
  37.             });  
  38.   
  39.             //  Create an inverted funnel chart  
  40.             $("#chartInverted").igFunnelChart({  
  41.                 width: "100%",  //"325px",  
  42.                 height: "450px",  
  43.                 leftMargin: 20,  
  44.                 dataSource: data,  
  45.                 valueMemberPath: "Budget",  
  46.                 innerLabelMemberPath: "Budget",  
  47.                 innerLabelVisibility: "visible",  
  48.                 isInverted: true  
  49.             });  
  50.         });  
  51. </script>  
  52.   
  53. <div class="sampleContent">  
  54.     <div class="chartContainer chartContainer3">  
  55.         <h4>Funnel Chart</h4>  
  56.         <div id="chartNormal"></div>  
  57.     </div>  
  58.     <div class="chartContainer chartContainer3">  
  59.         <h4>Weighted Slices</h4>  
  60.         <div id="chartWeighted"></div>  
  61.     </div>  
  62.     <div class="chartContainer chartContainer3">  
  63.         <h4>Inverted Funnel Chart</h4>  
  64.         <div id="chartInverted"></div>  
  65.     </div>  
  66. </div>  

Listing 23

MVC
Figure 6. 

Line Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Line.cshtml” so add the following HTML in it as shown in Listing 24.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/uk-france-population.js"></script>  
  3. <script type="text/javascript">  
  4.   
  5.     $(function () {  
  6.   
  7.          var lastFiveYears = @Html.Raw(Model.Data);  
  8.   
  9.         $("#lineChart").igCategoryChart({  
  10.             width: "98%",  
  11.             height: "400px",  
  12.             legend: { element: "lineLegend" },  
  13.             title: "$$(Chart_title_countries_pop)",  
  14.             subtitle: "$$(Chart_subtitle_countries_1995_v_2005)",  
  15.             yAxisTitle: "$$(NumericAxis_title_population)",  
  16.             dataSource: data,  
  17.             chartType: "line",  
  18.             isTransitionInEnabled: true,  
  19.             transitionInDuration: 500  
  20.         });  
  21.     });  
  22. </script>  
  23.   
  24. <style type="text/css">  
  25.   
  26.   
  27.     .selectionOptions {  
  28.         margin-bottom: 10px;  
  29.     }  
  30.   
  31.     td {  
  32.         vertical-align: top;  
  33.     }  
  34.   
  35.     .chartElement {  
  36.         padding-bottom: 20px;  
  37.     }  
  38. </style>  
  39.   
  40. <div style="display: table">  
  41.   
  42.     <div id="lineChart" class="chartElement" style="display: table-cell; width: auto; padding-right: 50px"></div>  
  43.     <div id="lineLegend" style="width: 100px; display: table-cell;"></div>  
  44.   
  45. </div>  
  46. <div class="Quandl-attribution">  
  47.     $$(Chart_lbl_popDataFrom):  
  48.     <a href="http://www.quandl.com/" target="_blank">Quandl</a>  
  49. </div>  

Listing 24

MVC
Figure 7. 

Pie Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Pie.cshtml” so add the following HTML in it as shown in Listing 25.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <style type="text/css">  
  3.     #chart {  
  4.         position: relative;  
  5.         float: left;  
  6.         margin-right: 10px;  
  7.         margin-bottom: 10px;  
  8.     }  
  9. </style>  
  10.   
  11. <div id="chart"></div>  
  12.   
  13. <script>  
  14.   
  15.     $(function () {  
  16.   
  17.         var data = @Html.Raw(Model.Data)  
  18.   
  19.         $("#chart").igPieChart({  
  20.             width: "435px",  
  21.             height: "435px",  
  22.             dataSource: data, //JSON data defined above  
  23.             dataValue: "Pop2005",  
  24.             dataLabel: "CountryName",  
  25.             labelsPosition: "bestFit"  
  26.         });  
  27.   
  28.     });  
  29. </script>  

Listing 25.

MVC
Figure 8.

Point Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Point.cshtml” so add the following HTML in it as shown in Listing 26.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/uk-france-population.js"></script>  
  3. <script type="text/javascript">  
  4.   
  5.         $(function () {  
  6.   
  7.             var lastFiveYears = @Html.Raw(Model.Data);  
  8.   
  9.             $("#pointChart").igCategoryChart({  
  10.                 width: "98%",  
  11.                 height: "400px",  
  12.                 legend: { element: "pointLegend" },  
  13.                 title: "$$(Chart_title_countries_pop)",  
  14.                 subtitle: "$$(Chart_subtitle_countries_1995_v_2005)",  
  15.                 yAxisTitle: "$$(NumericAxis_title_population)",  
  16.                 dataSource: data,  
  17.                 chartType: "point",  
  18.                 isTransitionInEnabled: true,  
  19.                 transitionInDuration: 500  
  20.             });  
  21.         });  
  22. </script>  
  23.   
  24. <style type="text/css">  
  25.   
  26.   
  27.     .selectionOptions {  
  28.         margin-bottom: 10px;  
  29.     }  
  30.   
  31.     td {  
  32.         vertical-align: top;  
  33.     }  
  34.   
  35.     .chartElement {  
  36.         padding-bottom: 20px;  
  37.     }  
  38. </style>  
  39. <div style="display: table">  
  40.   
  41.     <div id="pointChart" class="chartElement" style="display: table-cell; width: auto; padding-right: 50px"></div>  
  42.     <div id="pointLegend" style="width: 100px; display: table-cell;"></div>  
  43.   
  44. </div>  
  45. <div class="Quandl-attribution">  
  46.     $$(Chart_lbl_popDataFrom):  
  47.     <a href="http://www.quandl.com/" target="_blank">Quandl</a>  
  48. </div>  

Listing 26

MVC
Figure 9.

Scatter Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Scatter.cshtml” so add the following HTML in it as shown in Listing 27.

  1. <style type="text/css">  
  2.     h4 {  
  3.         width: 100%;  
  4.         text-align: center;  
  5.     }  
  6.   
  7.     .chart {  
  8.         position: relative;  
  9.         float: left;  
  10.         margin-right: 10px;  
  11.         display: inline-block;  
  12.     }  
  13. </style>  
  14.   
  15.   
  16. <script type="text/javascript" src="https://www.igniteui.com/data-files/us-fao-gross-production.js"></script>  
  17. <script type="text/javascript" src="https://www.igniteui.com/data-files/surface-3d-scatter.js"></script>  
  18.   
  19. <div class="UNdata-attribution">  
  20.     Agricultural data from:<br />  
  21.     <a href="http://data.un.org/" target="_blank">UNdata</a>  
  22. </div>  
  23.   
  24. <div>  
  25.     <div class="chart">  
  26.         <div id="chartScatter"></div>  
  27.     </div>  
  28.     <div class="chart">  
  29.         <div id="chartScatterLine"></div>  
  30.     </div>  
  31.     <div class="chart">  
  32.         <div id="chartScatterSpline"></div>  
  33.     </div>  
  34.     <div class="chart">  
  35.         <div id="chartBubble"></div>  
  36.     </div>  
  37.     <div class="chart">  
  38.         <div id="chartScatterArea"></div>  
  39.     </div>  
  40.     <div class="chart">  
  41.         <div id="chartScatterContour"></div>  
  42.     </div>  
  43. </div>  
  44.   
  45. <script type="text/javascript">  
  46.   
  47.     /* 
  48. United States Food and Agriculture gross production. 
  49.  
  50. Data from: http://data.un.org/ 
  51.  
  52. Original source: http://faostat.fao.org/ 
  53. */  
  54.   
  55.     var agriculturalData = [{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2007, "Value_Unit": "1,000,000 Int. $", "Value": 184698, "Population_Unit": "1,000,000 People", "Population": 302 },  
  56.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2006, "Value_Unit": "1,000,000 Int. $", "Value": 176803, "Population_Unit": "1,000,000 People", "Population": 299 },  
  57.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2005, "Value_Unit": "1,000,000 Int. $", "Value": 181432, "Population_Unit": "1,000,000 People", "Population": 296 },  
  58.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2004, "Value_Unit": "1,000,000 Int. $", "Value": 183519, "Population_Unit": "1,000,000 People", "Population": 294 },  
  59.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2003, "Value_Unit": "1,000,000 Int. $", "Value": 172458, "Population_Unit": "1,000,000 People", "Population": 291 },  
  60.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2002, "Value_Unit": "1,000,000 Int. $", "Value": 167494, "Population_Unit": "1,000,000 People", "Population": 288 },  
  61.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2001, "Value_Unit": "1,000,000 Int. $", "Value": 170755, "Population_Unit": "1,000,000 People", "Population": 285 },  
  62.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2000, "Value_Unit": "1,000,000 Int. $", "Value": 173640, "Population_Unit": "1,000,000 People", "Population": 282 },  
  63.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1999, "Value_Unit": "1,000,000 Int. $", "Value": 170083, "Population_Unit": "1,000,000 People", "Population": 279 },  
  64.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1998, "Value_Unit": "1,000,000 Int. $", "Value": 167311, "Population_Unit": "1,000,000 People", "Population": 275 },  
  65.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1997, "Value_Unit": "1,000,000 Int. $", "Value": 167072, "Population_Unit": "1,000,000 People", "Population": 272 },  
  66.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1996, "Value_Unit": "1,000,000 Int. $", "Value": 162066, "Population_Unit": "1,000,000 People", "Population": 269 },  
  67.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1995, "Value_Unit": "1,000,000 Int. $", "Value": 152325, "Population_Unit": "1,000,000 People", "Population": 266 },  
  68.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1994, "Value_Unit": "1,000,000 Int. $", "Value": 164433, "Population_Unit": "1,000,000 People", "Population": 263 },  
  69.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1993, "Value_Unit": "1,000,000 Int. $", "Value": 142796, "Population_Unit": "1,000,000 People", "Population": 260 },  
  70.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1992, "Value_Unit": "1,000,000 Int. $", "Value": 155467, "Population_Unit": "1,000,000 People", "Population": 258 },  
  71.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1991, "Value_Unit": "1,000,000 Int. $", "Value": 143249, "Population_Unit": "1,000,000 People", "Population": 255 },  
  72.     { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1990, "Value_Unit": "1,000,000 Int. $", "Value": 144644, "Population_Unit": "1,000,000 People", "Population": 253 },  
  73.     ];  
  74.     $(function () {  
  75.         function createScatterChart(selector, dataSource) {  
  76.             $(selector).igDataChart({  
  77.                 width: "320px",  
  78.                 height: "320px",  
  79.                 dataSource: dataSource,  
  80.                 title: "Scatter",  
  81.                 subtitle: "U.S. Agricultural Production Per Year",  
  82.                 axes: [{  
  83.                     name: "xAxis",  
  84.                     type: "numericX",  
  85.                     interval: 10,  
  86.                     title: "Year",  
  87.                 }, {  
  88.                     name: "yAxis",  
  89.                     type: "numericY",  
  90.                     title: "Billions of USD",  
  91.                     maximumValue: 200000,  
  92.                     formatLabel: function (val) {  
  93.                         var bVal = (val / 1000),  
  94.                             rounded = Math.round(bVal * 100) / 100;  
  95.                         return "$" + rounded;  
  96.                     }  
  97.                 }],  
  98.                 series: [{  
  99.                     name: "scatter",  
  100.                     type: "scatter",  
  101.                     xAxis: "xAxis",  
  102.                     yAxis: "yAxis",  
  103.                     xMemberPath: "Year",  
  104.                     yMemberPath: "Value",  
  105.                     markerType: "circle",  
  106.                     title: "Scatter",  
  107.                     showTooltip: true  
  108.                 }],  
  109.                 horizontalZoomable: true,  
  110.                 verticalZoomable: true,  
  111.                 windowResponse: "immediate"  
  112.             });  
  113.         }  
  114.   
  115.         function createScatterLineChart(selector, dataSource) {  
  116.             $(selector).igDataChart({  
  117.                 width: "320px",  
  118.                 height: "320px",  
  119.                 dataSource: dataSource,  
  120.                 title: "Scatter Line",  
  121.                 subtitle: "U.S. Agricultural Production Per Year",  
  122.                 axes: [{  
  123.                     name: "xAxis",  
  124.                     type: "numericX",  
  125.                     interval: 10,  
  126.                     title: "Year",  
  127.                 }, {  
  128.                     name: "yAxis",  
  129.                     type: "numericY",  
  130.                     title: "Billions of USD",  
  131.                     maximumValue: 200000,  
  132.                     formatLabel: function (val) {  
  133.                         var bVal = (val / 1000),  
  134.                             rounded = Math.round(bVal * 100) / 100;  
  135.                         return "$" + rounded;  
  136.                     }  
  137.                 }],  
  138.                 series: [{  
  139.                     name: "scatter",  
  140.                     type: "scatterLine",  
  141.                     xAxis: "xAxis",  
  142.                     yAxis: "yAxis",  
  143.                     xMemberPath: "Year",  
  144.                     yMemberPath: "Value",  
  145.                     markerType: "circle",  
  146.                     title: "Scatter Line",  
  147.                     showTooltip: true  
  148.                 }],  
  149.                 horizontalZoomable: true,  
  150.                 verticalZoomable: true,  
  151.                 windowResponse: "immediate"  
  152.             });  
  153.         }  
  154.   
  155.         function createScatterSplineChart(selector, dataSource) {  
  156.             $(selector).igDataChart({  
  157.                 width: "320px",  
  158.                 height: "320px",  
  159.                 dataSource: dataSource,  
  160.                 title: "Scatter Spline",  
  161.                 subtitle: "U.S. Agricultural Production Per Year",  
  162.                 axes: [{  
  163.                     name: "xAxis",  
  164.                     type: "numericX",  
  165.                     interval: 10,  
  166.                     title: "Year",  
  167.                 }, {  
  168.                     name: "yAxis",  
  169.                     type: "numericY",  
  170.                     title: "Billions of USD",  
  171.                     maximumValue: 200000,  
  172.                     formatLabel: function (val) {  
  173.                         var bVal = (val / 1000),  
  174.                             rounded = Math.round(bVal * 100) / 100;  
  175.                         return "$" + rounded;  
  176.                     }  
  177.                 }],  
  178.                 series: [{  
  179.                     name: "scatterSpline",  
  180.                     type: "scatterSpline",  
  181.                     xAxis: "xAxis",  
  182.                     yAxis: "yAxis",  
  183.                     xMemberPath: "Year",  
  184.                     yMemberPath: "Value",  
  185.                     markerType: "circle",  
  186.                     title: "Scatter Spline",  
  187.                     showTooltip: true  
  188.                 }],  
  189.                 horizontalZoomable: true,  
  190.                 verticalZoomable: true,  
  191.                 windowResponse: "immediate"  
  192.             });  
  193.         }  
  194.   
  195.         function createBubbleChart(selector, dataSource) {  
  196.             $(selector).igDataChart({  
  197.                 width: "320px",  
  198.                 height: "320px",  
  199.                 dataSource: dataSource,  
  200.                 title: "Bubble Chart",  
  201.                 subtitle: "U.S. Agricultural Production Per Year",  
  202.                 axes: [{  
  203.                     name: "xAxis",  
  204.                     type: "numericX",  
  205.                     interval: 10,  
  206.                     title: "Year",  
  207.                 }, {  
  208.                     name: "yAxis",  
  209.                     type: "numericY",  
  210.                     title: "Billions of USD",  
  211.                     maximumValue: 200000,  
  212.                     formatLabel: function (val) {  
  213.                         var bVal = (val / 1000),  
  214.                             rounded = Math.round(bVal * 100) / 100;  
  215.                         return "$" + rounded;  
  216.                     }  
  217.                 }],  
  218.                 series: [{  
  219.                     name: "bubble",  
  220.                     type: "bubble",  
  221.                     xAxis: "xAxis",  
  222.                     yAxis: "yAxis",  
  223.                     xMemberPath: "Year",  
  224.                     yMemberPath: "Value",  
  225.                     radiusMemberPath: "Population",  
  226.                     fillMemberPath: "Population",  
  227.                     labelMemberPath: "Population",  
  228.                     markerType: "circle",  
  229.                     title: "Bubble Chart",  
  230.                     showTooltip: true,  
  231.                     radiusScale: {  
  232.                         minimumValue: 2,  
  233.                         maximumValue: 12,  
  234.                         isLogarithmic: true  
  235.                     },  
  236.                     fillScale: {  
  237.                         type: "value",  
  238.                         brushes: ["red", "orange", "yellow"],  
  239.                         minimumValue: 150,  
  240.                         maximumValue: 400  
  241.                     }  
  242.                 }],  
  243.                 horizontalZoomable: true,  
  244.                 verticalZoomable: true,  
  245.                 windowResponse: "immediate"  
  246.             });  
  247.         }  
  248.   
  249.         function createScatterAreaChart(selector, dataSource) {  
  250.             $(selector).igDataChart({  
  251.                 width: "320px",  
  252.                 height: "320px",  
  253.                 dataSource: dataSource,  
  254.                 title: "$$(Chart_sel_scatterArea)",  
  255.                 subtitle: "$$(Chart_subtitle_scatter)",  
  256.                 axes: [{  
  257.                     name: "xAxis",  
  258.                     type: "numericX",  
  259.                     interval: 40,  
  260.                 }, {  
  261.                     name: "yAxis",  
  262.                     type: "numericY",  
  263.                     interval: 40,  
  264.                 }],  
  265.                 series: [{  
  266.                     name: "area",  
  267.                     type: "scatterArea",  
  268.                     xAxis: "xAxis",  
  269.                     yAxis: "yAxis",  
  270.                     xMemberPath: "X",  
  271.                     yMemberPath: "Y",  
  272.                     colorMemberPath: "Z",  
  273.                     title: "$$(Chart_sel_scatterArea)",  
  274.                     showTooltip: true,  
  275.                     colorScale: {  
  276.                         palette: ["red", "orange", "yellow"],  
  277.                         interpolationMode: "interpolateRGB",  
  278.                     }  
  279.                 }],  
  280.                 horizontalZoomable: true,  
  281.                 verticalZoomable: true,  
  282.                 windowResponse: "immediate"  
  283.             });  
  284.         }  
  285.         function createScatterContourChart(selector, dataSource) {  
  286.             $(selector).igDataChart({  
  287.                 width: "320px",  
  288.                 height: "320px",  
  289.                 dataSource: dataSource,  
  290.                 title: "$$(Chart_sel_scatterContour)",  
  291.                 subtitle: "$$(Chart_subtitle_scatter)",  
  292.                 axes: [{  
  293.                     name: "xAxis",  
  294.                     type: "numericX",  
  295.                     interval: 40,  
  296.                 }, {  
  297.                     name: "yAxis",  
  298.                     type: "numericY",  
  299.                     interval: 40,  
  300.                 }],  
  301.                 series: [{  
  302.                     name: "contour",  
  303.                     type: "scatterContour",  
  304.                     xAxis: "xAxis",  
  305.                     yAxis: "yAxis",  
  306.                     xMemberPath: "X",  
  307.                     yMemberPath: "Y",  
  308.                     valueMemberPath: "Z",  
  309.                     title: "$$(Chart_sel_scatterContour)",  
  310.                     showTooltip: true,  
  311.                     fillScale: {  
  312.                         type: "value",  
  313.                         brushes: ["red", "orange", "yellow"],  
  314.                     }  
  315.                 }],  
  316.                 horizontalZoomable: true,  
  317.                 verticalZoomable: true,  
  318.                 windowResponse: "immediate"  
  319.             });  
  320.         }  
  321.   
  322.         var dataSource = agriculturalData;  
  323.         createScatterChart("#chartScatter", dataSource);  
  324.         createScatterLineChart("#chartScatterLine", dataSource);  
  325.         createBubbleChart("#chartBubble", dataSource);  
  326.         createScatterSplineChart("#chartScatterSpline", dataSource);  
  327.         createScatterAreaChart("#chartScatterArea", dataSource);  
  328.         createScatterContourChart("#chartScatterContour", dataSource);  
  329.     });  
  330. </script>  

Listing 27

MVC
Figure 10. 

Sparkline Chart

To render the bar chart we have added a partial view “~/views/shared/BusinessCharts/_Sparkline.cshtml” so add the following HTML in it as shown in Listing 28.

  1. <!-- Target element for the igSparkline -->  
  2. <div id="sparkline"></div>  
  3.   
  4. <!-- File supplying the northwindInvoices object for the igSparkline data source -->  
  5. <script src="https://www.igniteui.com/data-files/nw-invoices.js"></script>  
  6.   
  7. <script>  
  8.     var northwindInvoices = [{  
  9.         "ShipName": "Alfred's Futterkiste",  
  10.         "ShipAddress": "Obere Str. 57",  
  11.         "ShipCity": "Berlin",  
  12.         "ShipRegion": null,  
  13.         "ShipPostalCode": "12209",  
  14.         "ShipCountry": "Germany",  
  15.         "CustomerID": "ALFKI",  
  16.         "CustomerName": "Alfreds Futterkiste",  
  17.         "Address": "Obere Str. 57",  
  18.         "City": "Berlin",  
  19.         "Region": null,  
  20.         "PostalCode": "12209",  
  21.         "Country": "Germany",  
  22.         "Salesperson": "Margaret Peacock",  
  23.         "OrderID": 10692,  
  24.         "OrderDate": "1997-10-03T00:00:00Z",  
  25.         "RequiredDate": "1997-10-31T00:00:00Z",  
  26.         "ShippedDate": "1997-10-13T00:00:00Z",  
  27.         "ShipperName": "United Package",  
  28.         "ProductID": 63,  
  29.         "ProductName": "Vegie-spread",  
  30.         "UnitPrice": 43.9000,  
  31.         "Quantity": 20,  
  32.         "Discount": 0,  
  33.         "ExtendedPrice": 878.0000,  
  34.         "Freight": 61.0200  
  35.     }, {  
  36.         "ShipName": "Alfred's Futterkiste",  
  37.         "ShipAddress": "Obere Str. 57",  
  38.         "ShipCity": "Berlin",  
  39.         "ShipRegion": null,  
  40.         "ShipPostalCode": "12209",  
  41.         "ShipCountry": "Germany",  
  42.         "CustomerID": "ALFKI",  
  43.         "CustomerName": "Alfreds Futterkiste",  
  44.         "Address": "Obere Str. 57",  
  45.         "City": "Berlin",  
  46.         "Region": null,  
  47.         "PostalCode": "12209",  
  48.         "Country": "Germany",  
  49.         "Salesperson": "Margaret Peacock",  
  50.         "OrderID": 10702,  
  51.         "OrderDate": "1997-10-13T00:00:00Z",  
  52.         "RequiredDate": "1997-11-24T00:00:00Z",  
  53.         "ShippedDate": "1997-10-21T00:00:00Z",  
  54.         "ShipperName": "Speedy Express",  
  55.         "ProductID": 3,  
  56.         "ProductName": "Aniseed Syrup",  
  57.         "UnitPrice": 10.0000,  
  58.         "Quantity": 6,  
  59.         "Discount": 0,  
  60.         "ExtendedPrice": 60.0000,  
  61.         "Freight": 23.9400  
  62.     }, {  
  63.         "ShipName": "Alfred's Futterkiste",  
  64.         "ShipAddress": "Obere Str. 57",  
  65.         "ShipCity": "Berlin",  
  66.         "ShipRegion": null,  
  67.         "ShipPostalCode": "12209",  
  68.         "ShipCountry": "Germany",  
  69.         "CustomerID": "ALFKI",  
  70.         "CustomerName": "Alfreds Futterkiste",  
  71.         "Address": "Obere Str. 57",  
  72.         "City": "Berlin",  
  73.         "Region": null,  
  74.         "PostalCode": "12209",  
  75.         "Country": "Germany",  
  76.         "Salesperson": "Margaret Peacock",  
  77.         "OrderID": 10702,  
  78.         "OrderDate": "1997-10-13T00:00:00Z",  
  79.         "RequiredDate": "1997-11-24T00:00:00Z",  
  80.         "ShippedDate": "1997-10-21T00:00:00Z",  
  81.         "ShipperName": "Speedy Express",  
  82.         "ProductID": 76,  
  83.         "ProductName": "Lakkalik\u00f6\u00f6ri",  
  84.         "UnitPrice": 18.0000,  
  85.         "Quantity": 15,  
  86.         "Discount": 0,  
  87.         "ExtendedPrice": 270.0000,  
  88.         "Freight": 23.9400  
  89.     }, {  
  90.         "ShipName": "Alfred's Futterkiste",  
  91.         "ShipAddress": "Obere Str. 57",  
  92.         "ShipCity": "Berlin",  
  93.         "ShipRegion": null,  
  94.         "ShipPostalCode": "12209",  
  95.         "ShipCountry": "Germany",  
  96.         "CustomerID": "ALFKI",  
  97.         "CustomerName": "Alfreds Futterkiste",  
  98.         "Address": "Obere Str. 57",  
  99.         "City": "Berlin",  
  100.         "Region": null,  
  101.         "PostalCode": "12209",  
  102.         "Country": "Germany",  
  103.         "Salesperson": "Nancy Davolio",  
  104.         "OrderID": 10835,  
  105.         "OrderDate": "1998-01-15T00:00:00Z",  
  106.         "RequiredDate": "1998-02-12T00:00:00Z",  
  107.         "ShippedDate": "1998-01-21T00:00:00Z",  
  108.         "ShipperName": "Federal Shipping",  
  109.         "ProductID": 59,  
  110.         "ProductName": "Raclette Courdavault",  
  111.         "UnitPrice": 55.0000,  
  112.         "Quantity": 15,  
  113.         "Discount": 0,  
  114.         "ExtendedPrice": 825.0000,  
  115.         "Freight": 69.5300  
  116.     }, {  
  117.         "ShipName": "Alfred's Futterkiste",  
  118.         "ShipAddress": "Obere Str. 57",  
  119.         "ShipCity": "Berlin",  
  120.         "ShipRegion": null,  
  121.         "ShipPostalCode": "12209",  
  122.         "ShipCountry": "Germany",  
  123.         "CustomerID": "ALFKI",  
  124.         "CustomerName": "Alfreds Futterkiste",  
  125.         "Address": "Obere Str. 57",  
  126.         "City": "Berlin",  
  127.         "Region": null,  
  128.         "PostalCode": "12209",  
  129.         "Country": "Germany",  
  130.         "Salesperson": "Nancy Davolio",  
  131.         "OrderID": 10952,  
  132.         "OrderDate": "1998-03-16T00:00:00Z",  
  133.         "RequiredDate": "1998-04-27T00:00:00Z",  
  134.         "ShippedDate": "1998-03-24T00:00:00Z",  
  135.         "ShipperName": "Speedy Express",  
  136.         "ProductID": 28,  
  137.         "ProductName": "R\u00f6ssle Sauerkraut",  
  138.         "UnitPrice": 45.6000,  
  139.         "Quantity": 2,  
  140.         "Discount": 0,  
  141.         "ExtendedPrice": 91.2000,  
  142.         "Freight": 40.4200  
  143.     }]  
  144.   
  145.   
  146.     $(function () {  
  147.   
  148.         $("#sparkline").igSparkline({  
  149.             dataSource: northwindInvoices,  
  150.             height: "100px",  
  151.             width: "100%",  
  152.             valueMemberPath: 'ExtendedPrice',  
  153.             tooltipTemplate: "Low:${Low}<br>High:${High}"  
  154.         });  
  155.   
  156.     });  
  157. </script>   

Listing 28.

MVC
Figure 11. 

Polar Charts

Let’s render the polar charts category.

Polar Area

To render the bar chart we have added a partial view “~/views/shared/PolarCharts/_PolarArea.cshtml” so add the following HTML in it as shown in Listing 29

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/wind.js"></script>  
  3. <script type="text/javascript">  
  4. /* 
  5. Raw Data from NOAA. 
  6. Wind information from Los Angeles weather station. 
  7. */  
  8.       var data = @Html.Raw(Model.Data);  
  9.       $(function () {  
  10.             function createChart(selector, seriesType, data) {  
  11.                 $(selector).igDataChart({  
  12.                     width: "400px",  
  13.                     height: "400px",  
  14.                     dataSource: data,  
  15.                     title: "Wind Speed vs. Wind Direction",  
  16.                     subtitle: "Los Angeles wind data over twelve hours",  
  17.                     axes: [{  
  18.                         name: "angleAxis",  
  19.                         type: "numericAngle"  
  20.                     },  
  21.                     {  
  22.                         name: "radiusAxis",  
  23.                         type: "numericRadius",  
  24.                         minimumValue: 0,  
  25.                         maximumValue: 10,  
  26.                         interval: 2  
  27.                     }],  
  28.                     series: [{  
  29.                         name: "series1",  
  30.                         //title: "$$(Chart_lbl_seriesTitle)",  
  31.                         type: seriesType,  
  32.                         angleAxis: "angleAxis",  
  33.                         radiusAxis: "radiusAxis",  
  34.                         angleMemberPath: "WindDirection",  
  35.                         radiusMemberPath: "WindSpeed"  
  36.                     }],  
  37.                     horizontalZoomable: true,  
  38.                     verticalZoomable: true,  
  39.                     windowResponse: "immediate"  
  40.                 });  
  41.             }  
  42.   
  43.             createChart("#chartScatterArea", "polarArea", data);  
  44.         });  
  45. </script>  
  46.   
  47. <style type="text/css">  
  48.     h4 {  
  49.         width: 100%;  
  50.         text-align: center;  
  51.     }  
  52.   
  53.     .chart {  
  54.         position: relative;  
  55.         float: left;  
  56.         margin-right: 10px;  
  57.     }  
  58. </style>  
  59.   
  60. <div class="chartContainer">  
  61.     <div class="chart">  
  62.         <h2 align="center">Polar Area</h2>  
  63.         <div id="chartScatterArea"></div>  
  64.     </div>  
  65. </div>  
  66.   
  67. <div class="NOAAdata-attribution">  
  68.     Weather data from:<br />  
  69.     <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  70. </div>  

Listing 29

MVC
Figure 12.

Polar Line

To render the bar chart we have added a partial view “~/views/shared/PolarCharts/_PolarLine.cshtml” so add the following HTML in it as shown in Listing 30.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/wind.js"></script>  
  3. <script type="text/javascript">  
  4. var data = @Html.Raw(Model.Data);  
  5.   
  6.   
  7.     $(function () {  
  8.         function createChart(selector, seriesType, data) {  
  9.             $(selector).igDataChart({  
  10.                 width: "400px",  
  11.                 height: "400px",  
  12.                 dataSource: data,  
  13.                 title: "Wind Speed vs. Wind Direction",  
  14.                 subtitle: "Los Angeles wind data over twelve hours",  
  15.                 axes: [{  
  16.                     name: "angleAxis",  
  17.                     type: "numericAngle"  
  18.                 },  
  19.                 {  
  20.                     name: "radiusAxis",  
  21.                     type: "numericRadius",  
  22.                     minimumValue: 0,  
  23.                     maximumValue: 10,  
  24.                     interval: 2  
  25.                 }],  
  26.                 series: [{  
  27.                     name: "series1",  
  28.                     //title: "$$(Chart_lbl_seriesTitle)",  
  29.                     type: seriesType,  
  30.                     angleAxis: "angleAxis",  
  31.                     radiusAxis: "radiusAxis",  
  32.                     angleMemberPath: "WindDirection",  
  33.                     radiusMemberPath: "WindSpeed"  
  34.                 }],  
  35.                 horizontalZoomable: true,  
  36.                 verticalZoomable: true,  
  37.                 windowResponse: "immediate"  
  38.             });  
  39.         }  
  40.   
  41.         createChart("#chartScatterLine", "polarLine", data);  
  42.     });  
  43. </script>  
  44.   
  45. <style type="text/css">  
  46.     h4 {  
  47.         width: 100%;  
  48.         text-align: center;  
  49.     }  
  50.   
  51.     .chart {  
  52.         position: relative;  
  53.         float: left;  
  54.         margin-right: 10px;  
  55.     }  
  56. </style>  
  57.   
  58. <div class="chartContainer">  
  59.     <div class="chart">  
  60.         <h2 align="center">Polar Line</h2>  
  61.         <div id="chartScatterLine"></div>  
  62.     </div>  
  63. </div>  
  64.   
  65. <div class="NOAAdata-attribution">  
  66.     Weather data from:<br />  
  67.     <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  68. </div>  

Listing 30.

MVC
Figure 13. 

Polar Point

To render the bar chart we have added a partial view “~/views/shared/PolarCharts/_PolarPoint.cshtml” so add the following HTML in it as shown in Listing 31.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/wind.js"></script>  
  3. <script type="text/javascript">  
  4. var data = @Html.Raw(Model.Data);  
  5.     $(function () {  
  6.         function createChart(selector, seriesType, data) {  
  7.             $(selector).igDataChart({  
  8.                 width: "400px",  
  9.                 height: "400px",  
  10.                 dataSource: data,  
  11.                 title: "Wind Speed vs. Wind Direction",  
  12.                 subtitle: "Los Angeles wind data over twelve hours",  
  13.                 axes: [{  
  14.                     name: "angleAxis",  
  15.                     type: "numericAngle"  
  16.                 },  
  17.                 {  
  18.                     name: "radiusAxis",  
  19.                     type: "numericRadius",  
  20.                     minimumValue: 0,  
  21.                     maximumValue: 10,  
  22.                     interval: 2  
  23.                 }],  
  24.                 series: [{  
  25.                     name: "series1",  
  26.                     //title: "$$(Chart_lbl_seriesTitle)",  
  27.                     type: seriesType,  
  28.                     angleAxis: "angleAxis",  
  29.                     radiusAxis: "radiusAxis",  
  30.                     angleMemberPath: "WindDirection",  
  31.                     radiusMemberPath: "WindSpeed"  
  32.                 }],  
  33.                 horizontalZoomable: true,  
  34.                 verticalZoomable: true,  
  35.                 windowResponse: "immediate"  
  36.             });  
  37.         }  
  38.   
  39.         createChart("#chartScatter", "polarScatter", data);  
  40.     });  
  41. </script>  
  42.   
  43. <style type="text/css">  
  44.     h4 {  
  45.         width: 100%;  
  46.         text-align: center;  
  47.     }  
  48.   
  49.     .chart {  
  50.         position: relative;  
  51.         float: left;  
  52.         margin-right: 10px;  
  53.     }  
  54. </style>  
  55.   
  56. <div class="chartContainer">  
  57.     <div class="chart">  
  58.         <h2 align="center">Polar Scatter</h2>  
  59.         <div id="chartScatter"></div>  
  60.     </div>  
  61. </div>  
  62.   
  63. <div class="NOAAdata-attribution">  
  64.     Weather data from:<br />  
  65.     <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  66. </div>  

Listing 31.

MVC
Figure 14.

Polar Spline

To render the bar chart we have added a partial view “~/views/shared/PolarCharts/_PolarSpline.cshtml” so add the following HTML in it as shown in Listing 32.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/wind.js"></script>  
  3. <script type="text/javascript">  
  4.  var data = @Html.Raw(Model.Data);  
  5.   
  6.   
  7.   
  8.     $(function () {  
  9.         function createChart(selector, seriesType, data) {  
  10.             $(selector).igDataChart({  
  11.                 width: "400px",  
  12.                 height: "400px",  
  13.                 dataSource: data,  
  14.                 title: "Wind Speed vs. Wind Direction",  
  15.                 subtitle: "Los Angeles wind data over twelve hours",  
  16.                 axes: [{  
  17.                     name: "angleAxis",  
  18.                     type: "numericAngle"  
  19.                 },  
  20.                 {  
  21.                     name: "radiusAxis",  
  22.                     type: "numericRadius",  
  23.                     minimumValue: 0,  
  24.                     maximumValue: 10,  
  25.                     interval: 2  
  26.                 }],  
  27.                 series: [{  
  28.                     name: "series1",  
  29.                     //title: "$$(Chart_lbl_seriesTitle)",  
  30.                     type: seriesType,  
  31.                     angleAxis: "angleAxis",  
  32.                     radiusAxis: "radiusAxis",  
  33.                     angleMemberPath: "WindDirection",  
  34.                     radiusMemberPath: "WindSpeed"  
  35.                 }],  
  36.                 horizontalZoomable: true,  
  37.                 verticalZoomable: true,  
  38.                 windowResponse: "immediate"  
  39.             });  
  40.         }  
  41.   
  42.         createChart("#chartPolarSpline", "polarSpline", data);  
  43.     });  
  44. </script>  
  45.   
  46. <style type="text/css">  
  47.     h4 {  
  48.         width: 100%;  
  49.         text-align: center;  
  50.     }  
  51.   
  52.     .chart {  
  53.         position: relative;  
  54.         float: left;  
  55.         margin-right: 10px;  
  56.     }  
  57. </style>  
  58.   
  59. <div class="chartContainer">  
  60.     <div class="chart">  
  61.         <h2 align="center">Polar Spline</h2>  
  62.         <div id="chartPolarSpline"></div>  
  63.     </div>  
  64. </div>  
  65.   
  66. <div class="NOAAdata-attribution">  
  67.     Weather data from:<br />  
  68.     <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  69. </div>  

Listing 32

MVC
Figure 15. 

Polar Spline Area

To render the bar chart we have added a partial view “~/views/shared/PolarCharts/_PolarSplineArea.cshtml” so add the following HTML in it as shown in Listing 33.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/wind.js"></script>  
  3. <script type="text/javascript">  
  4. /* 
  5. Raw Data from NOAA. 
  6. Wind information from Los Angeles weather station. 
  7. */  
  8.     var data = @Html.Raw(Model.Data);  
  9.   
  10.     $(function () {  
  11.         function createChart(selector, seriesType, data) {  
  12.             $(selector).igDataChart({  
  13.                 width: "400px",  
  14.                 height: "400px",  
  15.                 dataSource: data,  
  16.                 title: "Wind Speed vs. Wind Direction",  
  17.                 subtitle: "Los Angeles wind data over twelve hours",  
  18.                 axes: [{  
  19.                     name: "angleAxis",  
  20.                     type: "numericAngle"  
  21.                 },  
  22.                 {  
  23.                     name: "radiusAxis",  
  24.                     type: "numericRadius",  
  25.                     minimumValue: 0,  
  26.                     maximumValue: 10,  
  27.                     interval: 2  
  28.                 }],  
  29.                 series: [{  
  30.                     name: "series1",  
  31.                     //title: "$$(Chart_lbl_seriesTitle)",  
  32.                     type: seriesType,  
  33.                     angleAxis: "angleAxis",  
  34.                     radiusAxis: "radiusAxis",  
  35.                     angleMemberPath: "WindDirection",  
  36.                     radiusMemberPath: "WindSpeed"  
  37.                 }],  
  38.                 horizontalZoomable: true,  
  39.                 verticalZoomable: true,  
  40.                 windowResponse: "immediate"  
  41.             });  
  42.         }  
  43.   
  44.         createChart("#chartPolarSplineArea", "polarSplineArea", data);  
  45.     });  
  46. </script>  
  47.   
  48. <style type="text/css">  
  49.     h4 {  
  50.         width: 100%;  
  51.         text-align: center;  
  52.     }  
  53.   
  54.     .chart {  
  55.         position: relative;  
  56.         float: left;  
  57.         margin-right: 10px;  
  58.     }  
  59. </style>  
  60.   
  61. <div class="chartContainer">  
  62.     <div class="chart">  
  63.         <h2 align="center">Polar Spline Area</h2>  
  64.         <div id="chartPolarSplineArea"></div>  
  65.     </div>  
  66. </div>  
  67.   
  68. <div class="NOAAdata-attribution">  
  69.     Weather data from:<br />  
  70.     <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  71. </div>  

Listing 33.

MVC
Figure 16. 

Radial Charts

Let’s render the radial charts category.

Radial Area

To render the bar chart we have added a partial view “~/views/shared/RadialCharts/_RadialArea.cshtml so add the following HTML in it as shown in Listing 34.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/temperature.js"></script>  
  3.   
  4. <script type="text/javascript">  
  5.      var data = @Html.Raw(Model.Data);  
  6.   
  7.   
  8.     $(function () {  
  9.         function createChart(selector, seriesType, data, hasLegend) {  
  10.             $(selector).igDataChart({  
  11.                 width: "400px",  
  12.                 height: "400px",  
  13.                 dataSource: data,  
  14.                 legend: hasLegend ? { element: "radialLegend" } : null,  
  15.                 title: "New York City vs. Philadelphia",  
  16.                 subtitle: "A comparison of daily temperatures",  
  17.                 axes: [{  
  18.                     name: "angleAxis",  
  19.                     type: "categoryAngle",  
  20.                     label: "Time",  
  21.                     startAngleOffset: -90,  
  22.                     interval: 1  
  23.                 }, {  
  24.                     name: "radiusAxis",  
  25.                     type: "numericRadius",  
  26.                     innerRadiusExtentScale: .1,  
  27.                     maximumValue: 95,  
  28.                     minimumValue: 75,  
  29.                     interval: 5,  
  30.                     radiusExtentScale: .6  
  31.                 }],  
  32.                 series: [{  
  33.                     name: "series1",  
  34.                     title: 'Philadelphia',  
  35.                     type: seriesType,  
  36.                     angleAxis: "angleAxis",  
  37.                     valueAxis: "radiusAxis",  
  38.                     valueMemberPath: "PhiladelphiaTemp",  
  39.                     markerType: "circle"  
  40.                 }, {  
  41.                     name: "series2",  
  42.                     title: 'New York City',  
  43.                     type: seriesType,  
  44.                     angleAxis: "angleAxis",  
  45.                     valueAxis: "radiusAxis",  
  46.                     valueMemberPath: "NewYorkCityTemp",  
  47.                     markerType: "circle"  
  48.                 }],  
  49.                 horizontalZoomable: true,  
  50.                 verticalZoomable: true,  
  51.                 windowResponse: "immediate"  
  52.             });  
  53.         }  
  54.   
  55.         createChart("#chartRadialArea", "radialArea", data, true);  
  56.     });  
  57. </script>  
  58.   
  59. <style type="text/css">  
  60.     h2 {  
  61.         width: 100%;  
  62.         text-align: center;  
  63.     }  
  64.   
  65.     .chart {  
  66.         position: relative;  
  67.         float: left;  
  68.         margin-right: 10px;  
  69.     }  
  70. </style>  
  71.   
  72. <div class="chartContainer">  
  73.     <div class="chart">  
  74.         <h2>Radial Area</h2>  
  75.         <div id="chartRadialArea"></div>  
  76.     </div>  
  77. </div>  
  78. <table>  
  79.     <tr>  
  80.         <td id="radialLegend"></td>  
  81.     </tr>  
  82.     <tr>  
  83.         <td>  
  84.             Weather data from:<br />  
  85.             <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  86.         </td>  
  87.     </tr>  
  88. </table>  

Listing 34.

MVC
Figure 17. 

Radial Column

To render the bar chart we have added a partial view “~/views/shared/RadialCharts/_RadialColumn.cshtml” so add the following HTML in it as shown in Listing 35.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/temperature.js"></script>  
  3.   
  4. <script type="text/javascript">  
  5.     var data = @Html.Raw(Model.Data);  
  6.     $(function () {  
  7.         function createChart(selector, seriesType, data, hasLegend) {  
  8.             $(selector).igDataChart({  
  9.                 width: "400px",  
  10.                 height: "400px",  
  11.                 dataSource: data,  
  12.                 legend: hasLegend ? { element: "radialLegend" } : null,  
  13.                 title: "New York City vs. Philadelphia",  
  14.                 subtitle: "A comparison of daily temperatures",  
  15.                 axes: [{  
  16.                     name: "angleAxis",  
  17.                     type: "categoryAngle",  
  18.                     label: "Time",  
  19.                     startAngleOffset: -90,  
  20.                     interval: 1  
  21.                 }, {  
  22.                     name: "radiusAxis",  
  23.                     type: "numericRadius",  
  24.                     innerRadiusExtentScale: .1,  
  25.                     maximumValue: 95,  
  26.                     minimumValue: 75,  
  27.                     interval: 5,  
  28.                     radiusExtentScale: .6  
  29.                 }],  
  30.                 series: [{  
  31.                     name: "series1",  
  32.                     title: 'Philadelphia',  
  33.                     type: seriesType,  
  34.                     angleAxis: "angleAxis",  
  35.                     valueAxis: "radiusAxis",  
  36.                     valueMemberPath: "PhiladelphiaTemp",  
  37.                     markerType: "circle"  
  38.                 }, {  
  39.                     name: "series2",  
  40.                     title: 'New York City',  
  41.                     type: seriesType,  
  42.                     angleAxis: "angleAxis",  
  43.                     valueAxis: "radiusAxis",  
  44.                     valueMemberPath: "NewYorkCityTemp",  
  45.                     markerType: "circle"  
  46.                 }],  
  47.                 horizontalZoomable: true,  
  48.                 verticalZoomable: true,  
  49.                 windowResponse: "immediate"  
  50.             });  
  51.         }  
  52.   
  53.         createChart("#chartRadialColumn", "radialColumn", data, false);  
  54.     });  
  55. </script>  
  56.   
  57. <style type="text/css">  
  58.     h2 {  
  59.         width: 100%;  
  60.         text-align: center;  
  61.     }  
  62.   
  63.     .chart {  
  64.         position: relative;  
  65.         float: left;  
  66.         margin-right: 10px;  
  67.     }  
  68. </style>  
  69.   
  70. <div class="chartContainer">  
  71.     <div class="chart">  
  72.         <h2>Radial Column</h2>  
  73.         <div id="chartRadialColumn"></div>  
  74.     </div>  
  75. </div>  
  76. <table>  
  77.     <tr>  
  78.         <td id="radialLegend"></td>  
  79.     </tr>  
  80.     <tr>  
  81.         <td>  
  82.             Weather data from:<br />  
  83.             <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  84.         </td>  
  85.     </tr>  
  86. </table>  

Listing 35

MVC
Figure 18.

Radial Line

To render the bar chart we have added a partial view “~/views/shared/RadialCharts/_RadialLine.cshtml” so add the following HTML in it as shown in Listing 36.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/temperature.js"></script>  
  3. <script type="text/javascript">  
  4.     var data = @Html.Raw(Model.Data);  
  5.   
  6.     $(function () {  
  7.         function createChart(selector, seriesType, data, hasLegend) {  
  8.             $(selector).igDataChart({  
  9.                 width: "400px",  
  10.                 height: "400px",  
  11.                 dataSource: data,  
  12.                 legend: hasLegend ? { element: "radialLegend" } : null,  
  13.                 title: "New York City vs. Philadelphia",  
  14.                 subtitle: "A comparison of daily temperatures",  
  15.                 axes: [{  
  16.                     name: "angleAxis",  
  17.                     type: "categoryAngle",  
  18.                     label: "Time",  
  19.                     startAngleOffset: -90,  
  20.                     interval: 1  
  21.                 }, {  
  22.                     name: "radiusAxis",  
  23.                     type: "numericRadius",  
  24.                     innerRadiusExtentScale: .1,  
  25.                     maximumValue: 95,  
  26.                     minimumValue: 75,  
  27.                     interval: 5,  
  28.                     radiusExtentScale: .6  
  29.                 }],  
  30.                 series: [{  
  31.                     name: "series1",  
  32.                     title: 'Philadelphia',  
  33.                     type: seriesType,  
  34.                     angleAxis: "angleAxis",  
  35.                     valueAxis: "radiusAxis",  
  36.                     valueMemberPath: "PhiladelphiaTemp",  
  37.                     markerType: "circle"  
  38.                 }, {  
  39.                     name: "series2",  
  40.                     title: 'New York City',  
  41.                     type: seriesType,  
  42.                     angleAxis: "angleAxis",  
  43.                     valueAxis: "radiusAxis",  
  44.                     valueMemberPath: "NewYorkCityTemp",  
  45.                     markerType: "circle"  
  46.                 }],  
  47.                 horizontalZoomable: true,  
  48.                 verticalZoomable: true,  
  49.                 windowResponse: "immediate"  
  50.             });  
  51.         }  
  52.   
  53.         createChart("#chartRadialLine", "radialLine", data, false);  
  54.     });  
  55. </script>  
  56.   
  57. <style type="text/css">  
  58.     h2 {  
  59.         width: 100%;  
  60.         text-align: center;  
  61.     }  
  62.   
  63.     .chart {  
  64.         position: relative;  
  65.         float: left;  
  66.         margin-right: 10px;  
  67.     }  
  68. </style>  
  69.   
  70. <div class="chartContainer">  
  71.     <div class="chart">  
  72.         <h2>Radial Line</h2>  
  73.         <div id="chartRadialLine"></div>  
  74.     </div>  
  75. </div>  
  76. <table>  
  77.     <tr>  
  78.         <td id="radialLegend"></td>  
  79.     </tr>  
  80.     <tr>  
  81.         <td>  
  82.             Weather data from:<br />  
  83.             <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  84.         </td>  
  85.     </tr>  
  86. </table>  

Listing 36.

MVC
Figure 17. 

Radial Pie

To render the bar chart we have added a partial view “~/views/shared/RadialCharts/_RadialPie.cshtml” so add the following HTML in it as shown in Listing 37.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/temperature.js"></script>  
  3. <script type="text/javascript">  
  4.     var data = @Html.Raw(Model.Data);  
  5.         $(function () {  
  6.             function createChart(selector, seriesType, data, hasLegend) {  
  7.                 $(selector).igDataChart({  
  8.                     width: "400px",  
  9.                     height: "400px",  
  10.                     dataSource: data,  
  11.                     legend: hasLegend ? { element: "radialLegend" } : null,  
  12.                     title: "New York City vs. Philadelphia",  
  13.                     subtitle: "A comparison of daily temperatures",  
  14.                     axes: [{  
  15.                         name: "angleAxis",  
  16.                         type: "categoryAngle",  
  17.                         label: "Time",  
  18.                         startAngleOffset: -90,  
  19.                         interval: 1  
  20.                     }, {  
  21.                         name: "radiusAxis",  
  22.                         type: "numericRadius",  
  23.                         innerRadiusExtentScale: .1,  
  24.                         maximumValue: 95,  
  25.                         minimumValue: 75,  
  26.                         interval: 5,  
  27.                         radiusExtentScale: .6  
  28.                     }],  
  29.                     series: [{  
  30.                         name: "series1",  
  31.                         title: 'Philadelphia',  
  32.                         type: seriesType,  
  33.                         angleAxis: "angleAxis",  
  34.                         valueAxis: "radiusAxis",  
  35.                         valueMemberPath: "PhiladelphiaTemp",  
  36.                         markerType: "circle"  
  37.                     }, {  
  38.                         name: "series2",  
  39.                         title: 'New York City',  
  40.                         type: seriesType,  
  41.                         angleAxis: "angleAxis",  
  42.                         valueAxis: "radiusAxis",  
  43.                         valueMemberPath: "NewYorkCityTemp",  
  44.                         markerType: "circle"  
  45.                     }],  
  46.                     horizontalZoomable: true,  
  47.                     verticalZoomable: true,  
  48.                     windowResponse: "immediate"  
  49.                 });  
  50.             }  
  51.             createChart("#chartRadialPie", "radialPie", data, false);  
  52.         });  
  53. </script>  
  54.   
  55. <style type="text/css">  
  56.     h2 {  
  57.         width: 100%;  
  58.         text-align: center;  
  59.     }  
  60.     .chart {  
  61.         position: relative;  
  62.         float: left;  
  63.         margin-right: 10px;  
  64.     }  
  65. </style>  
  66. <div class="chartContainer">  
  67.     <div class="chart">  
  68.         <h2>Radial Pie</h2>  
  69.         <div id="chartRadialPie"></div>  
  70.     </div>  
  71. </div>  
  72. <table>  
  73.     <tr>  
  74.         <td id="radialLegend"></td>  
  75.     </tr>  
  76.     <tr>  
  77.         <td>  
  78.             Weather data from:<br />  
  79.             <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  80.         </td>  
  81.     </tr>  
  82. </table>  

Listing 37.

MVC
Figure 18. 

Range Charts

Let’s draw the range category charts.

Range Area

To render the bar chart we have added a partial view “~/views/shared/RangeCharts/_RangeArea.cshtml” so add the following HTML in it as shown in Listing 38.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/temperature.js"></script>  
  3.   
  4. <script id="tooltipTemplate" type="text/x-jquery-tmpl">  
  5.     <div>  
  6.         <span id="tooltipValue">Philadelphia: ${item.PhiladelphiaTemp}</span><br />  
  7.         <span id="Span1">New York City: ${item.NewYorkCityTemp}</span>  
  8.     </div>  
  9. </script>  
  10.   
  11. <script type="text/javascript">  
  12.      var data = @Html.Raw(Model.Data);  
  13.   
  14.   
  15.         $(function () {  
  16.             function createChart(selector, seriesType, dataSource) {  
  17.                 $(selector).igDataChart({  
  18.                     width: "400px",  
  19.                     height: "400px",  
  20.                     dataSource: data,  
  21.                     title: "New York City vs. Philadelphia",  
  22.                     subtitle: "A comparison of daily temperatures",  
  23.                     axes: [{  
  24.                         name: "xAxis",  
  25.                         type: "categoryX",  
  26.                         label: "Time"  
  27.                     },  
  28.                     {  
  29.                         name: "yAxis",  
  30.                         type: "numericY",  
  31.                         title: "Temperature (Degrees Fahrenheit)",  
  32.                     }],  
  33.                     series: [{  
  34.                         name: "series1",  
  35.                         title: "Test Series",  
  36.                         type: seriesType,  
  37.                         isHighlightingEnabled: true,  
  38.                         isTransitionInEnabled: true,  
  39.                         xAxis: "xAxis",  
  40.                         yAxis: "yAxis",  
  41.                         lowMemberPath: "NewYorkCityTemp",  
  42.                         highMemberPath: "PhiladelphiaTemp",  
  43.                         showTooltip: true,  
  44.                         tooltipTemplate: "tooltipTemplate"  
  45.                     }],  
  46.                     horizontalZoomable: true,  
  47.                     verticalZoomable: true,  
  48.                     windowResponse: "immediate"  
  49.                 });  
  50.             }  
  51.   
  52.             createChart("#chartRangeArea", "rangeArea", data);  
  53.         });  
  54. </script>  
  55.   
  56. <style type="text/css">  
  57.     h2 {  
  58.         width: 100%;  
  59.         text-align: center;  
  60.     }  
  61.   
  62.     .chart {  
  63.         position: relative;  
  64.         float: left;  
  65.         margin-right: 10px;  
  66.     }  
  67. </style>  
  68.   
  69. <div class="chartContainer">  
  70.     <div class="chart">  
  71.         <h2>Range Area</h2>  
  72.         <div id="chartRangeArea"></div>  
  73.     </div>  
  74. </div>  
  75.   
  76. <div class="NOAAdata-attribution">  
  77.     Weather data from:<br />  
  78.     <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  79. </div>  

Listing 38.

MVC
Figure 19. 

Range Column

To render the bar chart we have added a partial view “~/views/shared/RangeCharts/_RangeColumn.cshtml” so add the following HTML in it as shown in Listing 39.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/temperature.js"></script>  
  3.   
  4. <script id="tooltipTemplate" type="text/x-jquery-tmpl">  
  5.     <div>  
  6.         <span id="tooltipValue">Philadelphia: ${item.PhiladelphiaTemp}</span><br />  
  7.         <span id="Span1">New York City: ${item.NewYorkCityTemp}</span>  
  8.     </div>  
  9. </script>  
  10.   
  11. <script type="text/javascript">  
  12.      var data = @Html.Raw(Model.Data);  
  13.   
  14.   
  15.     $(function () {  
  16.         function createChart(selector, seriesType, dataSource) {  
  17.             $(selector).igDataChart({  
  18.                 width: "400px",  
  19.                 height: "400px",  
  20.                 dataSource: data,  
  21.                 title: "New York City vs. Philadelphia",  
  22.                 subtitle: "A comparison of daily temperatures",  
  23.                 axes: [{  
  24.                     name: "xAxis",  
  25.                     type: "categoryX",  
  26.                     label: "Time"  
  27.                 },  
  28.                 {  
  29.                     name: "yAxis",  
  30.                     type: "numericY",  
  31.                     title: "Temperature (Degrees Fahrenheit)",  
  32.                 }],  
  33.                 series: [{  
  34.                     name: "series1",  
  35.                     title: "Test Series",  
  36.                     type: seriesType,  
  37.                     isHighlightingEnabled: true,  
  38.                     isTransitionInEnabled: true,  
  39.                     xAxis: "xAxis",  
  40.                     yAxis: "yAxis",  
  41.                     lowMemberPath: "NewYorkCityTemp",  
  42.                     highMemberPath: "PhiladelphiaTemp",  
  43.                     showTooltip: true,  
  44.                     tooltipTemplate: "tooltipTemplate"  
  45.                 }],  
  46.                 horizontalZoomable: true,  
  47.                 verticalZoomable: true,  
  48.                 windowResponse: "immediate"  
  49.             });  
  50.         }  
  51.   
  52.         createChart("#chartRangeColumn", "rangeColumn", data);  
  53.     });  
  54. </script>  
  55.   
  56. <style type="text/css">  
  57.     h2 {  
  58.         width: 100%;  
  59.         text-align: center;  
  60.     }  
  61.   
  62.     .chart {  
  63.         position: relative;  
  64.         float: left;  
  65.         margin-right: 10px;  
  66.     }  
  67. </style>  
  68.   
  69. <div class="chartContainer">  
  70.     <div class="chart">  
  71.         <h2>Range Column</h2>  
  72.         <div id="chartRangeColumn"></div>  
  73.     </div>  
  74. </div>  
  75.   
  76. <div class="NOAAdata-attribution">  
  77.     Weather data from:<br />  
  78.     <a href="http://www.noaa.gov/" target="_blank">NOAA</a>  
  79. </div>  

Listing 39.

MVC
Figure 20.

Spline Charts

Let’s draw the spline charts category.

Spline

To render the bar chart we have added a partial view “~/views/shared/SplineCharts/_Spline.cshtml” so add the following HTML in it as shown in Listing 40.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2.   
  3. <script type="text/javascript" src="https://www.igniteui.com/data-files/uk-france-population.js"></script>  
  4.   
  5. <script type="text/javascript">  
  6.   
  7.     $(function () {  
  8.   
  9.        var data = @Html.Raw(Model.Data)  
  10.   
  11.         $("#chart").igDataChart({  
  12.             width: "100%",  
  13.             height: "400px",  
  14.             legend: { element: "lineLegend" },  
  15.             title: "Population per Country",  
  16.             subtitle: "A comparison of population in 1995 and 2005",  
  17.             dataSource: data,  
  18.             axes: [  
  19.                 {  
  20.                     name: "NameAxis",  
  21.                     type: "categoryX",  
  22.                     label: "CountryName"  
  23.                 },  
  24.                 {  
  25.                     name: "PopulationAxis",  
  26.                     type: "numericY",  
  27.                     minimumValue: 0,  
  28.                     title: "Millions of People",  
  29.                 }  
  30.             ],  
  31.             series: [  
  32.                 {  
  33.                     name: "2005Population",  
  34.                     type: "spline",  
  35.                     title: "2005",  
  36.                     xAxis: "NameAxis",  
  37.                     yAxis: "PopulationAxis",  
  38.                     valueMemberPath: "Pop2005",  
  39.                     isTransitionInEnabled: true,  
  40.                     isHighlightingEnabled: true,  
  41.                     thickness: 5  
  42.                 },  
  43.                 {  
  44.                     name: "1995Population",  
  45.                     type: "spline",  
  46.                     title: "1995",  
  47.                     xAxis: "NameAxis",  
  48.                     yAxis: "PopulationAxis",  
  49.                     valueMemberPath: "Pop1995",  
  50.                     isTransitionInEnabled: true,  
  51.                     isHighlightingEnabled: true,  
  52.                     thickness: 5  
  53.                 }  
  54.             ]  
  55.         });  
  56.     });  
  57. </script>  
  58.   
  59. <style type="text/css">  
  60.   
  61.   
  62.     .selectionOptions {  
  63.         margin-bottom: 10px;  
  64.     }  
  65.   
  66.     td {  
  67.         vertical-align: top;  
  68.     }  
  69.   
  70.     .chartElement {  
  71.         padding-bottom: 20px;  
  72.     }  
  73. </style>  
  74.   
  75. <table>  
  76.     <tr>  
  77.         <td id="chart" class="chartElement" />  
  78.         <td id="lineLegend" style="float: left" />  
  79.     </tr>  
  80. </table>  
  81. <div class="Quandl-attribution">  
  82.     Population data from:  
  83.     <a href="http://www.quandl.com/" target="_blank">Quandl</a>  
  84. </div>  

Listing 40.

MVC
Figure 21. 

Spline Area

To render the bar chart we have added a partial view “~/views/shared/SplineCharts/_SplineArea.cshtml” so add the following HTML in it as shown in Listing 41.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2.   
  3. <script type="text/javascript" src="https://www.igniteui.com/data-files/uk-france-population.js"></script>  
  4.   
  5. <script type="text/javascript">  
  6.   
  7.     $(function () {  
  8.   
  9.         var data = @Html.Raw(Model.Data)  
  10.   
  11.         $("#chart").igDataChart({  
  12.             width: "100%",  
  13.             height: "400px",  
  14.             legend: { element: "lineLegend" },  
  15.             title: "Population per Country",  
  16.             subtitle: "A comparison of population in 1995 and 2005",  
  17.             dataSource: data,  
  18.             axes: [  
  19.                 {  
  20.                     name: "NameAxis",  
  21.                     type: "categoryX",  
  22.                     label: "CountryName"  
  23.                 },  
  24.                 {  
  25.                     name: "PopulationAxis",  
  26.                     type: "numericY",  
  27.                     minimumValue: 0,  
  28.                     title: "Millions of People",  
  29.                 }  
  30.             ],  
  31.             series: [  
  32.                 {  
  33.                     name: "2005Population",  
  34.                     type: "splineArea",  
  35.                     title: "2005",  
  36.                     xAxis: "NameAxis",  
  37.                     yAxis: "PopulationAxis",  
  38.                     valueMemberPath: "Pop2005",  
  39.                     isTransitionInEnabled: true,  
  40.                     isHighlightingEnabled: true,  
  41.                     thickness: 5  
  42.                 },  
  43.                 {  
  44.                     name: "1995Population",  
  45.                     type: "splineArea",  
  46.                     title: "1995",  
  47.                     xAxis: "NameAxis",  
  48.                     yAxis: "PopulationAxis",  
  49.                     valueMemberPath: "Pop1995",  
  50.                     isTransitionInEnabled: true,  
  51.                     isHighlightingEnabled: true,  
  52.                     thickness: 5  
  53.                 }  
  54.             ]  
  55.         });  
  56.     });  
  57. </script>  
  58.   
  59. <style type="text/css">  
  60.   
  61.   
  62.     .selectionOptions {  
  63.         margin-bottom: 10px;  
  64.     }  
  65.   
  66.     td {  
  67.         vertical-align: top;  
  68.     }  
  69.   
  70.     .chartElement {  
  71.         padding-bottom: 20px;  
  72.     }  
  73. </style>  
  74.   
  75. <table>  
  76.     <tr>  
  77.         <td id="chart" class="chartElement" />  
  78.         <td id="lineLegend" style="float: left" />  
  79.     </tr>  
  80. </table>  
  81. <div class="Quandl-attribution">  
  82.     Population data from:  
  83.     <a href="http://www.quandl.com/" target="_blank">Quandl</a>  
  84. </div>  

Listing 41.

MVC
Figure 22. 

Shape Charts

Let’s draw the shape category charts.

Binding Break Even Data

To render the bar chart we have added a partial view “~/views/shared/ShapeCharts/_BindingBreakEventData.cshtml” so add the following HTML in it as shown in Listing 42.

  1. <style>  
  2.     .shapeChart {  
  3.         display: inline-block;  
  4.         vertical-align: top;  
  5.     }  
  6. </style>  
  7.   
  8. <div id="shapeChart" class="shapeChart"></div>  
  9. <div id="legend" class="shapeChart"></div>  
  10.   
  11. <script>  
  12.   
  13.          var data = [  
  14.             {  
  15.                 "Units": 100, "Revenue": 1800, "VariableCost": 600, "FixedCost": 1000,  
  16.             }];  
  17.   
  18.          $(function () {  
  19.             $("#shapeChart").igShapeChart({  
  20.                 dataSource: data,  
  21.                 thickness: 3,  
  22.                 width: "600px",  
  23.                 height: "500px",  
  24.                 yAxisTitle: "Price ($)",  
  25.                 xAxisTitle: "Number of Units",  
  26.                 brushes: ["#7F2AFA", "#FF3100", "#02B602", "#7222E7", "#C62600", "#808080", "#282828", "#029802", "#078FE4"],  
  27.                 legend: "legend",  
  28.                 isHorizontalZoomEnabled: true,  
  29.                 isVerticalZoomEnabled: true,  
  30.             });  
  31.   
  32.             $("#legend").igChartLegend({});  
  33.         });  
  34.   
  35. </script>  

Listing 42.

MVC
Figure 23. 

Polygon

To render the bar chart we have added a partial view “~/views/shared/ShapeCharts/_Polygon.cshtml” so add the following HTML in it as shown in Listing 43.

  1. <div id="polygonChart"></div>  
  2. <script type="text/javascript">  
  3.         (function () {  
  4.             $("#polygonChart").igShapeChart({  
  5.                 width: "98%",  
  6.                 height: "550px",  
  7.                 title: "Home Floor Plan",  
  8.                 dataSource: createRoomData(),  
  9.                 chartType: "polygon",  
  10.                 outlines: ["white"],  
  11.                 isHorizontalZoomEnabled: true,  
  12.                 isVerticalZoomEnabled: true,  
  13.                 seriesAdded: function (evt, args) {  
  14.                     args.series.markerTemplate = {  
  15.                         render: function (renderInfo) {  
  16.                             renderInfo.context.font = "16px serif";  
  17.                             renderInfo.context.fillStyle = "white";  
  18.                             renderInfo.context.textAlign = "center";  
  19.                             renderInfo.context.fillText(renderInfo.data.item().Label, renderInfo.xPosition, renderInfo.yPosition);  
  20.                         }  
  21.                     }  
  22.                 }  
  23.             });  
  24.   
  25.             function createRoomData() {  
  26.                 return [  
  27.                     { "Label": "", "Points": [[{ x: 0, y: 0 }, { x: 10, y: 0 }, { x: 10, y: 7 }, { x: 7, y: 7 }, { x: 7, y: 10 }, { x: 0, y: 10 }], ] },  
  28.                     { "Label": "Master Bedroom", "Points": [[{ x: 0, y: 0 }, { x: 4, y: 0 }, { x: 4, y: 5 }, { x: 0, y: 5 }], ] },  
  29.                     { "Label": "Guest Bedroom", "Points": [[{ x: 2, y: 10 }, { x: 7, y: 10 }, { x: 7, y: 7 }, { x: 2, y: 7 }], ] },  
  30.                     { "Label": "Bath", "Points": [[{ x: 0, y: 10 }, { x: 2, y: 10 }, { x: 2, y: 7 }, { x: 0, y: 7 }], ] },  
  31.                     { "Label": "Kitchen", "Points": [[{ x: 6, y: 7 }, { x: 10, y: 7 }, { x: 10, y: 4 }, { x: 6, y: 4 }], ] },  
  32.                     { "Label": "Living Room", "Points": [[{ x: 6, y: 4 }, { x: 10, y: 4 }, { x: 10, y: 0 }, { x: 6, y: 0 }], ] }];  
  33.             };  
  34.         })();  
  35. </script>  

Listing 43.

MVC
Figure 24. 

Polyline

To render the bar chart we have added a partial view “~/views/shared/ShapeCharts/_polyline.cshtml” so add the following HTML in it as shown in Listing 44.

  1. <div id="polylineChart"></div>  
  2. <script type="text/javascript">  
  3.         (function () {  
  4.             $("#polylineChart").igShapeChart({  
  5.                 width: "98%",  
  6.                 height: "550px",  
  7.                 chartType: "auto",  
  8.                 markerTypes: ["circle"],  
  9.                 dataSource: createPolylineData(),  
  10.                 isHorizontalZoomEnabled: true,  
  11.                 isVerticalZoomEnabled: true,  
  12.                 xAxisInterval: 40,  
  13.                 yAxisInterval: 50,  
  14.                 xAxisMinimumValue: -120,  
  15.                 yAxisMinimumValue: 20,  
  16.                 xAxisMaximumValue: 120,  
  17.                 yAxisMaximumValue: -300,  
  18.             });  
  19.   
  20.             function createPolylineData() {  
  21.                 var polyline = [  
  22.                 // vertical and horizontal lines  
  23.                 { "Points": [Line(0, 0, 0, -250)], },  
  24.                 { "Points": [Line(-40, -200, 0, -200), Line(0, -200, 40, -200)], },  
  25.                 { "Points": [Line(-100, -50, 0, -50), Line(0, -50, 100, -50)], },  
  26.                 // right side  
  27.                 { "Points": [Line(0, 0, 50, -25), Line(50, -25, 60, -50), Line(60, -50, 40, -200), Line(40, -200, 0, -250), ] },  
  28.                 { "Points": [Line(0, 0, 50, -25), Line(50, -25, 40, -50), Line(40, -50, 40, -200), Line(40, -200, 0, -250), ] },  
  29.                 { "Points": [Line(0, 0, 40, -50), Line(40, -50, 20, -200), Line(20, -200, 0, -250), ] },  
  30.                 { "Points": [Line(0, 0, 10, -50), Line(10, -50, 20, -200), Line(20, -200, 0, -250), ] },  
  31.                 { "Points": [Line(0, 0, 60, 0), Line(60, 0, 100, -50), Line(100, -50, 40, -200), Line(40, -200, 0, -250)] },  
  32.                 { "Points": [Line(0, 0, 50, -25), Line(50, -25, 80, -50), Line(80, -50, 40, -200), Line(40, -200, 0, -250), ] },  
  33.                 // left side  
  34.                 { "Points": [Line(0, 0, -50, -25), Line(-50, -25, -60, -50), Line(-60, -50, -40, -200), Line(-40, -200, 0, -250), ] },  
  35.                 { "Points": [Line(0, 0, -50, -25), Line(-50, -25, -40, -50), Line(-40, -50, -40, -200), Line(-40, -200, 0, -250), ] },  
  36.                 { "Points": [Line(0, 0, -40, -50), Line(-40, -50, -20, -200), Line(-20, -200, 0, -250), ] },  
  37.                 { "Points": [Line(0, 0, -10, -50), Line(-10, -50, -20, -200), Line(-20, -200, 0, -250), ] },  
  38.                 { "Points": [Line(0, 0, -60, 0), Line(-60, 0, -100, -50), Line(-100, -50, -40, -200), Line(-40, -200, 0, -250)] },  
  39.                 { "Points": [Line(0, 0, -50, -25), Line(-50, -25, -80, -50), Line(-80, -50, -40, -200), Line(-40, -200, 0, -250), ] },  
  40.                 ];  
  41.                 // optional markers showing intersection of polylines  
  42.                 var markers = [];  
  43.                 for (i = 0; i < polyline.length; i++) {  
  44.                     var points = polyline[i].Points;  
  45.                     for (p = 0; p < points.length; p++) {  
  46.                         var shape = points[p];  
  47.                         for (s = 0; s < shape.length; s++) {  
  48.                             markers.push({ "x": shape[s].x, "y": shape[s].y, });  
  49.                         }  
  50.                     }  
  51.                 }  
  52.   
  53.                 function Line(x1, y1, x2, y2) {  
  54.                     return [{ x: x1, y: y1 }, { x: x2, y: y2 }];  
  55.                 }  
  56.   
  57.                 return [polyline, markers];  
  58.             }  
  59.         })();  
  60. </script>  

Listing 44

MVC
Figure 25. 

Step Charts

Let’s draw the step charts category.

Step Area

To render the bar chart we have added a partial view “~/views/shared/StepCharts/_StepArea.cshtml” so add the following HTML in it as shown in Listing 45.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/uk-france-population.js"></script>  
  3. <script type="text/javascript">  
  4.     $(function () {  
  5.         var data = @Html.Raw(Model.Data);  
  6.         $("#chart").igDataChart({  
  7.             width: "100%",  
  8.             height: "400px",  
  9.             legend: { element: "lineLegend" },  
  10.             title: "Population per Country",  
  11.             subtitle: "A comparison of population in 1995 and 2005",  
  12.             dataSource: data,  
  13.             axes: [  
  14.                 {  
  15.                     name: "NameAxis",  
  16.                     type: "categoryX",  
  17.                     label: "CountryName"  
  18.                 },  
  19.                 {  
  20.                     name: "PopulationAxis",  
  21.                     type: "numericY",  
  22.                     minimumValue: 0,  
  23.                     title: "Millions of People",  
  24.                 }  
  25.             ],  
  26.             series: [  
  27.                 {  
  28.                     name: "2005Population",  
  29.                     type: "stepArea",  
  30.                     title: "2005",  
  31.                     xAxis: "NameAxis",  
  32.                     yAxis: "PopulationAxis",  
  33.                     valueMemberPath: "Pop2005",  
  34.                     isTransitionInEnabled: true,  
  35.                     isHighlightingEnabled: true,  
  36.                     thickness: 1  
  37.                 },  
  38.                 {  
  39.                     name: "1995Population",  
  40.                     type: "stepArea",  
  41.                     title: "1995",  
  42.                     xAxis: "NameAxis",  
  43.                     yAxis: "PopulationAxis",  
  44.                     valueMemberPath: "Pop1995",  
  45.                     isTransitionInEnabled: true,  
  46.                     isHighlightingEnabled: true,  
  47.                     thickness: 1  
  48.                 }  
  49.             ]  
  50.         });  
  51.     });  
  52. </script>  
  53.   
  54. <style type="text/css">  
  55.     .selectionOptions {  
  56.         margin-bottom: 10px;  
  57.     }  
  58.   
  59.     td {  
  60.         vertical-align: top;  
  61.     }  
  62.   
  63.     .chartElement {  
  64.         padding-bottom: 20px;  
  65.     }  
  66. </style>  
  67.   
  68. <table>  
  69.     <tr>  
  70.         <td id="chart" class="chartElement" />  
  71.         <td id="lineLegend" style="float: left" />  
  72.     </tr>  
  73. </table>  
  74. <div class="Quandl-attribution">  
  75.     Population data from:  
  76.     <a href="http://www.quandl.com/" target="_blank">Quandl</a>  
  77. </div>  

Listing 45.

MVC
Figure 26. 

Step Line

To render the bar chart we have added a partial view “~/views/shared/StepCharts/_StepLine.cshtml” so add the following HTML in it as shown in Listing 46.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/uk-france-population.js"></script>  
  3. <script type="text/javascript">  
  4.     $(function () {  
  5.        var data = @Html.Raw(Model.Data);  
  6.         $("#chart").igDataChart({  
  7.             width: "100%",  
  8.             height: "400px",  
  9.             legend: { element: "lineLegend" },  
  10.             title: "Population per Country",  
  11.             subtitle: "A comparison of population in 1995 and 2005",  
  12.             dataSource: data,  
  13.             axes: [  
  14.                 {  
  15.                     name: "NameAxis",  
  16.                     type: "categoryX",  
  17.                     label: "CountryName"  
  18.                 },  
  19.                 {  
  20.                     name: "PopulationAxis",  
  21.                     type: "numericY",  
  22.                     minimumValue: 0,  
  23.                     title: "Millions of People",  
  24.                 }  
  25.             ],  
  26.             series: [  
  27.                 {  
  28.                     name: "2005Population",  
  29.                     type: "stepLine",  
  30.                     title: "2005",  
  31.                     xAxis: "NameAxis",  
  32.                     yAxis: "PopulationAxis",  
  33.                     valueMemberPath: "Pop2005",  
  34.                     isTransitionInEnabled: true,  
  35.                     isHighlightingEnabled: true,  
  36.                     thickness: 5  
  37.                 },  
  38.                 {  
  39.                     name: "1995Population",  
  40.                     type: "stepLine",  
  41.                     title: "1995",  
  42.                     xAxis: "NameAxis",  
  43.                     yAxis: "PopulationAxis",  
  44.                     valueMemberPath: "Pop1995",  
  45.                     isTransitionInEnabled: true,  
  46.                     isHighlightingEnabled: true,  
  47.                     thickness: 5  
  48.                 }  
  49.             ]  
  50.         });  
  51.     });  
  52. </script>  
  53.   
  54. <style type="text/css">  
  55.     .selectionOptions {  
  56.         margin-bottom: 10px;  
  57.     }  
  58.   
  59.     td {  
  60.         vertical-align: top;  
  61.     }  
  62.   
  63.     .chartElement {  
  64.         padding-bottom: 20px;  
  65.     }  
  66. </style>  
  67.   
  68. <table>  
  69.     <tr>  
  70.         <td id="chart" class="chartElement" />  
  71.         <td id="lineLegend" style="float: left" />  
  72.     </tr>  
  73. </table>  
  74. <div class="Quandl-attribution">  
  75.     Population data from:  
  76.     <a href="http://www.quandl.com/" target="_blank">Quandl</a>  
  77. </div>  

Listing 46.

MVC
Figure 27. 

Waterfall

To render the bar chart we have added a partial view “~/views/shared/StepCharts/_Waterfall.cshtml” so add the following HTML in it as shown in Listing 47.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <script type="text/javascript" src="https://www.igniteui.com/data-files/uk-france-population.js"></script>  
  3.   
  4. <script type="text/javascript">  
  5.   
  6.     $(function () {  
  7.   
  8.          var data = @Html.Raw(Model.Data);  
  9.   
  10.         $("#chart").igDataChart({  
  11.             width: "100%",  
  12.             height: "400px",  
  13.             legend: { element: "lineLegend" },  
  14.             title: "Population per Country",  
  15.             subtitle: "A comparison of population in 1995 and 2005",  
  16.             dataSource: data,  
  17.             axes: [  
  18.                 {  
  19.                     name: "NameAxis",  
  20.                     type: "categoryX",  
  21.                     label: "CountryName"  
  22.                 },  
  23.                 {  
  24.                     name: "PopulationAxis",  
  25.                     type: "numericY",  
  26.                     minimumValue: 0,  
  27.                     title: "Millions of People",  
  28.                 }  
  29.             ],  
  30.             series: [{  
  31.                 type: "waterfall",  
  32.                 name: "2005Population",  
  33.                 title: "2005",  
  34.                 xAxis: "NameAxis",  
  35.                 yAxis: "PopulationAxis",  
  36.                 valueMemberPath: "Pop2005",  
  37.                 markerType: "none",  
  38.                 isTransitionInEnabled: true,  
  39.                 isHighlightingEnabled: true,  
  40.                 thickness: 1  
  41.             }, {  
  42.                 type: "waterfall",  
  43.                 name: "1995Population",  
  44.                 title: "1995",  
  45.                 xAxis: "NameAxis",  
  46.                 yAxis: "PopulationAxis",  
  47.                 valueMemberPath: "Pop1995",  
  48.                 markerType: "none",  
  49.                 isTransitionInEnabled: true,  
  50.                 isHighlightingEnabled: true,  
  51.                 thickness: 1  
  52.             }]  
  53.         });  
  54.     });  
  55. </script>  
  56.   
  57. <style type="text/css">  
  58.   
  59.   
  60.     .selectionOptions {  
  61.         margin-bottom: 10px;  
  62.     }  
  63.   
  64.     td {  
  65.         vertical-align: top;  
  66.     }  
  67.   
  68.     .chartElement {  
  69.         padding-bottom: 20px;  
  70.     }  
  71. </style>  
  72.   
  73. <table>  
  74.     <tr>  
  75.         <td id="chart" class="chartElement" />  
  76.         <td id="lineLegend" style="float: left" />  
  77.     </tr>  
  78. </table>  
  79. <div class="Quandl-attribution">  
  80.     Population data from:  
  81.     <a href="http://www.quandl.com/" target="_blank">Quandl</a>  
  82. </div>  

Listing 47.

MVC
Figure 28. 

Stacked Chart

Let’s draw the stacked charts category. 

Stacked Area

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_StackedArea.cshtml” so add the following HTML in it as shown in Listing 48.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked Area</h2>  
  4.     <div id="stackedArea"></div>  
  5. </div>  
  6. <div class="EIAdata-attribution">  
  7.     Energy data from:<br />  
  8.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  9. </div>  
  10.   
  11. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  12.   
  13. <script>  
  14.     /* 
  15. Data from U.S. Energy Information Administration (2012) 
  16. */  
  17.  var lastFiveYears = @Html.Raw(Model.Data);  
  18.   
  19.   
  20.     $(function () {  
  21.         function generateCategoryYChart(chartType) {  
  22.   
  23.             var selector = "#" + chartType;  
  24.             $(selector).igDataChart({  
  25.                 dataSource: lastFiveYears,  
  26.                 height: "400px",  
  27.                 width: "400px",  
  28.                 title: "Energy Production Per Country",  
  29.                 subtitle: "The top five Total Primary Energy producers",  
  30.                 axes: [{  
  31.                     name: "Year",  
  32.                     type: "categoryY",  
  33.                     label: "Year",  
  34.                     title: "Year",  
  35.                     gap: 1,  
  36.                     labelMargin: 0  
  37.                 }, {  
  38.                     name: "Volume",  
  39.                     type: "numericX",  
  40.                     title: "Quadrillion Btu"  
  41.                 }],  
  42.                 series: [{  
  43.                     name: "parent",  
  44.                     type: chartType,  
  45.                     xAxis: "Volume",  
  46.                     yAxis: "Year",  
  47.                     outline: "transparent",  
  48.                     radius: 0,  
  49.                     series: [{  
  50.                         name: "China",  
  51.                         title: "China",  
  52.                         type: "stackedFragment",  
  53.                         showTooltip: true,  
  54.                         tooltipTemplate: "China",  
  55.                         valueMemberPath: "China"  
  56.                     }, {  
  57.                         name: "United States",  
  58.                         title: "United States",  
  59.                         type: "stackedFragment",  
  60.                         showTooltip: true,  
  61.                         tooltipTemplate: "United States",  
  62.                         valueMemberPath: "UnitedStates"  
  63.                     }, {  
  64.                         name: "Russia",  
  65.                         title: "Russia",  
  66.                         showTooltip: true,  
  67.                         tooltipTemplate: "Russia",  
  68.                         type: "stackedFragment",  
  69.                         valueMemberPath: "Russia"  
  70.                     }, {  
  71.                         name: "Saudi Arabia",  
  72.                         title: "Saudi Arabia",  
  73.                         showTooltip: true,  
  74.                         tooltipTemplate: "Saudi Arabia",  
  75.                         type: "stackedFragment",  
  76.                         valueMemberPath: "SaudiArabia"  
  77.                     }, {  
  78.                         name: "Canada",  
  79.                         title: "Canada",  
  80.                         showTooltip: true,  
  81.                         tooltipTemplate: "Canada",  
  82.                         type: "stackedFragment",  
  83.                         valueMemberPath: "Canada"  
  84.                     }]  
  85.                 }],  
  86.                 horizontalZoomable: true,  
  87.                 verticalZoomable: true,  
  88.                 windowResponse: "immediate"  
  89.             });  
  90.         }  
  91.   
  92.         function generateCategoryXChart(chartType) {  
  93.   
  94.             var selector = "#" + chartType;  
  95.             var isColumnChart = chartType.contains("Column");  
  96.   
  97.             $(selector).igDataChart({  
  98.                 dataSource: lastFiveYears,  
  99.                 height: "400px",  
  100.                 width: "400px",  
  101.                 title: "Energy Production Per Country",  
  102.                 subtitle: "The top five Total Primary Energy producers",  
  103.                 axes: [{  
  104.                     name: "Year",  
  105.                     type: "categoryX",  
  106.                     label: "Year",  
  107.                     title: "Year",  
  108.                     gap: 1,  
  109.                 },  
  110.                 {  
  111.                     name: "Volume",  
  112.                     type: "numericY",  
  113.                     title: "Quadrillion Btu"  
  114.                 }],  
  115.                 series: [function () { // a self executing function to create the series initialization object  
  116.                     var seriesObj = {  
  117.                         name: "parent",  
  118.                         xAxis: "Year",  
  119.                         yAxis: "Volume",  
  120.                         type: chartType,  
  121.                         outline: "transparent",  
  122.                         series: [{  
  123.                             name: "China",  
  124.                             title: "China",  
  125.                             type: "stackedFragment",  
  126.                             showTooltip: true,  
  127.                             tooltipTemplate: "China",  
  128.                             valueMemberPath: "China"  
  129.                         }, {  
  130.                             name: "United States",  
  131.                             title: "United States",  
  132.                             type: "stackedFragment",  
  133.                             showTooltip: true,  
  134.                             tooltipTemplate: "United States",  
  135.                             valueMemberPath: "UnitedStates"  
  136.                         }, {  
  137.                             name: "Russia",  
  138.                             title: "Russia",  
  139.                             showTooltip: true,  
  140.                             tooltipTemplate: "Russia",  
  141.                             type: "stackedFragment",  
  142.                             valueMemberPath: "Russia"  
  143.                         }, {  
  144.                             name: "Saudi Arabia",  
  145.                             title: "Saudi Arabia",  
  146.                             showTooltip: true,  
  147.                             tooltipTemplate: "Saudi Arabia",  
  148.                             type: "stackedFragment",  
  149.                             valueMemberPath: "SaudiArabia"  
  150.                         }, {  
  151.                             name: "Canada",  
  152.                             title: "Canada",  
  153.                             showTooltip: true,  
  154.                             tooltipTemplate: "Canada",  
  155.                             type: "stackedFragment",  
  156.                             valueMemberPath: "Canada"  
  157.                         }]  
  158.                     };  
  159.                     if (isColumnChart) { //for column charts set the radius to 0  
  160.                         seriesObj.radius = 0;  
  161.                     }  
  162.                     return seriesObj;  
  163.                 }()],  
  164.                 horizontalZoomable: true,  
  165.                 verticalZoomable: true,  
  166.                 windowResponse: "immediate"  
  167.             });  
  168.         };  
  169.   
  170.         generateCategoryXChart("stackedArea");  
  171.     });  
  172.   
  173. </script>  

Listing 48.

MVC
Figure 29. 

Stacked Bar

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_StackedBar.cshtml” so add the following HTML in it as shown in Listing 49. 

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked Bar</h2>  
  4.     <div id="stackedBar"></div>  
  5. </div>  
  6. <div class="EIAdata-attribution">  
  7.     Energy data from:<br />  
  8.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  9. </div>  
  10.   
  11. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  12.   
  13. <script>  
  14.     /* 
  15. Data from U.S. Energy Information Administration (2012) 
  16. */  
  17.  var lastFiveYears = @Html.Raw(Model.Data);  
  18.   
  19.     $(function () {  
  20.         function generateCategoryYChart(chartType) {  
  21.   
  22.             var selector = "#" + chartType;  
  23.             $(selector).igDataChart({  
  24.                 dataSource: lastFiveYears,  
  25.                 height: "400px",  
  26.                 width: "400px",  
  27.                 title: "Energy Production Per Country",  
  28.                 subtitle: "The top five Total Primary Energy producers",  
  29.                 axes: [{  
  30.                     name: "Year",  
  31.                     type: "categoryY",  
  32.                     label: "Year",  
  33.                     title: "Year",  
  34.                     gap: 1,  
  35.                     labelMargin: 0  
  36.                 }, {  
  37.                     name: "Volume",  
  38.                     type: "numericX",  
  39.                     title: "Quadrillion Btu"  
  40.                 }],  
  41.                 series: [{  
  42.                     name: "parent",  
  43.                     type: chartType,  
  44.                     xAxis: "Volume",  
  45.                     yAxis: "Year",  
  46.                     outline: "transparent",  
  47.                     radius: 0,  
  48.                     series: [{  
  49.                         name: "China",  
  50.                         title: "China",  
  51.                         type: "stackedFragment",  
  52.                         showTooltip: true,  
  53.                         tooltipTemplate: "China",  
  54.                         valueMemberPath: "China"  
  55.                     }, {  
  56.                         name: "United States",  
  57.                         title: "United States",  
  58.                         type: "stackedFragment",  
  59.                         showTooltip: true,  
  60.                         tooltipTemplate: "United States",  
  61.                         valueMemberPath: "UnitedStates"  
  62.                     }, {  
  63.                         name: "Russia",  
  64.                         title: "Russia",  
  65.                         showTooltip: true,  
  66.                         tooltipTemplate: "Russia",  
  67.                         type: "stackedFragment",  
  68.                         valueMemberPath: "Russia"  
  69.                     }, {  
  70.                         name: "Saudi Arabia",  
  71.                         title: "Saudi Arabia",  
  72.                         showTooltip: true,  
  73.                         tooltipTemplate: "Saudi Arabia",  
  74.                         type: "stackedFragment",  
  75.                         valueMemberPath: "SaudiArabia"  
  76.                     }, {  
  77.                         name: "Canada",  
  78.                         title: "Canada",  
  79.                         showTooltip: true,  
  80.                         tooltipTemplate: "Canada",  
  81.                         type: "stackedFragment",  
  82.                         valueMemberPath: "Canada"  
  83.                     }]  
  84.                 }],  
  85.                 horizontalZoomable: true,  
  86.                 verticalZoomable: true,  
  87.                 windowResponse: "immediate"  
  88.             });  
  89.         }  
  90.   
  91.         function generateCategoryXChart(chartType) {  
  92.   
  93.             var selector = "#" + chartType;  
  94.             var isColumnChart = chartType.contains("Column");  
  95.   
  96.             $(selector).igDataChart({  
  97.                 dataSource: lastFiveYears,  
  98.                 height: "400px",  
  99.                 width: "400px",  
  100.                 title: "Energy Production Per Country",  
  101.                 subtitle: "The top five Total Primary Energy producers",  
  102.                 axes: [{  
  103.                     name: "Year",  
  104.                     type: "categoryX",  
  105.                     label: "Year",  
  106.                     title: "Year",  
  107.                     gap: 1,  
  108.                 },  
  109.                 {  
  110.                     name: "Volume",  
  111.                     type: "numericY",  
  112.                     title: "Quadrillion Btu"  
  113.                 }],  
  114.                 series: [function () { // a self executing function to create the series initialization object  
  115.                     var seriesObj = {  
  116.                         name: "parent",  
  117.                         xAxis: "Year",  
  118.                         yAxis: "Volume",  
  119.                         type: chartType,  
  120.                         outline: "transparent",  
  121.                         series: [{  
  122.                             name: "China",  
  123.                             title: "China",  
  124.                             type: "stackedFragment",  
  125.                             showTooltip: true,  
  126.                             tooltipTemplate: "China",  
  127.                             valueMemberPath: "China"  
  128.                         }, {  
  129.                             name: "United States",  
  130.                             title: "United States",  
  131.                             type: "stackedFragment",  
  132.                             showTooltip: true,  
  133.                             tooltipTemplate: "United States",  
  134.                             valueMemberPath: "UnitedStates"  
  135.                         }, {  
  136.                             name: "Russia",  
  137.                             title: "Russia",  
  138.                             showTooltip: true,  
  139.                             tooltipTemplate: "Russia",  
  140.                             type: "stackedFragment",  
  141.                             valueMemberPath: "Russia"  
  142.                         }, {  
  143.                             name: "Saudi Arabia",  
  144.                             title: "Saudi Arabia",  
  145.                             showTooltip: true,  
  146.                             tooltipTemplate: "Saudi Arabia",  
  147.                             type: "stackedFragment",  
  148.                             valueMemberPath: "SaudiArabia"  
  149.                         }, {  
  150.                             name: "Canada",  
  151.                             title: "Canada",  
  152.                             showTooltip: true,  
  153.                             tooltipTemplate: "Canada",  
  154.                             type: "stackedFragment",  
  155.                             valueMemberPath: "Canada"  
  156.                         }]  
  157.                     };  
  158.                     if (isColumnChart) { //for column charts set the radius to 0  
  159.                         seriesObj.radius = 0;  
  160.                     }  
  161.                     return seriesObj;  
  162.                 }()],  
  163.                 horizontalZoomable: true,  
  164.                 verticalZoomable: true,  
  165.                 windowResponse: "immediate"  
  166.             });  
  167.         };  
  168.   
  169.         generateCategoryYChart("stackedBar");  
  170.     });  
  171.   
  172. </script>   

Listing 49.

MVC
Figure 30. 

Stacked Column

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_StackedColumn.cshtml” so add the following HTML in it as shown in Listing 50. 

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked Column</h2>  
  4.     <div id="stackedColumn"></div>  
  5. </div>  
  6.   
  7. <div class="EIAdata-attribution">  
  8.     Energy data from:<br />  
  9.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  10. </div>  
  11.   
  12. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  13.   
  14. <script>  
  15.     /* 
  16. Data from U.S. Energy Information Administration (2012) 
  17. */  
  18.  var lastFiveYears = @Html.Raw(Model.Data);  
  19.   
  20.   
  21.     $(function () {  
  22.         function generateCategoryYChart(chartType) {  
  23.   
  24.             var selector = "#" + chartType;  
  25.             $(selector).igDataChart({  
  26.                 dataSource: lastFiveYears,  
  27.                 height: "400px",  
  28.                 width: "400px",  
  29.                 title: "Energy Production Per Country",  
  30.                 subtitle: "The top five Total Primary Energy producers",  
  31.                 axes: [{  
  32.                     name: "Year",  
  33.                     type: "categoryY",  
  34.                     label: "Year",  
  35.                     title: "Year",  
  36.                     gap: 1,  
  37.                     labelMargin: 0  
  38.                 }, {  
  39.                     name: "Volume",  
  40.                     type: "numericX",  
  41.                     title: "Quadrillion Btu"  
  42.                 }],  
  43.                 series: [{  
  44.                     name: "parent",  
  45.                     type: chartType,  
  46.                     xAxis: "Volume",  
  47.                     yAxis: "Year",  
  48.                     outline: "transparent",  
  49.                     radius: 0,  
  50.                     series: [{  
  51.                         name: "China",  
  52.                         title: "China",  
  53.                         type: "stackedFragment",  
  54.                         showTooltip: true,  
  55.                         tooltipTemplate: "China",  
  56.                         valueMemberPath: "China"  
  57.                     }, {  
  58.                         name: "United States",  
  59.                         title: "United States",  
  60.                         type: "stackedFragment",  
  61.                         showTooltip: true,  
  62.                         tooltipTemplate: "United States",  
  63.                         valueMemberPath: "UnitedStates"  
  64.                     }, {  
  65.                         name: "Russia",  
  66.                         title: "Russia",  
  67.                         showTooltip: true,  
  68.                         tooltipTemplate: "Russia",  
  69.                         type: "stackedFragment",  
  70.                         valueMemberPath: "Russia"  
  71.                     }, {  
  72.                         name: "Saudi Arabia",  
  73.                         title: "Saudi Arabia",  
  74.                         showTooltip: true,  
  75.                         tooltipTemplate: "Saudi Arabia",  
  76.                         type: "stackedFragment",  
  77.                         valueMemberPath: "SaudiArabia"  
  78.                     }, {  
  79.                         name: "Canada",  
  80.                         title: "Canada",  
  81.                         showTooltip: true,  
  82.                         tooltipTemplate: "Canada",  
  83.                         type: "stackedFragment",  
  84.                         valueMemberPath: "Canada"  
  85.                     }]  
  86.                 }],  
  87.                 horizontalZoomable: true,  
  88.                 verticalZoomable: true,  
  89.                 windowResponse: "immediate"  
  90.             });  
  91.         }  
  92.   
  93.         function generateCategoryXChart(chartType) {  
  94.   
  95.             var selector = "#" + chartType;  
  96.             var isColumnChart = chartType.contains("Column");  
  97.   
  98.             $(selector).igDataChart({  
  99.                 dataSource: lastFiveYears,  
  100.                 height: "400px",  
  101.                 width: "400px",  
  102.                 title: "Energy Production Per Country",  
  103.                 subtitle: "The top five Total Primary Energy producers",  
  104.                 axes: [{  
  105.                     name: "Year",  
  106.                     type: "categoryX",  
  107.                     label: "Year",  
  108.                     title: "Year",  
  109.                     gap: 1,  
  110.                 },  
  111.                 {  
  112.                     name: "Volume",  
  113.                     type: "numericY",  
  114.                     title: "Quadrillion Btu"  
  115.                 }],  
  116.                 series: [function () { // a self executing function to create the series initialization object  
  117.                     var seriesObj = {  
  118.                         name: "parent",  
  119.                         xAxis: "Year",  
  120.                         yAxis: "Volume",  
  121.                         type: chartType,  
  122.                         outline: "transparent",  
  123.                         series: [{  
  124.                             name: "China",  
  125.                             title: "China",  
  126.                             type: "stackedFragment",  
  127.                             showTooltip: true,  
  128.                             tooltipTemplate: "China",  
  129.                             valueMemberPath: "China"  
  130.                         }, {  
  131.                             name: "United States",  
  132.                             title: "United States",  
  133.                             type: "stackedFragment",  
  134.                             showTooltip: true,  
  135.                             tooltipTemplate: "United States",  
  136.                             valueMemberPath: "UnitedStates"  
  137.                         }, {  
  138.                             name: "Russia",  
  139.                             title: "Russia",  
  140.                             showTooltip: true,  
  141.                             tooltipTemplate: "Russia",  
  142.                             type: "stackedFragment",  
  143.                             valueMemberPath: "Russia"  
  144.                         }, {  
  145.                             name: "Saudi Arabia",  
  146.                             title: "Saudi Arabia",  
  147.                             showTooltip: true,  
  148.                             tooltipTemplate: "Saudi Arabia",  
  149.                             type: "stackedFragment",  
  150.                             valueMemberPath: "SaudiArabia"  
  151.                         }, {  
  152.                             name: "Canada",  
  153.                             title: "Canada",  
  154.                             showTooltip: true,  
  155.                             tooltipTemplate: "Canada",  
  156.                             type: "stackedFragment",  
  157.                             valueMemberPath: "Canada"  
  158.                         }]  
  159.                     };  
  160.                     if (isColumnChart) { //for column charts set the radius to 0  
  161.                         seriesObj.radius = 0;  
  162.                     }  
  163.                     return seriesObj;  
  164.                 }()],  
  165.                 horizontalZoomable: true,  
  166.                 verticalZoomable: true,  
  167.                 windowResponse: "immediate"  
  168.             });  
  169.         };  
  170.         generateCategoryXChart("stackedColumn");  
  171.     });  
  172. </script>  

Listing 50.

MVC
Figure 31. 

Stacked Line

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_StackedLine.cshtml” so add the following HTML in it as shown in Listing 51. 

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked Line</h2>  
  4.     <div id="stackedLine"></div>  
  5. </div>  
  6.   
  7. <div class="EIAdata-attribution">  
  8.     Energy data from:<br />  
  9.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  10. </div>  
  11.   
  12. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  13.   
  14. <script>  
  15.     /* 
  16. Data from U.S. Energy Information Administration (2012) 
  17. */  
  18.  var lastFiveYears = @Html.Raw(Model.Data);  
  19.   
  20.   
  21.     $(function () {  
  22.         function generateCategoryYChart(chartType) {  
  23.   
  24.             var selector = "#" + chartType;  
  25.             $(selector).igDataChart({  
  26.                 dataSource: lastFiveYears,  
  27.                 height: "400px",  
  28.                 width: "400px",  
  29.                 title: "Energy Production Per Country",  
  30.                 subtitle: "The top five Total Primary Energy producers",  
  31.                 axes: [{  
  32.                     name: "Year",  
  33.                     type: "categoryY",  
  34.                     label: "Year",  
  35.                     title: "Year",  
  36.                     gap: 1,  
  37.                     labelMargin: 0  
  38.                 }, {  
  39.                     name: "Volume",  
  40.                     type: "numericX",  
  41.                     title: "Quadrillion Btu"  
  42.                 }],  
  43.                 series: [{  
  44.                     name: "parent",  
  45.                     type: chartType,  
  46.                     xAxis: "Volume",  
  47.                     yAxis: "Year",  
  48.                     outline: "transparent",  
  49.                     radius: 0,  
  50.                     series: [{  
  51.                         name: "China",  
  52.                         title: "China",  
  53.                         type: "stackedFragment",  
  54.                         showTooltip: true,  
  55.                         tooltipTemplate: "China",  
  56.                         valueMemberPath: "China"  
  57.                     }, {  
  58.                         name: "United States",  
  59.                         title: "United States",  
  60.                         type: "stackedFragment",  
  61.                         showTooltip: true,  
  62.                         tooltipTemplate: "United States",  
  63.                         valueMemberPath: "UnitedStates"  
  64.                     }, {  
  65.                         name: "Russia",  
  66.                         title: "Russia",  
  67.                         showTooltip: true,  
  68.                         tooltipTemplate: "Russia",  
  69.                         type: "stackedFragment",  
  70.                         valueMemberPath: "Russia"  
  71.                     }, {  
  72.                         name: "Saudi Arabia",  
  73.                         title: "Saudi Arabia",  
  74.                         showTooltip: true,  
  75.                         tooltipTemplate: "Saudi Arabia",  
  76.                         type: "stackedFragment",  
  77.                         valueMemberPath: "SaudiArabia"  
  78.                     }, {  
  79.                         name: "Canada",  
  80.                         title: "Canada",  
  81.                         showTooltip: true,  
  82.                         tooltipTemplate: "Canada",  
  83.                         type: "stackedFragment",  
  84.                         valueMemberPath: "Canada"  
  85.                     }]  
  86.                 }],  
  87.                 horizontalZoomable: true,  
  88.                 verticalZoomable: true,  
  89.                 windowResponse: "immediate"  
  90.             });  
  91.         }  
  92.   
  93.         function generateCategoryXChart(chartType) {  
  94.   
  95.             var selector = "#" + chartType;  
  96.             var isColumnChart = chartType.contains("Column");  
  97.   
  98.             $(selector).igDataChart({  
  99.                 dataSource: lastFiveYears,  
  100.                 height: "400px",  
  101.                 width: "400px",  
  102.                 title: "Energy Production Per Country",  
  103.                 subtitle: "The top five Total Primary Energy producers",  
  104.                 axes: [{  
  105.                     name: "Year",  
  106.                     type: "categoryX",  
  107.                     label: "Year",  
  108.                     title: "Year",  
  109.                     gap: 1,  
  110.                 },  
  111.                 {  
  112.                     name: "Volume",  
  113.                     type: "numericY",  
  114.                     title: "Quadrillion Btu"  
  115.                 }],  
  116.                 series: [function () { // a self executing function to create the series initialization object  
  117.                     var seriesObj = {  
  118.                         name: "parent",  
  119.                         xAxis: "Year",  
  120.                         yAxis: "Volume",  
  121.                         type: chartType,  
  122.                         outline: "transparent",  
  123.                         series: [{  
  124.                             name: "China",  
  125.                             title: "China",  
  126.                             type: "stackedFragment",  
  127.                             showTooltip: true,  
  128.                             tooltipTemplate: "China",  
  129.                             valueMemberPath: "China"  
  130.                         }, {  
  131.                             name: "United States",  
  132.                             title: "United States",  
  133.                             type: "stackedFragment",  
  134.                             showTooltip: true,  
  135.                             tooltipTemplate: "United States",  
  136.                             valueMemberPath: "UnitedStates"  
  137.                         }, {  
  138.                             name: "Russia",  
  139.                             title: "Russia",  
  140.                             showTooltip: true,  
  141.                             tooltipTemplate: "Russia",  
  142.                             type: "stackedFragment",  
  143.                             valueMemberPath: "Russia"  
  144.                         }, {  
  145.                             name: "Saudi Arabia",  
  146.                             title: "Saudi Arabia",  
  147.                             showTooltip: true,  
  148.                             tooltipTemplate: "Saudi Arabia",  
  149.                             type: "stackedFragment",  
  150.                             valueMemberPath: "SaudiArabia"  
  151.                         }, {  
  152.                             name: "Canada",  
  153.                             title: "Canada",  
  154.                             showTooltip: true,  
  155.                             tooltipTemplate: "Canada",  
  156.                             type: "stackedFragment",  
  157.                             valueMemberPath: "Canada"  
  158.                         }]  
  159.                     };  
  160.                     if (isColumnChart) { //for column charts set the radius to 0  
  161.                         seriesObj.radius = 0;  
  162.                     }  
  163.                     return seriesObj;  
  164.                 }()],  
  165.                 horizontalZoomable: true,  
  166.                 verticalZoomable: true,  
  167.                 windowResponse: "immediate"  
  168.             });  
  169.         };  
  170.   
  171.         generateCategoryXChart("stackedLine");  
  172.     });  
  173.   
  174. </script>  

Figure 51.

MVC
Figure 32. 

Stacked Spline

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_StackedSpline.cshtml” so add the following HTML in it as shown in Listing 52.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked Spline</h2>  
  4.     <div id="stackedSpline"></div>  
  5. </div>  
  6. <div class="EIAdata-attribution">  
  7.     Energy data from:<br />  
  8.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  9. </div>  
  10.   
  11. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  12.   
  13. <script>  
  14.     /* 
  15. Data from U.S. Energy Information Administration (2012) 
  16. */  
  17.  var lastFiveYears = @Html.Raw(Model.Data);  
  18.   
  19.   
  20.     $(function () {  
  21.         function generateCategoryYChart(chartType) {  
  22.   
  23.             var selector = "#" + chartType;  
  24.             $(selector).igDataChart({  
  25.                 dataSource: lastFiveYears,  
  26.                 height: "400px",  
  27.                 width: "400px",  
  28.                 title: "Energy Production Per Country",  
  29.                 subtitle: "The top five Total Primary Energy producers",  
  30.                 axes: [{  
  31.                     name: "Year",  
  32.                     type: "categoryY",  
  33.                     label: "Year",  
  34.                     title: "Year",  
  35.                     gap: 1,  
  36.                     labelMargin: 0  
  37.                 }, {  
  38.                     name: "Volume",  
  39.                     type: "numericX",  
  40.                     title: "Quadrillion Btu"  
  41.                 }],  
  42.                 series: [{  
  43.                     name: "parent",  
  44.                     type: chartType,  
  45.                     xAxis: "Volume",  
  46.                     yAxis: "Year",  
  47.                     outline: "transparent",  
  48.                     radius: 0,  
  49.                     series: [{  
  50.                         name: "China",  
  51.                         title: "China",  
  52.                         type: "stackedFragment",  
  53.                         showTooltip: true,  
  54.                         tooltipTemplate: "China",  
  55.                         valueMemberPath: "China"  
  56.                     }, {  
  57.                         name: "United States",  
  58.                         title: "United States",  
  59.                         type: "stackedFragment",  
  60.                         showTooltip: true,  
  61.                         tooltipTemplate: "United States",  
  62.                         valueMemberPath: "UnitedStates"  
  63.                     }, {  
  64.                         name: "Russia",  
  65.                         title: "Russia",  
  66.                         showTooltip: true,  
  67.                         tooltipTemplate: "Russia",  
  68.                         type: "stackedFragment",  
  69.                         valueMemberPath: "Russia"  
  70.                     }, {  
  71.                         name: "Saudi Arabia",  
  72.                         title: "Saudi Arabia",  
  73.                         showTooltip: true,  
  74.                         tooltipTemplate: "Saudi Arabia",  
  75.                         type: "stackedFragment",  
  76.                         valueMemberPath: "SaudiArabia"  
  77.                     }, {  
  78.                         name: "Canada",  
  79.                         title: "Canada",  
  80.                         showTooltip: true,  
  81.                         tooltipTemplate: "Canada",  
  82.                         type: "stackedFragment",  
  83.                         valueMemberPath: "Canada"  
  84.                     }]  
  85.                 }],  
  86.                 horizontalZoomable: true,  
  87.                 verticalZoomable: true,  
  88.                 windowResponse: "immediate"  
  89.             });  
  90.         }  
  91.   
  92.         function generateCategoryXChart(chartType) {  
  93.   
  94.             var selector = "#" + chartType;  
  95.             var isColumnChart = chartType.contains("Column");  
  96.   
  97.             $(selector).igDataChart({  
  98.                 dataSource: lastFiveYears,  
  99.                 height: "400px",  
  100.                 width: "400px",  
  101.                 title: "Energy Production Per Country",  
  102.                 subtitle: "The top five Total Primary Energy producers",  
  103.                 axes: [{  
  104.                     name: "Year",  
  105.                     type: "categoryX",  
  106.                     label: "Year",  
  107.                     title: "Year",  
  108.                     gap: 1,  
  109.                 },  
  110.                 {  
  111.                     name: "Volume",  
  112.                     type: "numericY",  
  113.                     title: "Quadrillion Btu"  
  114.                 }],  
  115.                 series: [function () { // a self executing function to create the series initialization object  
  116.                     var seriesObj = {  
  117.                         name: "parent",  
  118.                         xAxis: "Year",  
  119.                         yAxis: "Volume",  
  120.                         type: chartType,  
  121.                         outline: "transparent",  
  122.                         series: [{  
  123.                             name: "China",  
  124.                             title: "China",  
  125.                             type: "stackedFragment",  
  126.                             showTooltip: true,  
  127.                             tooltipTemplate: "China",  
  128.                             valueMemberPath: "China"  
  129.                         }, {  
  130.                             name: "United States",  
  131.                             title: "United States",  
  132.                             type: "stackedFragment",  
  133.                             showTooltip: true,  
  134.                             tooltipTemplate: "United States",  
  135.                             valueMemberPath: "UnitedStates"  
  136.                         }, {  
  137.                             name: "Russia",  
  138.                             title: "Russia",  
  139.                             showTooltip: true,  
  140.                             tooltipTemplate: "Russia",  
  141.                             type: "stackedFragment",  
  142.                             valueMemberPath: "Russia"  
  143.                         }, {  
  144.                             name: "Saudi Arabia",  
  145.                             title: "Saudi Arabia",  
  146.                             showTooltip: true,  
  147.                             tooltipTemplate: "Saudi Arabia",  
  148.                             type: "stackedFragment",  
  149.                             valueMemberPath: "SaudiArabia"  
  150.                         }, {  
  151.                             name: "Canada",  
  152.                             title: "Canada",  
  153.                             showTooltip: true,  
  154.                             tooltipTemplate: "Canada",  
  155.                             type: "stackedFragment",  
  156.                             valueMemberPath: "Canada"  
  157.                         }]  
  158.                     };  
  159.                     if (isColumnChart) { //for column charts set the radius to 0  
  160.                         seriesObj.radius = 0;  
  161.                     }  
  162.                     return seriesObj;  
  163.                 }()],  
  164.                 horizontalZoomable: true,  
  165.                 verticalZoomable: true,  
  166.                 windowResponse: "immediate"  
  167.             });  
  168.         };  
  169.   
  170.         generateCategoryXChart("stackedSpline");  
  171.     });  
  172.   
  173. </script>  

Listing 52.

MVC
Figure 33.

Stacked Spline Area

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_StackedSplineArea.cshtml” so add the following HTML in it as shown in Listing 53. 

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked Spline Area</h2>  
  4.     <div id="stackedSplineArea"></div>  
  5. </div>  
  6.   
  7. <div class="EIAdata-attribution">  
  8.     Energy data from:<br />  
  9.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  10. </div>  
  11.   
  12. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  13.   
  14. <script>  
  15.     /* 
  16. Data from U.S. Energy Information Administration (2012) 
  17. */  
  18.   
  19.  var lastFiveYears = @Html.Raw(Model.Data);  
  20.     $(function () {  
  21.         function generateCategoryYChart(chartType) {  
  22.   
  23.             var selector = "#" + chartType;  
  24.             $(selector).igDataChart({  
  25.                 dataSource: lastFiveYears,  
  26.                 height: "400px",  
  27.                 width: "400px",  
  28.                 title: "Energy Production Per Country",  
  29.                 subtitle: "The top five Total Primary Energy producers",  
  30.                 axes: [{  
  31.                     name: "Year",  
  32.                     type: "categoryY",  
  33.                     label: "Year",  
  34.                     title: "Year",  
  35.                     gap: 1,  
  36.                     labelMargin: 0  
  37.                 }, {  
  38.                     name: "Volume",  
  39.                     type: "numericX",  
  40.                     title: "Quadrillion Btu"  
  41.                 }],  
  42.                 series: [{  
  43.                     name: "parent",  
  44.                     type: chartType,  
  45.                     xAxis: "Volume",  
  46.                     yAxis: "Year",  
  47.                     outline: "transparent",  
  48.                     radius: 0,  
  49.                     series: [{  
  50.                         name: "China",  
  51.                         title: "China",  
  52.                         type: "stackedFragment",  
  53.                         showTooltip: true,  
  54.                         tooltipTemplate: "China",  
  55.                         valueMemberPath: "China"  
  56.                     }, {  
  57.                         name: "United States",  
  58.                         title: "United States",  
  59.                         type: "stackedFragment",  
  60.                         showTooltip: true,  
  61.                         tooltipTemplate: "United States",  
  62.                         valueMemberPath: "UnitedStates"  
  63.                     }, {  
  64.                         name: "Russia",  
  65.                         title: "Russia",  
  66.                         showTooltip: true,  
  67.                         tooltipTemplate: "Russia",  
  68.                         type: "stackedFragment",  
  69.                         valueMemberPath: "Russia"  
  70.                     }, {  
  71.                         name: "Saudi Arabia",  
  72.                         title: "Saudi Arabia",  
  73.                         showTooltip: true,  
  74.                         tooltipTemplate: "Saudi Arabia",  
  75.                         type: "stackedFragment",  
  76.                         valueMemberPath: "SaudiArabia"  
  77.                     }, {  
  78.                         name: "Canada",  
  79.                         title: "Canada",  
  80.                         showTooltip: true,  
  81.                         tooltipTemplate: "Canada",  
  82.                         type: "stackedFragment",  
  83.                         valueMemberPath: "Canada"  
  84.                     }]  
  85.                 }],  
  86.                 horizontalZoomable: true,  
  87.                 verticalZoomable: true,  
  88.                 windowResponse: "immediate"  
  89.             });  
  90.         }  
  91.   
  92.         function generateCategoryXChart(chartType) {  
  93.   
  94.             var selector = "#" + chartType;  
  95.             var isColumnChart = chartType.contains("Column");  
  96.   
  97.             $(selector).igDataChart({  
  98.                 dataSource: lastFiveYears,  
  99.                 height: "400px",  
  100.                 width: "400px",  
  101.                 title: "Energy Production Per Country",  
  102.                 subtitle: "The top five Total Primary Energy producers",  
  103.                 axes: [{  
  104.                     name: "Year",  
  105.                     type: "categoryX",  
  106.                     label: "Year",  
  107.                     title: "Year",  
  108.                     gap: 1,  
  109.                 },  
  110.                 {  
  111.                     name: "Volume",  
  112.                     type: "numericY",  
  113.                     title: "Quadrillion Btu"  
  114.                 }],  
  115.                 series: [function () { // a self executing function to create the series initialization object  
  116.                     var seriesObj = {  
  117.                         name: "parent",  
  118.                         xAxis: "Year",  
  119.                         yAxis: "Volume",  
  120.                         type: chartType,  
  121.                         outline: "transparent",  
  122.                         series: [{  
  123.                             name: "China",  
  124.                             title: "China",  
  125.                             type: "stackedFragment",  
  126.                             showTooltip: true,  
  127.                             tooltipTemplate: "China",  
  128.                             valueMemberPath: "China"  
  129.                         }, {  
  130.                             name: "United States",  
  131.                             title: "United States",  
  132.                             type: "stackedFragment",  
  133.                             showTooltip: true,  
  134.                             tooltipTemplate: "United States",  
  135.                             valueMemberPath: "UnitedStates"  
  136.                         }, {  
  137.                             name: "Russia",  
  138.                             title: "Russia",  
  139.                             showTooltip: true,  
  140.                             tooltipTemplate: "Russia",  
  141.                             type: "stackedFragment",  
  142.                             valueMemberPath: "Russia"  
  143.                         }, {  
  144.                             name: "Saudi Arabia",  
  145.                             title: "Saudi Arabia",  
  146.                             showTooltip: true,  
  147.                             tooltipTemplate: "Saudi Arabia",  
  148.                             type: "stackedFragment",  
  149.                             valueMemberPath: "SaudiArabia"  
  150.                         }, {  
  151.                             name: "Canada",  
  152.                             title: "Canada",  
  153.                             showTooltip: true,  
  154.                             tooltipTemplate: "Canada",  
  155.                             type: "stackedFragment",  
  156.                             valueMemberPath: "Canada"  
  157.                         }]  
  158.                     };  
  159.                     if (isColumnChart) { //for column charts set the radius to 0  
  160.                         seriesObj.radius = 0;  
  161.                     }  
  162.                     return seriesObj;  
  163.                 }()],  
  164.                 horizontalZoomable: true,  
  165.                 verticalZoomable: true,  
  166.                 windowResponse: "immediate"  
  167.             });  
  168.         };  
  169.   
  170.         generateCategoryXChart("stackedSplineArea");  
  171.     });  
  172.   
  173. </script>  

Listing 53.

MVC
Figure 34.

100% Stacked Area

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_100StackedArea.cshtml” so add the following HTML in it as shown in Listing 54.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked 100 Area</h2>  
  4.     <div id="stacked100Area"></div>  
  5. </div>  
  6. <div class="EIAdata-attribution">  
  7.     Energy data from:<br />  
  8.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  9. </div>  
  10. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  11. <script>  
  12.     /* 
  13.         Data from U.S. Energy Information Administration (2012) 
  14.     */  
  15.     var lastFiveYears = @Html.Raw(Model.Data);  
  16.     $(function () {  
  17.         function generateCategoryYChart(chartType) {  
  18.   
  19.             var selector = "#" + chartType;  
  20.             $(selector).igDataChart({  
  21.                 dataSource: lastFiveYears,  
  22.                 height: "400px",  
  23.                 width: "400px",  
  24.                 title: "Energy Production Per Country",  
  25.                 subtitle: "The top five Total Primary Energy producers",  
  26.                 axes: [{  
  27.                     name: "Year",  
  28.                     type: "categoryY",  
  29.                     label: "Year",  
  30.                     title: "Year",  
  31.                     gap: 1,  
  32.                     labelMargin: 0  
  33.                 }, {  
  34.                     name: "Volume",  
  35.                     type: "numericX",  
  36.                     title: "Quadrillion Btu"  
  37.                 }],  
  38.                 series: [{  
  39.                     name: "parent",  
  40.                     type: chartType,  
  41.                     xAxis: "Volume",  
  42.                     yAxis: "Year",  
  43.                     outline: "transparent",  
  44.                     radius: 0,  
  45.                     series: [{  
  46.                         name: "China",  
  47.                         title: "China",  
  48.                         type: "stackedFragment",  
  49.                         showTooltip: true,  
  50.                         tooltipTemplate: "China",  
  51.                         valueMemberPath: "China"  
  52.                     }, {  
  53.                         name: "United States",  
  54.                         title: "United States",  
  55.                         type: "stackedFragment",  
  56.                         showTooltip: true,  
  57.                         tooltipTemplate: "United States",  
  58.                         valueMemberPath: "UnitedStates"  
  59.                     }, {  
  60.                         name: "Russia",  
  61.                         title: "Russia",  
  62.                         showTooltip: true,  
  63.                         tooltipTemplate: "Russia",  
  64.                         type: "stackedFragment",  
  65.                         valueMemberPath: "Russia"  
  66.                     }, {  
  67.                         name: "Saudi Arabia",  
  68.                         title: "Saudi Arabia",  
  69.                         showTooltip: true,  
  70.                         tooltipTemplate: "Saudi Arabia",  
  71.                         type: "stackedFragment",  
  72.                         valueMemberPath: "SaudiArabia"  
  73.                     }, {  
  74.                         name: "Canada",  
  75.                         title: "Canada",  
  76.                         showTooltip: true,  
  77.                         tooltipTemplate: "Canada",  
  78.                         type: "stackedFragment",  
  79.                         valueMemberPath: "Canada"  
  80.                     }]  
  81.                 }],  
  82.                 horizontalZoomable: true,  
  83.                 verticalZoomable: true,  
  84.                 windowResponse: "immediate"  
  85.             });  
  86.         }  
  87.   
  88.         function generateCategoryXChart(chartType) {  
  89.   
  90.             var selector = "#" + chartType;  
  91.             var isColumnChart = chartType.contains("Column");  
  92.   
  93.             $(selector).igDataChart({  
  94.                 dataSource: lastFiveYears,  
  95.                 height: "400px",  
  96.                 width: "400px",  
  97.                 title: "Energy Production Per Country",  
  98.                 subtitle: "The top five Total Primary Energy producers",  
  99.                 axes: [{  
  100.                     name: "Year",  
  101.                     type: "categoryX",  
  102.                     label: "Year",  
  103.                     title: "Year",  
  104.                     gap: 1,  
  105.                 },  
  106.                 {  
  107.                     name: "Volume",  
  108.                     type: "numericY",  
  109.                     title: "Quadrillion Btu"  
  110.                 }],  
  111.                 series: [function () { // a self executing function to create the series initialization object  
  112.                     var seriesObj = {  
  113.                         name: "parent",  
  114.                         xAxis: "Year",  
  115.                         yAxis: "Volume",  
  116.                         type: chartType,  
  117.                         outline: "transparent",  
  118.                         series: [{  
  119.                             name: "China",  
  120.                             title: "China",  
  121.                             type: "stackedFragment",  
  122.                             showTooltip: true,  
  123.                             tooltipTemplate: "China",  
  124.                             valueMemberPath: "China"  
  125.                         }, {  
  126.                             name: "United States",  
  127.                             title: "United States",  
  128.                             type: "stackedFragment",  
  129.                             showTooltip: true,  
  130.                             tooltipTemplate: "United States",  
  131.                             valueMemberPath: "UnitedStates"  
  132.                         }, {  
  133.                             name: "Russia",  
  134.                             title: "Russia",  
  135.                             showTooltip: true,  
  136.                             tooltipTemplate: "Russia",  
  137.                             type: "stackedFragment",  
  138.                             valueMemberPath: "Russia"  
  139.                         }, {  
  140.                             name: "Saudi Arabia",  
  141.                             title: "Saudi Arabia",  
  142.                             showTooltip: true,  
  143.                             tooltipTemplate: "Saudi Arabia",  
  144.                             type: "stackedFragment",  
  145.                             valueMemberPath: "SaudiArabia"  
  146.                         }, {  
  147.                             name: "Canada",  
  148.                             title: "Canada",  
  149.                             showTooltip: true,  
  150.                             tooltipTemplate: "Canada",  
  151.                             type: "stackedFragment",  
  152.                             valueMemberPath: "Canada"  
  153.                         }]  
  154.                     };  
  155.                     if (isColumnChart) { //for column charts set the radius to 0  
  156.                         seriesObj.radius = 0;  
  157.                     }  
  158.                     return seriesObj;  
  159.                 }()],  
  160.                 horizontalZoomable: true,  
  161.                 verticalZoomable: true,  
  162.                 windowResponse: "immediate"  
  163.             });  
  164.         };  
  165.   
  166.         generateCategoryXChart("stacked100Area");  
  167.     });  
  168.   
  169. </script>  

Listing 54.

MVC
Figure 35. 

100% Stacked Bar

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_100StackedBar.cshtml” so add the following HTML in it as shown in Listing 55. 

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked 100 Bar</h2>  
  4.     <div id="stacked100Bar"></div>  
  5. </div>  
  6.   
  7. <div class="EIAdata-attribution">  
  8.     Energy data from:<br />  
  9.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  10. </div>  
  11.   
  12. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  13.   
  14. <script>  
  15. /* 
  16. Data from U.S. Energy Information Administration (2012) 
  17. */  
  18.      var lastFiveYears = @Html.Raw(Model.Data);  
  19.   
  20.   
  21.     $(function () {  
  22.         function generateCategoryYChart(chartType) {  
  23.   
  24.             var selector = "#" + chartType;  
  25.             $(selector).igDataChart({  
  26.                 dataSource: lastFiveYears,  
  27.                 height: "400px",  
  28.                 width: "400px",  
  29.                 title: "Energy Production Per Country",  
  30.                 subtitle: "The top five Total Primary Energy producers",  
  31.                 axes: [{  
  32.                     name: "Year",  
  33.                     type: "categoryY",  
  34.                     label: "Year",  
  35.                     title: "Year",  
  36.                     gap: 1,  
  37.                     labelMargin: 0  
  38.                 }, {  
  39.                     name: "Volume",  
  40.                     type: "numericX",  
  41.                     title: "Quadrillion Btu"  
  42.                 }],  
  43.                 series: [{  
  44.                     name: "parent",  
  45.                     type: chartType,  
  46.                     xAxis: "Volume",  
  47.                     yAxis: "Year",  
  48.                     outline: "transparent",  
  49.                     radius: 0,  
  50.                     series: [{  
  51.                         name: "China",  
  52.                         title: "China",  
  53.                         type: "stackedFragment",  
  54.                         showTooltip: true,  
  55.                         tooltipTemplate: "China",  
  56.                         valueMemberPath: "China"  
  57.                     }, {  
  58.                         name: "United States",  
  59.                         title: "United States",  
  60.                         type: "stackedFragment",  
  61.                         showTooltip: true,  
  62.                         tooltipTemplate: "United States",  
  63.                         valueMemberPath: "UnitedStates"  
  64.                     }, {  
  65.                         name: "Russia",  
  66.                         title: "Russia",  
  67.                         showTooltip: true,  
  68.                         tooltipTemplate: "Russia",  
  69.                         type: "stackedFragment",  
  70.                         valueMemberPath: "Russia"  
  71.                     }, {  
  72.                         name: "Saudi Arabia",  
  73.                         title: "Saudi Arabia",  
  74.                         showTooltip: true,  
  75.                         tooltipTemplate: "Saudi Arabia",  
  76.                         type: "stackedFragment",  
  77.                         valueMemberPath: "SaudiArabia"  
  78.                     }, {  
  79.                         name: "Canada",  
  80.                         title: "Canada",  
  81.                         showTooltip: true,  
  82.                         tooltipTemplate: "Canada",  
  83.                         type: "stackedFragment",  
  84.                         valueMemberPath: "Canada"  
  85.                     }]  
  86.                 }],  
  87.                 horizontalZoomable: true,  
  88.                 verticalZoomable: true,  
  89.                 windowResponse: "immediate"  
  90.             });  
  91.         }  
  92.   
  93.         function generateCategoryXChart(chartType) {  
  94.   
  95.             var selector = "#" + chartType;  
  96.             var isColumnChart = chartType.contains("Column");  
  97.   
  98.             $(selector).igDataChart({  
  99.                 dataSource: lastFiveYears,  
  100.                 height: "400px",  
  101.                 width: "400px",  
  102.                 title: "Energy Production Per Country",  
  103.                 subtitle: "The top five Total Primary Energy producers",  
  104.                 axes: [{  
  105.                     name: "Year",  
  106.                     type: "categoryX",  
  107.                     label: "Year",  
  108.                     title: "Year",  
  109.                     gap: 1,  
  110.                 },  
  111.                 {  
  112.                     name: "Volume",  
  113.                     type: "numericY",  
  114.                     title: "Quadrillion Btu"  
  115.                 }],  
  116.                 series: [function () { // a self executing function to create the series initialization object  
  117.                     var seriesObj = {  
  118.                         name: "parent",  
  119.                         xAxis: "Year",  
  120.                         yAxis: "Volume",  
  121.                         type: chartType,  
  122.                         outline: "transparent",  
  123.                         series: [{  
  124.                             name: "China",  
  125.                             title: "China",  
  126.                             type: "stackedFragment",  
  127.                             showTooltip: true,  
  128.                             tooltipTemplate: "China",  
  129.                             valueMemberPath: "China"  
  130.                         }, {  
  131.                             name: "United States",  
  132.                             title: "United States",  
  133.                             type: "stackedFragment",  
  134.                             showTooltip: true,  
  135.                             tooltipTemplate: "United States",  
  136.                             valueMemberPath: "UnitedStates"  
  137.                         }, {  
  138.                             name: "Russia",  
  139.                             title: "Russia",  
  140.                             showTooltip: true,  
  141.                             tooltipTemplate: "Russia",  
  142.                             type: "stackedFragment",  
  143.                             valueMemberPath: "Russia"  
  144.                         }, {  
  145.                             name: "Saudi Arabia",  
  146.                             title: "Saudi Arabia",  
  147.                             showTooltip: true,  
  148.                             tooltipTemplate: "Saudi Arabia",  
  149.                             type: "stackedFragment",  
  150.                             valueMemberPath: "SaudiArabia"  
  151.                         }, {  
  152.                             name: "Canada",  
  153.                             title: "Canada",  
  154.                             showTooltip: true,  
  155.                             tooltipTemplate: "Canada",  
  156.                             type: "stackedFragment",  
  157.                             valueMemberPath: "Canada"  
  158.                         }]  
  159.                     };  
  160.                     if (isColumnChart) { //for column charts set the radius to 0  
  161.                         seriesObj.radius = 0;  
  162.                     }  
  163.                     return seriesObj;  
  164.                 }()],  
  165.                 horizontalZoomable: true,  
  166.                 verticalZoomable: true,  
  167.                 windowResponse: "immediate"  
  168.             });  
  169.         };  
  170.   
  171.         generateCategoryYChart("stacked100Bar");  
  172.     });  
  173.   
  174. </script>  

Listing 55.

MVC
Figure 36. 

100% Stacked Column

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_100StackedColumn.cshtml” so add the following HTML in it as shown in Listing 56. 

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked 100 Column</h2>  
  4.     <div id="stacked100Column"></div>  
  5. </div>  
  6.   
  7. <div class="EIAdata-attribution">  
  8.     Energy data from:<br />  
  9.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  10. </div>  
  11.   
  12. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  13.   
  14. <script>  
  15. /* 
  16. Data from U.S. Energy Information Administration (2012) 
  17. */  
  18.  var lastFiveYears = @Html.Raw(Model.Data);  
  19.   
  20.   
  21.     $(function () {  
  22.         function generateCategoryYChart(chartType) {  
  23.   
  24.             var selector = "#" + chartType;  
  25.             $(selector).igDataChart({  
  26.                 dataSource: lastFiveYears,  
  27.                 height: "400px",  
  28.                 width: "400px",  
  29.                 title: "Energy Production Per Country",  
  30.                 subtitle: "The top five Total Primary Energy producers",  
  31.                 axes: [{  
  32.                     name: "Year",  
  33.                     type: "categoryY",  
  34.                     label: "Year",  
  35.                     title: "Year",  
  36.                     gap: 1,  
  37.                     labelMargin: 0  
  38.                 }, {  
  39.                     name: "Volume",  
  40.                     type: "numericX",  
  41.                     title: "Quadrillion Btu"  
  42.                 }],  
  43.                 series: [{  
  44.                     name: "parent",  
  45.                     type: chartType,  
  46.                     xAxis: "Volume",  
  47.                     yAxis: "Year",  
  48.                     outline: "transparent",  
  49.                     radius: 0,  
  50.                     series: [{  
  51.                         name: "China",  
  52.                         title: "China",  
  53.                         type: "stackedFragment",  
  54.                         showTooltip: true,  
  55.                         tooltipTemplate: "China",  
  56.                         valueMemberPath: "China"  
  57.                     }, {  
  58.                         name: "United States",  
  59.                         title: "United States",  
  60.                         type: "stackedFragment",  
  61.                         showTooltip: true,  
  62.                         tooltipTemplate: "United States",  
  63.                         valueMemberPath: "UnitedStates"  
  64.                     }, {  
  65.                         name: "Russia",  
  66.                         title: "Russia",  
  67.                         showTooltip: true,  
  68.                         tooltipTemplate: "Russia",  
  69.                         type: "stackedFragment",  
  70.                         valueMemberPath: "Russia"  
  71.                     }, {  
  72.                         name: "Saudi Arabia",  
  73.                         title: "Saudi Arabia",  
  74.                         showTooltip: true,  
  75.                         tooltipTemplate: "Saudi Arabia",  
  76.                         type: "stackedFragment",  
  77.                         valueMemberPath: "SaudiArabia"  
  78.                     }, {  
  79.                         name: "Canada",  
  80.                         title: "Canada",  
  81.                         showTooltip: true,  
  82.                         tooltipTemplate: "Canada",  
  83.                         type: "stackedFragment",  
  84.                         valueMemberPath: "Canada"  
  85.                     }]  
  86.                 }],  
  87.                 horizontalZoomable: true,  
  88.                 verticalZoomable: true,  
  89.                 windowResponse: "immediate"  
  90.             });  
  91.         }  
  92.   
  93.         function generateCategoryXChart(chartType) {  
  94.   
  95.             var selector = "#" + chartType;  
  96.             var isColumnChart = chartType.contains("Column");  
  97.   
  98.             $(selector).igDataChart({  
  99.                 dataSource: lastFiveYears,  
  100.                 height: "400px",  
  101.                 width: "400px",  
  102.                 title: "Energy Production Per Country",  
  103.                 subtitle: "The top five Total Primary Energy producers",  
  104.                 axes: [{  
  105.                     name: "Year",  
  106.                     type: "categoryX",  
  107.                     label: "Year",  
  108.                     title: "Year",  
  109.                     gap: 1,  
  110.                 },  
  111.                 {  
  112.                     name: "Volume",  
  113.                     type: "numericY",  
  114.                     title: "Quadrillion Btu"  
  115.                 }],  
  116.                 series: [function () { // a self executing function to create the series initialization object  
  117.                     var seriesObj = {  
  118.                         name: "parent",  
  119.                         xAxis: "Year",  
  120.                         yAxis: "Volume",  
  121.                         type: chartType,  
  122.                         outline: "transparent",  
  123.                         series: [{  
  124.                             name: "China",  
  125.                             title: "China",  
  126.                             type: "stackedFragment",  
  127.                             showTooltip: true,  
  128.                             tooltipTemplate: "China",  
  129.                             valueMemberPath: "China"  
  130.                         }, {  
  131.                             name: "United States",  
  132.                             title: "United States",  
  133.                             type: "stackedFragment",  
  134.                             showTooltip: true,  
  135.                             tooltipTemplate: "United States",  
  136.                             valueMemberPath: "UnitedStates"  
  137.                         }, {  
  138.                             name: "Russia",  
  139.                             title: "Russia",  
  140.                             showTooltip: true,  
  141.                             tooltipTemplate: "Russia",  
  142.                             type: "stackedFragment",  
  143.                             valueMemberPath: "Russia"  
  144.                         }, {  
  145.                             name: "Saudi Arabia",  
  146.                             title: "Saudi Arabia",  
  147.                             showTooltip: true,  
  148.                             tooltipTemplate: "Saudi Arabia",  
  149.                             type: "stackedFragment",  
  150.                             valueMemberPath: "SaudiArabia"  
  151.                         }, {  
  152.                             name: "Canada",  
  153.                             title: "Canada",  
  154.                             showTooltip: true,  
  155.                             tooltipTemplate: "Canada",  
  156.                             type: "stackedFragment",  
  157.                             valueMemberPath: "Canada"  
  158.                         }]  
  159.                     };  
  160.                     if (isColumnChart) { //for column charts set the radius to 0  
  161.                         seriesObj.radius = 0;  
  162.                     }  
  163.                     return seriesObj;  
  164.                 }()],  
  165.                 horizontalZoomable: true,  
  166.                 verticalZoomable: true,  
  167.                 windowResponse: "immediate"  
  168.             });  
  169.         };  
  170.   
  171.         generateCategoryXChart("stacked100Column");  
  172.     });  
  173. </script>  

Listing 56.

MVC
Figure 37.

100% Stacked Line

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_100StackedLine.cshtml” so add the following HTML in it as shown in Listing 57.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked 100 Line</h2>  
  4.     <div id="stacked100Line"></div>  
  5. </div>  
  6.   
  7. <div class="EIAdata-attribution">  
  8.     Energy data from:<br />  
  9.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  10. </div>  
  11.   
  12. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  13.   
  14. <script>  
  15.     /* 
  16. Data from U.S. Energy Information Administration (2012) 
  17. */  
  18.  var lastFiveYears = @Html.Raw(Model.Data);  
  19.   
  20.     $(function () {  
  21.         function generateCategoryYChart(chartType) {  
  22.   
  23.             var selector = "#" + chartType;  
  24.             $(selector).igDataChart({  
  25.                 dataSource: lastFiveYears,  
  26.                 height: "400px",  
  27.                 width: "400px",  
  28.                 title: "Energy Production Per Country",  
  29.                 subtitle: "The top five Total Primary Energy producers",  
  30.                 axes: [{  
  31.                     name: "Year",  
  32.                     type: "categoryY",  
  33.                     label: "Year",  
  34.                     title: "Year",  
  35.                     gap: 1,  
  36.                     labelMargin: 0  
  37.                 }, {  
  38.                     name: "Volume",  
  39.                     type: "numericX",  
  40.                     title: "Quadrillion Btu"  
  41.                 }],  
  42.                 series: [{  
  43.                     name: "parent",  
  44.                     type: chartType,  
  45.                     xAxis: "Volume",  
  46.                     yAxis: "Year",  
  47.                     outline: "transparent",  
  48.                     radius: 0,  
  49.                     series: [{  
  50.                         name: "China",  
  51.                         title: "China",  
  52.                         type: "stackedFragment",  
  53.                         showTooltip: true,  
  54.                         tooltipTemplate: "China",  
  55.                         valueMemberPath: "China"  
  56.                     }, {  
  57.                         name: "United States",  
  58.                         title: "United States",  
  59.                         type: "stackedFragment",  
  60.                         showTooltip: true,  
  61.                         tooltipTemplate: "United States",  
  62.                         valueMemberPath: "UnitedStates"  
  63.                     }, {  
  64.                         name: "Russia",  
  65.                         title: "Russia",  
  66.                         showTooltip: true,  
  67.                         tooltipTemplate: "Russia",  
  68.                         type: "stackedFragment",  
  69.                         valueMemberPath: "Russia"  
  70.                     }, {  
  71.                         name: "Saudi Arabia",  
  72.                         title: "Saudi Arabia",  
  73.                         showTooltip: true,  
  74.                         tooltipTemplate: "Saudi Arabia",  
  75.                         type: "stackedFragment",  
  76.                         valueMemberPath: "SaudiArabia"  
  77.                     }, {  
  78.                         name: "Canada",  
  79.                         title: "Canada",  
  80.                         showTooltip: true,  
  81.                         tooltipTemplate: "Canada",  
  82.                         type: "stackedFragment",  
  83.                         valueMemberPath: "Canada"  
  84.                     }]  
  85.                 }],  
  86.                 horizontalZoomable: true,  
  87.                 verticalZoomable: true,  
  88.                 windowResponse: "immediate"  
  89.             });  
  90.         }  
  91.   
  92.         function generateCategoryXChart(chartType) {  
  93.   
  94.             var selector = "#" + chartType;  
  95.             var isColumnChart = chartType.contains("Column");  
  96.   
  97.             $(selector).igDataChart({  
  98.                 dataSource: lastFiveYears,  
  99.                 height: "400px",  
  100.                 width: "400px",  
  101.                 title: "Energy Production Per Country",  
  102.                 subtitle: "The top five Total Primary Energy producers",  
  103.                 axes: [{  
  104.                     name: "Year",  
  105.                     type: "categoryX",  
  106.                     label: "Year",  
  107.                     title: "Year",  
  108.                     gap: 1,  
  109.                 },  
  110.                 {  
  111.                     name: "Volume",  
  112.                     type: "numericY",  
  113.                     title: "Quadrillion Btu"  
  114.                 }],  
  115.                 series: [function () { // a self executing function to create the series initialization object  
  116.                     var seriesObj = {  
  117.                         name: "parent",  
  118.                         xAxis: "Year",  
  119.                         yAxis: "Volume",  
  120.                         type: chartType,  
  121.                         outline: "transparent",  
  122.                         series: [{  
  123.                             name: "China",  
  124.                             title: "China",  
  125.                             type: "stackedFragment",  
  126.                             showTooltip: true,  
  127.                             tooltipTemplate: "China",  
  128.                             valueMemberPath: "China"  
  129.                         }, {  
  130.                             name: "United States",  
  131.                             title: "United States",  
  132.                             type: "stackedFragment",  
  133.                             showTooltip: true,  
  134.                             tooltipTemplate: "United States",  
  135.                             valueMemberPath: "UnitedStates"  
  136.                         }, {  
  137.                             name: "Russia",  
  138.                             title: "Russia",  
  139.                             showTooltip: true,  
  140.                             tooltipTemplate: "Russia",  
  141.                             type: "stackedFragment",  
  142.                             valueMemberPath: "Russia"  
  143.                         }, {  
  144.                             name: "Saudi Arabia",  
  145.                             title: "Saudi Arabia",  
  146.                             showTooltip: true,  
  147.                             tooltipTemplate: "Saudi Arabia",  
  148.                             type: "stackedFragment",  
  149.                             valueMemberPath: "SaudiArabia"  
  150.                         }, {  
  151.                             name: "Canada",  
  152.                             title: "Canada",  
  153.                             showTooltip: true,  
  154.                             tooltipTemplate: "Canada",  
  155.                             type: "stackedFragment",  
  156.                             valueMemberPath: "Canada"  
  157.                         }]  
  158.                     };  
  159.                     if (isColumnChart) { //for column charts set the radius to 0  
  160.                         seriesObj.radius = 0;  
  161.                     }  
  162.                     return seriesObj;  
  163.                 }()],  
  164.                 horizontalZoomable: true,  
  165.                 verticalZoomable: true,  
  166.                 windowResponse: "immediate"  
  167.             });  
  168.         };  
  169.   
  170.         generateCategoryXChart("stacked100Line");  
  171.     });  
  172.   
  173. </script>  

Listing 57.

MVC
Figure 38. 

100% Stacked Spline

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_100StackedSpline.cshtml” so add the following HTML in it as shown in Listing 58. 

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked 100 Spline</h2>  
  4.     <div id="stacked100Spline"></div>  
  5. </div>  
  6. <div class="EIAdata-attribution">  
  7.     Energy data from:<br />  
  8.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  9. </div>  
  10. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  11. <script>  
  12. /* 
  13. Data from U.S. Energy Information Administration (2012) 
  14. */  
  15.  var lastFiveYears = @Html.Raw(Model.Data);  
  16.   
  17.   
  18.     $(function () {  
  19.         function generateCategoryYChart(chartType) {  
  20.   
  21.             var selector = "#" + chartType;  
  22.             $(selector).igDataChart({  
  23.                 dataSource: lastFiveYears,  
  24.                 height: "400px",  
  25.                 width: "400px",  
  26.                 title: "Energy Production Per Country",  
  27.                 subtitle: "The top five Total Primary Energy producers",  
  28.                 axes: [{  
  29.                     name: "Year",  
  30.                     type: "categoryY",  
  31.                     label: "Year",  
  32.                     title: "Year",  
  33.                     gap: 1,  
  34.                     labelMargin: 0  
  35.                 }, {  
  36.                     name: "Volume",  
  37.                     type: "numericX",  
  38.                     title: "Quadrillion Btu"  
  39.                 }],  
  40.                 series: [{  
  41.                     name: "parent",  
  42.                     type: chartType,  
  43.                     xAxis: "Volume",  
  44.                     yAxis: "Year",  
  45.                     outline: "transparent",  
  46.                     radius: 0,  
  47.                     series: [{  
  48.                         name: "China",  
  49.                         title: "China",  
  50.                         type: "stackedFragment",  
  51.                         showTooltip: true,  
  52.                         tooltipTemplate: "China",  
  53.                         valueMemberPath: "China"  
  54.                     }, {  
  55.                         name: "United States",  
  56.                         title: "United States",  
  57.                         type: "stackedFragment",  
  58.                         showTooltip: true,  
  59.                         tooltipTemplate: "United States",  
  60.                         valueMemberPath: "UnitedStates"  
  61.                     }, {  
  62.                         name: "Russia",  
  63.                         title: "Russia",  
  64.                         showTooltip: true,  
  65.                         tooltipTemplate: "Russia",  
  66.                         type: "stackedFragment",  
  67.                         valueMemberPath: "Russia"  
  68.                     }, {  
  69.                         name: "Saudi Arabia",  
  70.                         title: "Saudi Arabia",  
  71.                         showTooltip: true,  
  72.                         tooltipTemplate: "Saudi Arabia",  
  73.                         type: "stackedFragment",  
  74.                         valueMemberPath: "SaudiArabia"  
  75.                     }, {  
  76.                         name: "Canada",  
  77.                         title: "Canada",  
  78.                         showTooltip: true,  
  79.                         tooltipTemplate: "Canada",  
  80.                         type: "stackedFragment",  
  81.                         valueMemberPath: "Canada"  
  82.                     }]  
  83.                 }],  
  84.                 horizontalZoomable: true,  
  85.                 verticalZoomable: true,  
  86.                 windowResponse: "immediate"  
  87.             });  
  88.         }  
  89.   
  90.         function generateCategoryXChart(chartType) {  
  91.   
  92.             var selector = "#" + chartType;  
  93.             var isColumnChart = chartType.contains("Column");  
  94.   
  95.             $(selector).igDataChart({  
  96.                 dataSource: lastFiveYears,  
  97.                 height: "400px",  
  98.                 width: "400px",  
  99.                 title: "Energy Production Per Country",  
  100.                 subtitle: "The top five Total Primary Energy producers",  
  101.                 axes: [{  
  102.                     name: "Year",  
  103.                     type: "categoryX",  
  104.                     label: "Year",  
  105.                     title: "Year",  
  106.                     gap: 1,  
  107.                 },  
  108.                 {  
  109.                     name: "Volume",  
  110.                     type: "numericY",  
  111.                     title: "Quadrillion Btu"  
  112.                 }],  
  113.                 series: [function () { // a self executing function to create the series initialization object  
  114.                     var seriesObj = {  
  115.                         name: "parent",  
  116.                         xAxis: "Year",  
  117.                         yAxis: "Volume",  
  118.                         type: chartType,  
  119.                         outline: "transparent",  
  120.                         series: [{  
  121.                             name: "China",  
  122.                             title: "China",  
  123.                             type: "stackedFragment",  
  124.                             showTooltip: true,  
  125.                             tooltipTemplate: "China",  
  126.                             valueMemberPath: "China"  
  127.                         }, {  
  128.                             name: "United States",  
  129.                             title: "United States",  
  130.                             type: "stackedFragment",  
  131.                             showTooltip: true,  
  132.                             tooltipTemplate: "United States",  
  133.                             valueMemberPath: "UnitedStates"  
  134.                         }, {  
  135.                             name: "Russia",  
  136.                             title: "Russia",  
  137.                             showTooltip: true,  
  138.                             tooltipTemplate: "Russia",  
  139.                             type: "stackedFragment",  
  140.                             valueMemberPath: "Russia"  
  141.                         }, {  
  142.                             name: "Saudi Arabia",  
  143.                             title: "Saudi Arabia",  
  144.                             showTooltip: true,  
  145.                             tooltipTemplate: "Saudi Arabia",  
  146.                             type: "stackedFragment",  
  147.                             valueMemberPath: "SaudiArabia"  
  148.                         }, {  
  149.                             name: "Canada",  
  150.                             title: "Canada",  
  151.                             showTooltip: true,  
  152.                             tooltipTemplate: "Canada",  
  153.                             type: "stackedFragment",  
  154.                             valueMemberPath: "Canada"  
  155.                         }]  
  156.                     };  
  157.                     if (isColumnChart) { //for column charts set the radius to 0  
  158.                         seriesObj.radius = 0;  
  159.                     }  
  160.                     return seriesObj;  
  161.                 }()],  
  162.                 horizontalZoomable: true,  
  163.                 verticalZoomable: true,  
  164.                 windowResponse: "immediate"  
  165.             });  
  166.         };  
  167.   
  168.         generateCategoryXChart("stacked100Spline");  
  169.     });  
  170.   
  171. </script>  

Listing 58.

MVC
Figure 39. 

100% Stacked Spline Area

To render the bar chart we have added a partial view “~/views/shared/StackedCharts/_100StackedSplineArea.cshtml” so add the following HTML in it as shown in Listing 59.

  1. @model charts_demo_ignite_ui.Models.Chart  
  2. <div class="chart">  
  3.     <h2 align="center">Stacked 100 Spline Area</h2>  
  4.     <div id="stacked100SplineArea"></div>  
  5. </div>  
  6.   
  7. <div class="EIAdata-attribution">  
  8.     Energy data from:<br />  
  9.     <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>  
  10. </div>  
  11.   
  12. <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script>  
  13.   
  14. <script>  
  15.     /* 
  16. Data from U.S. Energy Information Administration (2012) 
  17. */  
  18.  var lastFiveYears = @Html.Raw(Model.Data);  
  19.   
  20.   
  21.     $(function () {  
  22.         function generateCategoryYChart(chartType) {  
  23.   
  24.             var selector = "#" + chartType;  
  25.             $(selector).igDataChart({  
  26.                 dataSource: lastFiveYears,  
  27.                 height: "400px",  
  28.                 width: "400px",  
  29.                 title: "Energy Production Per Country",  
  30.                 subtitle: "The top five Total Primary Energy producers",  
  31.                 axes: [{  
  32.                     name: "Year",  
  33.                     type: "categoryY",  
  34.                     label: "Year",  
  35.                     title: "Year",  
  36.                     gap: 1,  
  37.                     labelMargin: 0  
  38.                 }, {  
  39.                     name: "Volume",  
  40.                     type: "numericX",  
  41.                     title: "Quadrillion Btu"  
  42.                 }],  
  43.                 series: [{  
  44.                     name: "parent",  
  45.                     type: chartType,  
  46.                     xAxis: "Volume",  
  47.                     yAxis: "Year",  
  48.                     outline: "transparent",  
  49.                     radius: 0,  
  50.                     series: [{  
  51.                         name: "China",  
  52.                         title: "China",  
  53.                         type: "stackedFragment",  
  54.                         showTooltip: true,  
  55.                         tooltipTemplate: "China",  
  56.                         valueMemberPath: "China"  
  57.                     }, {  
  58.                         name: "United States",  
  59.                         title: "United States",  
  60.                         type: "stackedFragment",  
  61.                         showTooltip: true,  
  62.                         tooltipTemplate: "United States",  
  63.                         valueMemberPath: "UnitedStates"  
  64.                     }, {  
  65.                         name: "Russia",  
  66.                         title: "Russia",  
  67.                         showTooltip: true,  
  68.                         tooltipTemplate: "Russia",  
  69.                         type: "stackedFragment",  
  70.                         valueMemberPath: "Russia"  
  71.                     }, {  
  72.                         name: "Saudi Arabia",  
  73.                         title: "Saudi Arabia",  
  74.                         showTooltip: true,  
  75.                         tooltipTemplate: "Saudi Arabia",  
  76.                         type: "stackedFragment",  
  77.                         valueMemberPath: "SaudiArabia"  
  78.                     }, {  
  79.                         name: "Canada",  
  80.                         title: "Canada",  
  81.                         showTooltip: true,  
  82.                         tooltipTemplate: "Canada",  
  83.                         type: "stackedFragment",  
  84.                         valueMemberPath: "Canada"  
  85.                     }]  
  86.                 }],  
  87.                 horizontalZoomable: true,  
  88.                 verticalZoomable: true,  
  89.                 windowResponse: "immediate"  
  90.             });  
  91.         }  
  92.   
  93.         function generateCategoryXChart(chartType) {  
  94.   
  95.             var selector = "#" + chartType;  
  96.             var isColumnChart = chartType.contains("Column");  
  97.   
  98.             $(selector).igDataChart({  
  99.                 dataSource: lastFiveYears,  
  100.                 height: "400px",  
  101.                 width: "400px",  
  102.                 title: "Energy Production Per Country",  
  103.                 subtitle: "The top five Total Primary Energy producers",  
  104.                 axes: [{  
  105.                     name: "Year",  
  106.                     type: "categoryX",  
  107.                     label: "Year",  
  108.                     title: "Year",  
  109.                     gap: 1,  
  110.                 },  
  111.                 {  
  112.                     name: "Volume",  
  113.                     type: "numericY",  
  114.                     title: "Quadrillion Btu"  
  115.                 }],  
  116.                 series: [function () { // a self executing function to create the series initialization object  
  117.                     var seriesObj = {  
  118.                         name: "parent",  
  119.                         xAxis: "Year",  
  120.                         yAxis: "Volume",  
  121.                         type: chartType,  
  122.                         outline: "transparent",  
  123.                         series: [{  
  124.                             name: "China",  
  125.                             title: "China",  
  126.                             type: "stackedFragment",  
  127.                             showTooltip: true,  
  128.                             tooltipTemplate: "China",  
  129.                             valueMemberPath: "China"  
  130.                         }, {  
  131.                             name: "United States",  
  132.                             title: "United States",  
  133.                             type: "stackedFragment",  
  134.                             showTooltip: true,  
  135.                             tooltipTemplate: "United States",  
  136.                             valueMemberPath: "UnitedStates"  
  137.                         }, {  
  138.                             name: "Russia",  
  139.                             title: "Russia",  
  140.                             showTooltip: true,  
  141.                             tooltipTemplate: "Russia",  
  142.                             type: "stackedFragment",  
  143.                             valueMemberPath: "Russia"  
  144.                         }, {  
  145.                             name: "Saudi Arabia",  
  146.                             title: "Saudi Arabia",  
  147.                             showTooltip: true,  
  148.                             tooltipTemplate: "Saudi Arabia",  
  149.                             type: "stackedFragment",  
  150.                             valueMemberPath: "SaudiArabia"  
  151.                         }, {  
  152.                             name: "Canada",  
  153.                             title: "Canada",  
  154.                             showTooltip: true,  
  155.                             tooltipTemplate: "Canada",  
  156.                             type: "stackedFragment",  
  157.                             valueMemberPath: "Canada"  
  158.                         }]  
  159.                     };  
  160.                     if (isColumnChart) { //for column charts set the radius to 0  
  161.                         seriesObj.radius = 0;  
  162.                     }  
  163.                     return seriesObj;  
  164.                 }()],  
  165.                 horizontalZoomable: true,  
  166.                 verticalZoomable: true,  
  167.                 windowResponse: "immediate"  
  168.             });  
  169.         };  
  170.   
  171.         generateCategoryXChart("stacked100SplineArea");  
  172.     });  
  173.   
  174. </script> 

Listing 59.

MVC
Figure 40.

To view the demo follow the link http://igniteui.azurewebsites.net/ 

Summary
 
Building chart controls without a third-party charting library could be hectic. In this tutorial, I demonstrated how to build a complete data-presentable MVC web application using Visual Studio 2017, C#, and Ignite UI for JavaScript.
 
Download the code here https://github.com/cknitin/charts-demo-ignite-ui 
 


Similar Articles