Create table
==========
CREATE TABLE [dbo].[tb_student_average](
[id] [bigint] IDENTITY(1,1) NOT NULL,
[student_name] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[average_marks] [decimal](18, 0) NULL
)
aspx Page
========
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pie_Chart.aspx.cs" Inherits="Pie_Chart" %>
<!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 id="Head1" runat="server">
<title>Dynamic pie Chart</title>
<script src="GoogleApi.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="lt" runat="server"></asp:Literal>
</div>
<div id="chart_div"></div>
</form>
</body>
</html>
.Cs Page
=======
// complete code of Visualization: Combo Chart
SqlConnection con = new SqlConnection();
// here am declairing the stringbuilder class
StringBuilder str = new StringBuilder();
protected void Page_Load(object sender, EventArgs e)
{
// here i am declare connection
con.ConnectionString = ConfigurationManager.ConnectionStrings["StrConn"].ConnectionString;
con.Open();
if (Page.IsPostBack == false)
{
// here i am calling function chart_bind(); in the page load event of the page
chart_bind();
}
}
private void chart_bind()
{
// here i am using SqlDataAdapter for the sql server select query
SqlDataAdapter adp = new SqlDataAdapter("select top(7)* from tb_student_average", con);
// here am taking datatable
DataTable dt = new DataTable();
try
{
// here datatale dt is fill wit the adp
adp.Fill(dt);
// this string m catching in the stringbuilder class
// in the str m writing same javascript code that is given by the google.
str.Append(@"<script type=text/javascript> google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();");
// but m changing only below line
// (" data.addColumn('string'(datatype), 'student_name'(column name));");
// str.Append(" data.addColumn('number'(datatype), 'average_marks'(column name));");
// my data that will come from the sql server
str.Append(" data.addColumn('string', 'student_name');");
str.Append(" data.addColumn('number', 'average_marks');");
str.Append(" data.addRows([");
// here i am declairing the variable i in int32 for the looping statement
Int32 i;
// loop start from 0 and its end depend on the value inside dt.Rows.Count - 1
for (i = 0; i <= dt.Rows.Count - 1; i++)
{
// here i am fill the string builder with the value from the database
str.Append("['" + (dt.Rows[i]["student_name"].ToString()) + "'," + dt.Rows[i]["average_marks"].ToString() + "],");
}
// other all string is fill according to the javascript code
str.Append(" ]);");
str.Append(" var chart = new google.visualization.PieChart(document.getElementById('chart_div'));");
// str.Append(" var chart = new google.visualization.BarChart(document.getElementById('chart_div'));");
str.Append("chart.draw(data, {width: 1200, height: 500,title: 'Students Record'});}");
str.Append("</script>");
// here am using literal conrol to display the complete graph
lt.Text = str.ToString().TrimEnd(',');
con.Close();
}
catch { }
}
==========
CREATE TABLE [dbo].[tb_student_average](
[id] [bigint] IDENTITY(1,1) NOT NULL,
[student_name] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[average_marks] [decimal](18, 0) NULL
)
aspx Page
========
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pie_Chart.aspx.cs" Inherits="Pie_Chart" %>
<!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 id="Head1" runat="server">
<title>Dynamic pie Chart</title>
<script src="GoogleApi.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="lt" runat="server"></asp:Literal>
</div>
<div id="chart_div"></div>
</form>
</body>
</html>
.Cs Page
=======
// complete code of Visualization: Combo Chart
SqlConnection con = new SqlConnection();
// here am declairing the stringbuilder class
StringBuilder str = new StringBuilder();
protected void Page_Load(object sender, EventArgs e)
{
// here i am declare connection
con.ConnectionString = ConfigurationManager.ConnectionStrings["StrConn"].ConnectionString;
con.Open();
if (Page.IsPostBack == false)
{
// here i am calling function chart_bind(); in the page load event of the page
chart_bind();
}
}
private void chart_bind()
{
// here i am using SqlDataAdapter for the sql server select query
SqlDataAdapter adp = new SqlDataAdapter("select top(7)* from tb_student_average", con);
// here am taking datatable
DataTable dt = new DataTable();
try
{
// here datatale dt is fill wit the adp
adp.Fill(dt);
// this string m catching in the stringbuilder class
// in the str m writing same javascript code that is given by the google.
str.Append(@"<script type=text/javascript> google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();");
// but m changing only below line
// (" data.addColumn('string'(datatype), 'student_name'(column name));");
// str.Append(" data.addColumn('number'(datatype), 'average_marks'(column name));");
// my data that will come from the sql server
str.Append(" data.addColumn('string', 'student_name');");
str.Append(" data.addColumn('number', 'average_marks');");
str.Append(" data.addRows([");
// here i am declairing the variable i in int32 for the looping statement
Int32 i;
// loop start from 0 and its end depend on the value inside dt.Rows.Count - 1
for (i = 0; i <= dt.Rows.Count - 1; i++)
{
// here i am fill the string builder with the value from the database
str.Append("['" + (dt.Rows[i]["student_name"].ToString()) + "'," + dt.Rows[i]["average_marks"].ToString() + "],");
}
// other all string is fill according to the javascript code
str.Append(" ]);");
str.Append(" var chart = new google.visualization.PieChart(document.getElementById('chart_div'));");
// str.Append(" var chart = new google.visualization.BarChart(document.getElementById('chart_div'));");
str.Append("chart.draw(data, {width: 1200, height: 500,title: 'Students Record'});}");
str.Append("</script>");
// here am using literal conrol to display the complete graph
lt.Text = str.ToString().TrimEnd(',');
con.Close();
}
catch { }
}
