In this article I’m going to explain how to create google area
chart with database in ASP.NET.
Google charts provides a way to visualize data to any
website. I have written many articles for Google chart visualization. Google
Area chart draws the series on top of one another.
Here I’ll show you how to create
google area chart with SQL Server database. First we have to create table.
Table design and sample data given below.
Table
design:
|
Column
|
datatype
|
|
id
|
int
|
|
year
|
varchar(50)
|
|
sales
|
varchar(10)
|
|
expences
|
varchar(10)
|
Sample
data:
|
id
|
year
|
sales
|
expences
|
|
1
|
2000
|
150000
|
50000
|
|
2
|
2001
|
100000
|
30000
|
|
3
|
2002
|
200000
|
100000
|
|
4
|
2003
|
180000
|
80000
|
|
5
|
2004
|
200000
|
90000
|
|
6
|
2005
|
250000
|
200000
|
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>Google
Area 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: 660px; height: 400px;"></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 Sales";
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([['Year', 'Sales', 'Expenses'],");
int
count=dt.Rows.Count - 1;
for
(int i = 0; i <= count; i++)
{
if
(count == i)
{
str.Append("['" + dt.Rows[i]["year"].ToString() + "'," + dt.Rows[i]["sales"].ToString() + "," + dt.Rows[i]["expences"].ToString() + "]");
}
else
{
str.Append("['" + dt.Rows[i]["year"].ToString() + "'," + dt.Rows[i]["sales"].ToString() + "," + dt.Rows[i]["expences"].ToString() + "],");
}
}
str.Append("]);");
str.Append("
var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, vAxis:
{minValue: 0} };");
str.Append("
var chart = new
google.visualization.AreaChart (document.getElementById('chart_div'));
chart.draw(data, options); }");
str.Append("
</script>");
lt.Text = str.ToString();
}
catch (Exception ex)
{ }
}
}