Chart (Area Chart) in MVC Razor

This article will show you how you can create an  area chart in mvc razor view engine using c#. In this you can use entity framework. You can use in MVC4, MVC5, MVC6.

So for this article first we will create a new asp.net mvc application and add a model class file into the model folder.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ChartDemoApplication.Models {     public class ChartDataModel     {         public List<ChartData> ChartDataList { get; set; }     }     public class ChartData     {         public string CountryName { get; set; }         public int Population { get; set; }     } }

In above code I have added a model class file. In which I have used two property for displaying label and for providing value.

Now we will add a controller class file and add the below code into it.

using ChartDemoApplication.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace ChartDemoApplication.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             ChartDataModel _ChartDataModel = new ChartDataModel();             _ChartDataModel.ChartDataList = new List<ChartData>();             _ChartDataModel.ChartDataList = ChartDate();             return View(_ChartDataModel);         }         ///         /// You can use your entity to get the data         ///        ///         private List<ChartData> ChartDate()         {             List<ChartData> _ChartDataModel = new List<ChartData>();             _ChartDataModel.Add(new ChartData { CountryName = "India", Population = 90 });             _ChartDataModel.Add(new ChartData { CountryName = "Nepal", Population = 20 });             _ChartDataModel.Add(new ChartData { CountryName = "Sri Lanka", Population = 45 });             _ChartDataModel.Add(new ChartData { CountryName = "Rushia", Population = 60 });             _ChartDataModel.Add(new ChartData { CountryName = "US", Population = 80 });             _ChartDataModel.Add(new ChartData { CountryName = "France", Population = 25 });             return _ChartDataModel;         }     } }

        

In above code I have taken a static data list and then pass it to view. To display the graph. Now we will create the view and add the below code into the view.

@model ChartDemoApplication.Models.ChartDataModel     @{         ViewBag.Title = "Chart (Pie Chart) in MVC 5 Razor ";     }     <h2>Chart in MVC</h2>     @{         var filePathName = "~/_ChartFiles/chart01.jpg";         var displayPath = "_ChartFiles/chart01.jpg";         var myChart = new Chart(width: 500, height: 300)             .AddTitle("Country Population")             .AddSeries("Default", chartType: "Area",                 xValue: Model.ChartDataList, xField: "CountryName",                 yValues: Model.ChartDataList, yFields: "Population");            // .Write();         myChart.Save(path: filePathName);     } <img src="@displayPath" />

Here in this code I have taken the variable mychart by which I am creating the chart and saving into the folder known as  _ChartFiles.

Now we have done run the application to check the output.