In this article I’m going
to explain how to create google multi series 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.
Google column chart provides the functionality to create multi series column
chart.
Here I’ll show you how to create multi
series 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)
|
|
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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multi series 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=SPIDER; 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 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.addColumn('number', 'Expences');
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("data.setValue(" + i + "," + 2 + ","
+ dt.Rows[i]["Expences"].ToString()
+ ") ;");
}
str.Append("
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));");
str.Append("
chart.draw(data, {width: 650, 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