This article will show you how you can bind a gridview by
data table and how you can convert the gridview data into the chart graph using
jQuery in asp.net.
Some of my previous articles are as follows:
Asp.net,
Windows Application, Asp.Net MVC and Google Chart Articles Using C#.Net, Dynamic
Histogram Google Chart in asp.net MVC using C#.net, JavaScript, Line
Chart in Asp.Net Using C#.Net and VB.Net, Column
3D Chart in Asp.Net Using C#.Net and VB.Net, Point
Chart in Asp.Net Using C#.Net and VB.Net. Dynamic
Thumbnails Image Preview Slider With Zoom Effect Using jQuery In Asp.Net and
C#.Net, Sign
Up Form For Newsletter In Asp.Net Using C# and Css3, jQuery
DateTime Picker Calendar With Plush & Minush Date Changer In Asp.Net,
Li
Html Tag Styling By Css3 With Dynamic Circular Item Count In Asp.Net In Asp.Net,
Access
Hidden Or HiddenFor Fields Value At Controller End In Asp.Net Mvc Using C#,
Fixed
Header Web Page Using CSS3 Without jQuery In Asp.Net MVC.
So for this article first we will create a new asp.net
application and add a page. In this page add the below mention library into the
header of the page.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharttable.org/master/jquery.highchartTable-min.js"></script>
|
In this page we will add a gridview control into the page.
<asp:GridView ID="GridView1" runat="server" CssClass="highchart" data-graph-container-before="1"
data-graph-type="line" Style="display: none" data-graph-datalabels-enabled="1"
data-graph-datalabels-formatter="foo.myAwesomeCallback">
</asp:GridView>
|
Here I have added Style="display: none"
for making the gridview invisible. In above code I have added some more tag to retrieve
the gridview data and transform it into graph. Now add the below jquery code
into the header of the page.
<script language="javascript">
foo = {
myAwesomeCallback: function (value) {
return
value + '$'
}
}
$(document).ready(function () {
$('table#<%=GridView1.ClientID
%>').highchartTable();
});
</script>
|
Here is the complete code of page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1"
%>
<!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 runat="server">
<title>Bind
GridView To DataTable and Convert GridView Data Into Chart In Asp.Bet Using
jQuery
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharttable.org/master/jquery.highchartTable-min.js"></script>
<script language="javascript">
foo = {
myAwesomeCallback: function (value) {
return
value + '$'
}
}
$(document).ready(function () {
$('table#<%=GridView1.ClientID
%>').highchartTable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" CssClass="highchart" data-graph-container-before="1"
data-graph-type="line" Style="display: none" data-graph-datalabels-enabled="1"
data-graph-datalabels-formatter="foo.myAwesomeCallback">
</asp:GridView>
</form>
</body>
</html>
|
Now here is the code
to bind the grid view to data table.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication4
{
public partial class WebForm1 : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
DataTable
dt = new DataTable();
dt = GetDataToBind();
this.GridView1.DataBound
+= (object o, EventArgs
ev) =>
{
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
};
GridView1.DataSource = dt;
GridView1.DataBind();
}
public
DataTable GetDataToBind()
{
DataTable
dt = new DataTable("SaleData");
dt.Columns.Add(new DataColumn("Month", typeof(string)));
dt.Columns.Add(new DataColumn("Sale", typeof(string)));
DataRow
dr1 = dt.NewRow();
dr1["Month"]
= "Group 1";
dr1["Sale"]
= "10000";
dt.Rows.Add(dr1);
DataRow
dr2 = dt.NewRow();
dr2["Month"]
= "Group 2";
dr2["Sale"]
= "34300";
dt.Rows.Add(dr2);
DataRow
dr3 = dt.NewRow();
dr3["Month"]
= "Group 3";
dr3["Sale"]
= "23400";
dt.Rows.Add(dr3);
DataRow
dr4 = dt.NewRow();
dr4["Month"]
= "Group 4";
dr4["Sale"]
= "30040";
dt.Rows.Add(dr4);
DataRow
dr5 = dt.NewRow();
dr5["Month"]
= "Group 5";
dr5["Sale"]
= "3422";
dt.Rows.Add(dr5);
return
dt;
}
}
}
|
Now in above code check the below mention code.
this.GridView1.DataBound
+= (object o, EventArgs
ev) =>
{
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
};
|
In this I have added tbody and thead tag to the gridview.
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view