Contribute
ASP.NET

Google Geo (Geographical) Chart in MVC

Introduction

A Geo Chart is also known as a Geographical Chart because Geo is short for Geographical. The area will be a continent, country, city or region. Using the the Geo Chart we can represent many types of data, like the density of an area, population of an area, the users of a specific language of an area and many more. So the main use of a Geo Chart is to represent an area with its special specification. We can also compare two or more areas of data using Geo Chart. One important property of the Geo Chart that it can never be dragged and dropped from one place to another place in the browser and Geo Chart is never scrollable. There are three types of Geo Charts available.

  • Region Geo Chart
  • Markers Geo Chart
  • Text Geo Chart

Region Geo Chart

In the region Geo Chart we represent the entire country or continent with the specific color that you want. Look at the given example. Just simply open a text file then provide the given code in that file then save it in HTML format and open it a browser.

Example

  1. <html>  
  2.   <head>  
  3.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>  
  4.     <script type="text/javascript">  
  5.       google.load("visualization", "1", {packages:["geochart"]});  
  6.       google.setOnLoadCallback(drawRegionsMap);  
  7.   
  8.       function drawRegionsMap() {  
  9.   
  10.         var data = google.visualization.arrayToDataTable([  
  11.           ['Country', 'Popularity'],  
  12.           ['Germany', 788],  
  13.           ['United States', 3789],  
  14.           ['Brazil', 7860],  
  15.           ['Canada', 77689],  
  16.           ['France', 999],  
  17.           ['RUsia', 5673],  
  18.       ['Pakistan', 1244],  
  19.           ['Newzeland', 700],  
  20.   
  21.         ]);  
  22.   
  23.         var options = {  
  24.             'width': 600,  
  25.             'height':500,  
  26. 'colorAxis':{colors:['red','green']}  
  27.             };  
  28.   
  29.         var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));  
  30.   
  31.         chart.draw(data, options);  
  32.       }  
  33.     </script>  
  34.   </head>  
  35.   <body>  
  36.     <div id="regions_div" style="width: 900px; height: 500px;"></div>  
  37.   </body>  
  38. </html>  



Markers Geo Chart

Since it has the name Markers it shows the marks on the chart for the specific location of area with the dots (.) Those dots are present in the form of circles. Here we make the size and color of the circles as we desire. Look at the given example.

Example
  1. <html>  
  2.   <head>  
  3.     <script type='text/javascript' src='https://www.google.com/jsapi'></script>  
  4.     <script type='text/javascript'>  
  5.      google.load('visualization', '1', {'packages': ['geochart']});  
  6.      google.setOnLoadCallback(drawMarkersMap);  
  7.   
  8.       function drawMarkersMap() {  
  9.      var data = google.visualization.arrayToDataTable([  
  10.         ['City',   'Population', 'Area'],  
  11.         ['Rome',      56767098,      285.31],  
  12.         ['Milan',     1324110,    181.76],  
  13.         ['Naples',    959574,     117.27],  
  14.         ['Turin',     907563,     130.17],  
  15.         ['Palermo',   655875,     158.9],  
  16.         ['Genoa',     607906,     243.60],  
  17.         ['Bologna',   380181,     140.7],  
  18.         ['Florence',  371282,     102.41],  
  19.         ['Fiumicino', 67370,      213.44],  
  20.         ['Anzio',     52192,      43.43],  
  21.         ['Ciampino',  38262,      11]  
  22.           
  23.       ]);  
  24.   
  25.       var options = {  
  26.         region: 'IT',  
  27.         displayMode: 'markers',  
  28.         colorAxis: {colors: ['orange', 'red']}  
  29.       };  
  30.   
  31.       var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));  
  32.       chart.draw(data, options);  
  33.     };  
  34.     </script>  
  35.   </head>  
  36.   <body>  
  37.     <div id="chart_div" style="width: 500px; height: 300px;"></div>  
  38.   </body>  
  39. </html>  


Text Geo Chart

It is the simplest Geo chat in the Text Geo Chart. We show a label text on the specific location. Please go with the given example.

Example

  1. <html>  
  2.   <head>  
  3.     <script type='text/javascript' src='https://www.google.com/jsapi'></script>  
  4.     <script type='text/javascript'>  
  5.      google.load('visualization', '1', {'packages': ['geochart']});  
  6.      google.setOnLoadCallback(drawMarkersMap);  
  7.   
  8.       function drawMarkersMap() {  
  9.      var data = google.visualization.arrayToDataTable([  
  10.         ['City',   'Population', 'Area'],  
  11.         ['Rome',      56767098,      285.31],  
  12.         ['Milan',     1324110,    181.76],  
  13.         ['Naples',    959574,     117.27],  
  14.         ['Turin',     907563,     130.17],  
  15.         ['Palermo',   655875,     158.9],  
  16.         ['Genoa',     607906,     243.60],  
  17.         ['Bologna',   380181,     140.7],  
  18.         ['Florence',  371282,     102.41],  
  19.         ['Fiumicino', 67370,      213.44],  
  20.         ['Anzio',     52192,      43.43],  
  21.         ['Ciampino',  38262,      11]  
  22.           
  23.       ]);  
  24.   
  25.       var options = {  
  26.         region: 'IT',  
  27.         displayMode: 'text',  
  28.         colorAxis: {colors: ['orange', 'red']}  
  29.       };  
  30.   
  31.       var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));  
  32.       chart.draw(data, options);  
  33.     };  
  34.     </script>  
  35.   </head>  
  36.   <body>  
  37.     <div id="chart_div" style="width: 500px; height: 300px;"></div>  
  38.   </body>  
  39. </html>  


