connectseekers.com

Saturday, 6 September 2014

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

9/06/2014 - By Pranav Singh 3

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.


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.


About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

3 comments:

  1. Just one word: I Thank You! :)

    ReplyDelete
  2. Thank you so much for offering this creative.

    ReplyDelete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top