ایجاد چارت Google Geo در MVC

در این مقاله، با انواع نمودارهای جغرافیایی و همچنین نحوه استفاده از نمودارهای جغرافیای داینامیک در MVC آشنا می شویم.

Geo Chart، همچنین به عنوان Geographical Chart نیز شناخته می شود. زیرا Geo فرم کوتاه شده Geographical می باشد. منطقه می تواند، یک قاره، کشور، شهر و یا ناحیه باشد. با استفاده از Geo chart انواع مختلفی از داده مانند تراکم یک منطقه، جمعیت، کاربران یک زبان مشخص در یک منطقه و بسیاری چیزهای دیگر را نمایش دهیم. مهم ترین استفاده از آن، نمایش یک منطقه با مشخصات مخصوص به آن است. همچنین می توانیم داده های دو منطقه را با استفاده از Geo chart مقایسه کنیم. یکی از ویژگی های مهم Geo chart این است که هرگز در مرورگر از مکانی به مکان دیگر، drag and drop نمی شود و به هیچ عنوان scroll نمی خورد.

سه نوع Geo Chart داریم:

- Region Geo Chart

- Markers Geo Chart

- Text Geo Chart

Region Geo Chart:

در این نمودار، سراسر قاره یا کشور را با رنگ مشخصی که شما می خواهید، نمایش می دهیم. کد زیر را مشاهده کنید، آن را در یک فایل متنی کپی کرده و با فرمت HTML ذخیره کنید و در مرورگر باز کنید.

<html>  
  <head>  
    <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() {  
  
        var data = google.visualization.arrayToDataTable([  
          ['Country', 'Popularity'],  
          ['Germany', 788],  
          ['United States', 3789],  
          ['Brazil', 7860],  
          ['Canada', 77689],  
          ['France', 999],  
          ['RUsia', 5673],  
      ['Pakistan', 1244],  
          ['Newzeland', 700],  
  
        ]);  
  
        var options = {  
            'width': 600,  
            'height':500,  
'colorAxis':{colors:['red','green']}  
            };  
  
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));  
  
        chart.draw(data, options);  
      }  
    </script>  
  </head>  
  <body>  
    <div id="regions_div" style="width: 900px; height: 500px;"></div>  
  </body>  
</html>

Markers Geo Chart

همانطور که از نام آن مشخص است، مکان های مشخصی از منطقه را با علامت نقطه روی نمودار نمایش می دهد که این نقطه ها به شکل دایره های توپر نمایش داده می شوند. در کد زیر رنگ و سایز دایره ها را به دلخواه تغییر داده ایم.

<html>  
  <head>  
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>  
    <script type='text/javascript'>  
     google.load('visualization', '1', {'packages': ['geochart']});  
     google.setOnLoadCallback(drawMarkersMap);  
  
      function drawMarkersMap() {  
     var data = google.visualization.arrayToDataTable([  
        ['City',   'Population', 'Area'],  
        ['Rome',      56767098,      285.31],  
        ['Milan',     1324110,    181.76],  
        ['Naples',    959574,     117.27],  
        ['Turin',     907563,     130.17],  
        ['Palermo',   655875,     158.9],  
        ['Genoa',     607906,     243.60],  
        ['Bologna',   380181,     140.7],  
        ['Florence',  371282,     102.41],  
        ['Fiumicino', 67370,      213.44],  
        ['Anzio',     52192,      43.43],  
        ['Ciampino',  38262,      11]  
          
      ]);  
  
      var options = {  
        region: 'IT',  
        displayMode: 'markers',  
        colorAxis: {colors: ['orange', 'red']}  
      };  
  
      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));  
      chart.draw(data, options);  
    };  
    </script>  
  </head>  
  <body>  
    <div id="chart_div" style="width: 500px; height: 300px;"></div>  
  </body>  
</html>

Text Geo Chart

ساده ترین نوع Geo Chart است که با استفاده از یک Lable، مشخصات یک مکان خاص را نشان می دهیم. کد زیر را مشاهده کنید.

