How To Create Dynamic Google Column Chart In an Asp.Net MVC Using C# and Javascript

In this article I will show you how you can create dynamic Google column chart in an asp.net MVC application using c#. In this I will show you how you can pass dynamic data to a google chart and how you can prepare data for google chart in JavaScript. This article you can use in your MVC2, MVC3, MVC4, MVC5 application.

Some of my previous articles are as follows: jQuery UI Datepicker Calender Control In Asp.Net Mvc Application, Display User Detail Using jQuery ToolTip In MVC4 WebGrid, jQuery Validation for Terms and Conditions Checkbox in Asp.Net, Login Form With LightbBox Effect in Asp.Net, Allow Only Alphabets in TextBox Using Javascript in Asp.Net, JavaScript Confirm Message From Code Behind in Asp.Net Using C#, Display Alert Message on Page Load in MVC Application Using Javasscript.

 So for this article first we will create a new mvc application. In this first we will create a new model class.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ChartInMvcApplication.Models {     public class ProductModel     {         public string YearTitle { get; set; }         public string SaleTitle { get; set; }         public string PurchaseTitle { get; set; }         public Product ProductData { get; set; }     }     public class Product     {         public string Year { get; set; }         public string Purchase { get; set; }         public string Sale { get; set; }     } }

Now we will create controller in our application. And add the below code in our controller.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ChartInMvcApplication.Models; namespace ChartInMvcApplication.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             ProductModel objProductModel = new ProductModel();             objProductModel.ProductData = new Product();             objProductModel.ProductData = GetChartData();             objProductModel.YearTitle = "Year";             objProductModel.SaleTitle = "Sale";             objProductModel.PurchaseTitle = "Purchase";             return View(objProductModel);         }         /// <summary>         /// Code to get the data which we will pass to chart         /// </summary>         /// <returns></returns>         public Product GetChartData()         {             Product objproduct = new Product();             /*Get the data from databse and prepare the chart record data in string form.*/             objproduct.Year = "2009,2010,2011,2012,2013,2014";             objproduct.Sale = "2000,1000,3000,1500,2300,500";             objproduct.Purchase = "2100,1400,2900,2400,2300,1500";             return objproduct;         }     } }

Please check the below code which we have used for preparing the data for chart control.

/// <summary>         /// Code to get the data which we will pass to chart         /// </summary>         /// <returns></returns>         public Product GetChartData()         {             Product objproduct = new Product();             /*Get the data from databse and prepare the chart record data in string form.*/             objproduct.Year = "2009,2010,2011,2012,2013,2014";             objproduct.Sale = "2000,1000,3000,1500,2300,500";             objproduct.Purchase = "2100,1400,2900,2400,2300,1500";             return objproduct;         }

For chart we will prepare data in string form. And pass it to view. Now we will prepare view. In our view we will add the below code.

@model ChartInMvcApplication.Models.ProductModel @{     ViewBag.Title = "How To Create Dynamic Google Column Chart In an Asp.Net MVC Using C# and Javascript";    } <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">     google.load("visualization", "1", { packages: ["corechart"] });     google.setOnLoadCallback(drawChart);     function drawChart() {         // Create and populate the data table.         var years = [@Model.ProductData.Year];         var sales = [@Model.ProductData.Sale];         var Purchase = [@Model.ProductData.Purchase];               var data = new google.visualization.DataTable();         data.addColumn('string', '@Model.YearTitle');         data.addColumn('number', '@Model.SaleTitle');         data.addColumn('number', '@Model.PurchaseTitle');         for (i = 0; i < years.length; i++) {             data.addRow([years[i].toString(), sales[i], Purchase[i]]);         }         var options = {             title: 'Sale and Purchase Compare',             hAxis: { title: '@Model.YearTitle', titleTextStyle: { color: 'red'} }         };         var chart = newgoogle.visualization.ColumnChart(document.getElementById('chartdiv'));         chart.draw(data, options);     } </script> <div id="chartdiv" style="width: 500px; height: 300px;"> </div>

In our JavaScript code we will assign the model value to the JavaScript function. Now we have done we will run the page to view output.

 

DOWNLOAD