In this article I’m going
to explain how to create google column chart from database in ASP.NET.
Column chart is used when
you want to compare the values of individual data points with another. They
help in bringing out the highs and lows of the data set very easily.
Here I’ll show you how to create column
chart from 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)
|
Sample
data:
|
id
|
year
|
sales
|
|
1
|
2000
|
150000
|
|
2
|
2001
|
100000
|
|
3
|
2002
|
200000
|
|
4
|
2003
|
180000
|
|
5
|
2004
|
200000
|
|
6
|
2005
|
250000
|
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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Column 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"></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;
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 year,sales from Sales";
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:[*corechart*]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new
google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addRows(" + dt.Rows.Count + ");");
for
(int i = 0; i <= dt.Rows.Count - 1; i++)
{
str.Append("data.setValue( " + i + "," + 0 + ","
+ "'" + dt.Rows[i]["year"].ToString() + "');");
str.Append("data.setValue(" + i + "," + 1 + ","
+ dt.Rows[i]["Sales"].ToString() +
") ;");
}
str.Append("
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));");
str.Append("
chart.draw(data, {width: 550, height: 300, title: 'Company Performance',");
str.Append("hAxis:
{title: 'Year', titleTextStyle: {color: 'green'}}");
str.Append("});
}");
str.Append("</script>");
lt.Text = str.ToString().Replace('*',
'"');
}
catch
{ }
}
}
For more details please
refer following link.
https://developers.google.com/chart/interactive/docs/gallery/columnchart