In this article I’m going to explain how to create google Geo map
or Geo chart with database in ASP.NET.
A Geochart is a
map of a country, a continent, or a region with two modes:
ü The region mode
colorizes whole regions, such as countries, provinces, or states.
ü The marker mode
marks designated regions using bubbles that are scaled according to a value
that you specify.
A Geochart is rendered
within the browser using SVG or VML. Note that the map is not scrollable or draggable.
Loading:
The google.load package
name is "geochart"
google.load('visualization', '1', {'packages': ['geochart']});
The
Geochart visualization class name is google.visualization.GeoChart
var visualization = new google.visualization.GeoChart(container);
Regions Example:
The regions
style fills entire regions (typically countries) with colors corresponding to
the values that you assign.
First we have to create table. Table design and sample data given
below.
Table design:
|
Column
|
datatype
|
|
Id
|
int
|
|
Country
|
varchar(50)
|
|
Popularity
|
int
|
Sample data:
|
Id
|
Country
|
Popularity
|
|
1
|
Germany
|
200
|
|
2
|
United States
|
300
|
|
3
|
Brazil
|
400
|
|
4
|
Canada
|
500
|
|
5
|
France
|
600
|
|
6
|
RU
|
700
|
Following source code is used to create google
Geochart for country and popularity.
Designer
source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Google Geo chart using Google Visualization</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="lt" runat="server"></asp:Literal>
<div id="chart_div" style="width: 650px; height: 350px;"></div>
</div>
</form>
</body>
</html>
C#
code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Configuration;
public partial class _Default :
System.Web.UI.Page
{
StringBuilder
str = new StringBuilder();
//Get connection
string from web.config
SqlConnection
conn = new SqlConnection("Data source=localhost; Initial catalog=Demo;
Integrated Security=True");
protected void Page_Load(object
sender, EventArgs e)
{
if
(Page.IsPostBack == false)
{
BindChart();
}
}
private DataTable GetData()
{
DataTable
dt = new DataTable();
string
cmd = "select * from Popularity";
SqlDataAdapter
adp = new SqlDataAdapter(cmd,
conn);
adp.Fill(dt);
return
dt;
}
private void BindChart()
{
DataTable
dt = new DataTable();
try
{
dt = GetData();
str.Append(@"
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country',
'Popularity'],");
int
count = dt.Rows.Count - 1;
for
(int i = 0; i <= count; i++)
{
str.Append("['" + dt.Rows[i]["Country"].ToString() + "', "
+ dt.Rows[i]["Popularity"].ToString()
+ "],");
if
(i == count)
{
str.Append("['" + dt.Rows[i]["Country"].ToString() + "', "
+ dt.Rows[i]["Popularity"].ToString()
+ "]]);");
}
}
str.Append("
var options = {}; var chart = new
google.visualization.GeoChart(document.getElementById('chart_div'));");
str.Append("chart.draw(data,
options); };");
str.Append("</script>");
lt.Text = str.ToString();
}
catch
{
}
}
}