In the preceding examples I show you what Geo Chart is, what its types are and how it represents the data for any specific location. So as I said above there are mainly three types of geographical charts, they are used depending on the situation and depending on requirements.

Dynamic Geo Chart

Now I will show how to create a dynamic Geo Chart using MVC and JavaScript and C# programming. Here I discuss it step-by-step. Just follow the given procedure, I hope you can easily make a geographical chart in the ASP.NET with MVC and use JavaScript and C# programming.

Step 1

Open your Visual Studio and go to "File" -> "New" -> "Project..." then select ASP.NET Web Application.



Step 2

Now select the MVC application from the template field.



Step 3

After selecting the MVC template field you have a project as shown in the Solution Explorer. Now in the Solution Explorer go to the Models, right-click on it, go to add, and add a new class. Here I added the class and named it CountryModel. Then add the given code to your class file.






Code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace geographical.Models  
  7. {  
  8.     public class CountryModel  
  9.     {  
  10.         public string CountryTitle { get; set; }  
  11.         public string PopulationTitle { get; set; }  
  12.   
  13.         public Country CountrytData { get; set; }  
  14.     }  
  15.     public class Country  
  16.     {  
  17.         public string CountryName { get; set; }  
  18.         public string Population { get; set; }  
  19.     }  
  20. }  
Step 4

After making the class file we add a controller to the controller folder. To do that go to the Solution Explorer and select the controller folder, right-click on it then go to add and click on controller.




Step 5

Here I use the controller name geochartController. It simply adds a new empty controller. Then add the following code to the Controller file.

Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using geographical.Models;  
  7.   
  8. namespace geographical.Controllers  
  9. {  
  10.     public class geochartController : Controller  
  11.     {  
  12.         // GET: geochart  
  13.         public ActionResult Index()  
  14.         {  
  15.             CountryModel objProductModel = new CountryModel();  
  16.             objProductModel.CountrytData = new Country();  
  17.             objProductModel.CountrytData = GetChartData();  
  18.             objProductModel.CountryTitle = "Country";  
  19.             objProductModel.PopulationTitle = "Population";  
  20.   
  21.             return View(objProductModel);  
  22.         }  
  23.   
  24.         public Country GetChartData()  
  25.         {  
  26.             Country objproduct = new Country();  
  27.             /*Get the data from databse and prepare the chart record data in string form.*/  
  28.             objproduct.CountryName = "India,America,SriLanka,Rushia,Japan,Pakistan";  
  29.             objproduct.Population = "125000,30000,4500,80000,16000,90000";  
  30.   
  31.             return objproduct;  
  32.         }  
  33.     }  
  34. }  
Step 6

Then we add a view by which we represent our chart on the screen. Then go to your ActionResult Index method and right-click on the Index then click on Add view.



Step 7

Now add the following code to your view file.
  1. @model WebApplication1.Models.CountryModel  
  2.   
  3. @{  
  4.     Layout = null;  
  5. }  
  6. <script type="text/javascript" src="https://www.google.com/jsapi"></script>  
  7. <script type="text/javascript">  
  8.   
  9.        google.load("visualization", "1", {packages:["geochart"]});  
  10.       google.setOnLoadCallback(drawRegionsMap);  
  11.   
  12.       function drawRegionsMap() {  
  13.   
  14.         // Create and populate the data table.  
  15.         var country = '@Model.CountrytData.CountryName';  
  16.         //Pereparing string into array  
  17.           var countryarray = country.split(',');  
  18.             
  19.          var population = [@Model.CountrytData.Population];  
  20.           
  21.   
  22.         var data = new google.visualization.DataTable();  
  23.         data.addColumn('string', '@Model.CountryTitle');  
  24.          
  25.           data.addColumn('number', '@Model.PopulationTitle');  
  26.        
  27.           for (i = 0; i < countryarray.length; i++) {  
  28.                
  29.             data.addRow([countryarray[i].toString(), population[i]]);  
  30.         }  
  31.         var options = {};  
  32.   
  33.         var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));  
  34.   
  35.         chart.draw(data, options);  
  36.     }  
  37. </script>  
  38. <div id="regions_div" style="width: 500px; height: 300px;">  
  39. </div>  
  40.   
  41. <!DOCTYPE html>  
  42.   
  43. <html>  
  44. <head>  
  45.     <meta name="viewport" content="width=device-width" />  
  46.     <title>Index</title>  
  47. </head>  
  48. <body>  
  49.     <div>   
  50.     </div>  
  51. </body>  
  52. </html>  
Step 8

Now simply build your application and run it in your browser. After running your application you have the output like the following.

Output

 



Summary

As I said above, Geographical Charts play a very vital and important role of representing an area with its specific value like the population density of various areas. This area may be anything; it may be a country , continent or city. So in the given example I tell how to make a dynamic geographical chart in MVC. I think you can easily understand the given procedure to make a dynamic geographical chart in ASP.Net MVC applications. It is a very interesting chart to represent the geographical data of an area. I hope this article will be useful for all readers.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs