I have already written an
article for implementing Geo Chart in ASP.NET. In this article I’m going to
explain how to use custom colors and tooltip in Google Geo Chart.
In this demo I have
implemented Geo chart for countries and percentage of world populations. For that first we have to create table with
following fields.
Implementing custom Color: &
Tooltip
In google Geo Chart
documentation they have given sample code for default Geo Chart without custom
color and tooltip. But they have explained all properties which includes custom
color and tooltip. Please follow the link,
https://developers.google.com/chart/interactive/docs/gallery/geochart
You may be noticed that there’s a code
Here we need to add color property with custom color,
for example
colorAxis:
{ colors: ['#4DB8FF'] }
For Tooltip we need to add following properties with necessary
values
tooltip: { isHtml: tru e, textStyle: { fontSize: 21 } }
Please go through the complete source code, because I have
used HTML markup for creating tooltip in chart. Example
<div class="tooltip">
<table>
<tr>
<td>
...
<td>
</tr>
</table>
</div>
CSS class for tooltip:
Also you can customize tooltip
style by adding CSS class
<style>
.tooltip
{
width:
270px;
min-height:
50px;
font-family:
Verdana;
font-size:
11px;
}
</style>
HTML source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<title>List of
countries by population</title>
<style>
.tooltip
{
width:
270px;
min-height:
50px;
font-family:
Verdana;
font-size:
11px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="padding-left:150px; font-family:Arial; font-size:15px;">List of countries by population</div><br />
<asp:Literal ID="lt1" runat="server"></asp:Literal>
<div>
<div id="Country_div" style="width: 500px; height: 300px;"></div>
</div>
</div>
</form>
</body>
</html>
C#
Code:
protected void BindData()
{
DataTable dt1 = new
DataTable();
DataTable
dt2 = new DataTable();
try
{
dt1 = GetCountry();
StringBuilder
str = new StringBuilder();
StringBuilder
strData = new StringBuilder();
StringBuilder
str1 = new StringBuilder();
str.Append("
<script type=*text/javascript*>
google.load(*visualization*, *1*, { packages: [*geochart*] });");
str.Append("
google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() {");
str.Append("
var data = google.visualization.arrayToDataTable([");
str.Append("
['Country', 'World Population', { role: 'tooltip', p: { html: true } }],");
foreach
(DataRow DR in
dt1.Rows)
{
string
Country = DR["Country"].ToString();
string
WorldPopulation = DR["WorldPopulation"].ToString();
string
TotalPopulation = DR["TotalPopulation"].ToString();
string
Source = DR["Source"].ToString();
strData.Append(" ['" + Country + "', " + WorldPopulation + ", '<div class=*tooltip*> ");
strData.Append("<div><hr />");
strData.Append("<table>");
strData.Append("<tr><td>Total
Population</td><td>" + TotalPopulation + "</td></tr>");
strData.Append("<tr><td>World of
Population</td><td>" + WorldPopulation + "</td></tr>");
strData.Append("<tr><td>Source</td><td>"
+ Source + "</td></tr>");
strData.Append("</table>");
strData.Append("</div>");
strData.Append("</div>'],");
}
str1.Append(" ]); var options = { legend: 'none', tooltip: { isHtml:
true, textStyle: { fontSize: 21 } },");
str1.Append(" colorAxis: { colors: [ '#4DB8FF'] } };");
str1.Append(" var chart = new
google.visualization.GeoChart(document.getElementById('Country_div'));");
str1.Append(" function selectHandler() { var selectedItem =
chart.getSelection()[0]; if (selectedItem) {");
str1.Append(" var topping =
data.getValue(selectedItem.row, 0);");
str1.Append(" alert('Selected Country is ' + topping); } }");
str1.Append(" google.visualization.events.addListener(chart, 'select',
selectHandler);");
str1.Append(" chart.draw(data, options);");
str1.Append(" } </script>");
lt1.Text = str.ToString().Replace('*', '"')
+ strData.ToString().TrimEnd(',').Replace('*', '"')
+ str1.ToString();
}
catch (Exception ex)
{ }
}
protected DataTable GetCountry()
{
DataTable
dt = new DataTable();
string
cmdstr = "select
Id,Country,TotalPopulation,WorldPopulation,Source from Population;"
conn.Open();
SqlDataAdapter
adp = new SqlDataAdapter(cmdstr,
conn);
adp.Fill(dt);
conn.Close();
return
dt;
}