<html>  
  <head>  
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>  
    <script type='text/javascript'>  
     google.load('visualization', '1', {'packages': ['geochart']});  
     google.setOnLoadCallback(drawMarkersMap);  
  
      function drawMarkersMap() {  
     var data = google.visualization.arrayToDataTable([  
        ['City',   'Population', 'Area'],  
        ['Rome',      56767098,      285.31],  
        ['Milan',     1324110,    181.76],  
        ['Naples',    959574,     117.27],  
        ['Turin',     907563,     130.17],  
        ['Palermo',   655875,     158.9],  
        ['Genoa',     607906,     243.60],  
        ['Bologna',   380181,     140.7],  
        ['Florence',  371282,     102.41],  
        ['Fiumicino', 67370,      213.44],  
        ['Anzio',     52192,      43.43],  
        ['Ciampino',  38262,      11]  
          
      ]);  
  
      var options = {  
        region: 'IT',  
        displayMode: 'text',  
        colorAxis: {colors: ['orange', 'red']}  
      };  
  
      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));  
      chart.draw(data, options);  
    };  
    </script>  
  </head>  
  <body>  
    <div id="chart_div" style="width: 500px; height: 300px;"></div>  
  </body>  
</html>

در مثال های زیر، با نمودار های جغرافیایی و انواع آن و چگونگی نمایش داده ها برای یک مکان خاص آشنا شدیم. همان طور که در بالا گفتیم، سه نوع اصلی نمودارها هستند که بسته به نیاز از هر یک استفاده می کنیم.

Geo Chart داینامیک

حال می خواهیم نشان دهیم، چگونه با استفاده از MVC، Javascript و #C می توان یک Geo chart داینامیک ایجاد کرد. در ادامه گام به گام مراحل را جلو می بریم، بنابراین مراحل را با دقت دنبال کنید.

مرحله اول:

Visual Studio را باز می کنیم و از منوی file یک پروژه از نوع ASP.NET Web Application ایجاد می کنیم.

مرحله دوم:

از فیلد قالب ها MVC را انتخاب می کنیم.

مرحله سوم:

سپس پروژه ای به همین شکل که در Solution Explorer نشان داده شده خواهیم داشت. حال روی Model راست کلیک کرده و یک کلاس اضافه می کنیم. در اینجا ما کلاسی به نام CountryModel اضافه کردیم، سپس کد زیر را در آن کپی می کنیم.

کد:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
  
namespace geographical.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; }  
    }  
}

مرحله چهارم:

بعد از اضافه کردن فایل کلاس، به همین ترتیب یک controller نیز اضافه می کنیم.

مرحله پنجم:

در اینجا، controllerای به نام geochartController ایجاد کردیم. سپس کد زیر را در آن کپی می کنیم.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using geographical.Models;  
  
namespace geographical.Controllers  
{  
    public class geochartController : Controller  
    {  
        // GET: geochart  
        public ActionResult Index()  
        {  
            CountryModel objProductModel = new CountryModel();  
            objProductModel.CountrytData = new Country();  
            objProductModel.CountrytData = GetChartData();  
            objProductModel.CountryTitle = "Country";  
            objProductModel.PopulationTitle = "Population";  
  
            return View(objProductModel);  
        }  
  
        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;  
        }  
    }  
}

مرحله ششم:

سپس یک view اضافه می کنیم تا به وسیله آن، نمودار را روی صفحه نمایش دهیم. سپس به متد ActionResult Index رفته، روی آن راست کلیک می کنیم و Add view را می زنیم.

مرحله هفتم:

کد زیر را داخل آن کپی می کنیم.

@model WebApplication1.Models.CountryModel  
  
@{  
    Layout = null;  
}  
<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>  
  
<!DOCTYPE html>  
  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>Index</title>  
</head>  
<body>  
    <div>   
    </div>  
</body>  
</html>

مرحله هشتم:

حالا پروژه خود را Build کرده و به سادگی آن را در مرورگر اجرا می کنیم. بعد از اجرای برنامه، خروجی آن به شکل زیر خواهد بود.

همانطور که در بالا گفتیم، نمودارهای جغرافیایی در نمایش اطلاعات یک منطقه با مشخصات خاص خودش مانند تراکم جمعیت یک منطقه، نقش مهمی دارند. این منطقه می تواند، قاره، کشور یا شهر باشد.

فایل های ضمیمه

3415_WebApplication6.zip

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

ایجاد چارت Google Geo در MVC

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید