In this article I’m going
to explain how to create google bubble chart from database in ASP.NET.
A
bubble chart is used to visualize a data set with two to four dimensions. The
first two dimensions are visualized as coordinates, the third as color and the
fourth as size.
In
this demo I have used to create bubble chart for Correlation between life
expectancy, fertility rate and population of some worldcountries
(2010)
First we have to create table. Table design and sample data
given below.
Table
design:
|
Column
|
Datatype
|
|
ID
|
varchar(10)
|
|
Life_Expectancy
|
float
|
|
Fertility_Rate
|
float
|
|
Region
|
varchar(10)
|
|
Population
|
bigint
|
Sample
data:
|
ID
|
Life_Expectancy
|
Fertility_Rate
|
Region
|
Population
|
|
CAN
|
80.66
|
1.67
|
North America
|
33739900
|
|
DEU
|
79.84
|
1.36
|
Europe
|
81902307
|
|
DNK
|
78.6
|
1.84
|
Europe
|
5523095
|
|
EGY
|
72.73
|
2.78
|
Middle East
|
79716203
|
|
GBR
|
80.05
|
2
|
Europe
|
61801570
|
|
IRN
|
72.49
|
1.7
|
Middle East
|
73137148
|
Here
we’ve to use following code to load google JSAPI library
<script type="text/javascript"
src="https://www.google.com/jsapi"></script>
Designer
source code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble
chart</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: 900px; height: 500px;"></div>
</div>
</form>
</body>
</html>
Note:
Here we have to use following
namespace for StringBuilder
class.
using System.Text;
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;
public partial class _Default :
System.Web.UI.Page
{
SqlConnection
conn = new SqlConnection("Data source=localhost; Initial catalog=Demo;
Integrated security=true");
protected void Page_Load(object
sender, EventArgs e)
{
BindChart();
}
private DataTable GetData()
{
DataTable
dt = new DataTable();
string
cmd = "select * from DemoTbl";
SqlDataAdapter
adp = new SqlDataAdapter(cmd,
conn);
adp.Fill(dt);
return
dt;
}
private void BindChart()
{
DataTable
dt = new DataTable();
StringBuilder
str = new StringBuilder();
try
{
dt = GetData();
str.Append(@"
<script type='text/javascript'>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function
drawChart() {
var data =
google.visualization.arrayToDataTable([['ID', 'Life_Expectancy',
'Fertility_Rate', 'Region', 'Population'],");
int
count=dt.Rows.Count - 1;
for
(int i = 0; i <= count; i++)
{
if
(count == i)
{
str.Append("['" + dt.Rows[i]["ID"].ToString() + "'," + dt.Rows[i]["Life_Expectancy"].ToString() + "," + dt.Rows[i]["Fertility_Rate"].ToString() + ",'" + dt.Rows[i]["Region"].ToString() + "'," + dt.Rows[i]["Population"].ToString() + "]");
}
else
{
str.Append("['" + dt.Rows[i]["ID"].ToString() + "'," + dt.Rows[i]["Life_Expectancy"].ToString() + "," + dt.Rows[i]["Fertility_Rate"].ToString() + ",'" + dt.Rows[i]["Region"].ToString() + "'," + dt.Rows[i]["Population"].ToString() + "],");
}
}
str.Append("]);");
str.Append("
var options = {title: 'Correlation between life expectancy, fertility rate and
population of some world countries (2010)', hAxis: {title: 'Life
Expectancy'},");
str.Append("
vAxis: {title: 'Fertility Rate'}, bubble: {textStyle: {fontSize: 11}}};");
str.Append("
var chart = new
google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options); } </script>");
lt.Text = str.ToString();
}
catch (Exception ex)
{
}
}
}
For more details about
bubble chart and its properties please refer following link.
https://developers.google.com/chart/interactive/docs/gallery/bubblechart