Dynamic Google Geo Chart In an Asp.Net MVC Using C# and Javascript

This article will show you how you can create dynamic Google geo chart using javascript in asp.net mvc , c#.net. This article you can use in MVC3,MVC4 and MVC5.

Some of my previous articles are as follows: Point Chart in Asp.Net Using C#.Net and VB.Net, Pie Chart in Asp.Net Using C#.Net and VB.Net, Dynamic Google Scatter Chart In an Asp.Net MVC Using C# and Javascript, Column 3D Chart in Asp.Net Using C#.Net and VB.Net, Point Chart in Asp.Net Using C#.Net and VB.Net.

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

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ChartInMvcApplication.Models {     public class CountryModel     {         public string CountryTitle { get; set; }         public string PopulationTitle { get; set; }         public Country CountrytData { get; set; }     }     public class Country     {         public string CountryName { get; set; }         public string Population { get; set; }     } }

Now we will add a controller file into our controller folder and add the below code into your controller file.

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()         {             CountryModel objProductModel = new CountryModel();             objProductModel.CountrytData = new Country();             objProductModel.CountrytData = GetChartData();             objProductModel.CountryTitle = "Country";             objProductModel.PopulationTitle = "Population";             return View(objProductModel);         }         ///         /// Code to get the data which we will pass to chart        ///         public Country GetChartData()         {             Country objproduct = new Country();             /*Get the data from databse and prepare the chart record data in string form.*/             objproduct.CountryName = "India,America,SriLanka,Rushia,Japan,Pakistan";             objproduct.Population = "125000,30000,4500,80000,16000,90000";             return objproduct;         }     } }

        

In above code for assigning data I have added string value to the country name and the population. Value in population is dummy not real J.

This string values we will we will further used for converting into array collection. Now we will create view and in your view add the below code.

@model ChartInMvcApplication.Models.CountryModel @{     ViewBag.Title = "Dynamic Google Geo 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:["geochart"]});       google.setOnLoadCallback(drawRegionsMap);       function drawRegionsMap() {         // Create and populate the data table.         var country = '@Model.CountrytData.CountryName';         //Pereparing string into array          var countryarray=country.split(',');         var population = [@Model.CountrytData.Population];                var data = new google.visualization.DataTable();         data.addColumn('string', '@Model.CountryTitle');         data.addColumn('number', '@Model.PopulationTitle');         for (i = 0; i < countryarray.length; i++) {             data.addRow([countryarray[i].toString(), population[i]]);         }         var options = {};         var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));         chart.draw(data, options);     } </script> <div id="regions_div" style="width: 500px; height: 300px;"> </div>

Please check the below mention part of the code.

// Create and populate the data table.         var country = '@Model.CountrytData.CountryName';         //Pereparing string into array          var countryarray=country.split(',');         var population = [@Model.CountrytData.Population];                var data = new google.visualization.DataTable();         data.addColumn('string', '@Model.CountryTitle');         data.addColumn('number', '@Model.PopulationTitle');         for (i = 0; i < countryarray.length; i++) {             data.addRow([countryarray[i].toString(), population[i]]);         }

In above code we are preparing array of the string which we have passed in model. In case of string first I have split the country name and then made the data for passing the Google chart api.

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

DOWLOAD