Google Chart
Default.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jsapi.js"></script>
</head>
<body>
<div id="b_sale" style="width:500px; height:300px;"></div>
</body>
<script>
// VISUALIZATION API AND THE PIE CHART PACKAGE.
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(createPIE);
function createPIE() {
// SET CHART OPTIONS.
var options = {
title: 'Sex of Employee',
colors: ['#888', 'orange'],
is3D: true
};
$.ajax({
url: "WebService.asmx/GetData",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var arrValues = [['SexID', 'Cnt']]; // DEFINE AN ARRAY.
var iCnt = 0;
$.each(data.d, function () {
// POPULATE ARRAY WITH THE EXTRACTED DATA.
arrValues.push([data.d[iCnt].SexID, data.d[iCnt].Cnt]);
iCnt += 1;
});
// CREATE A DataTable AND ADD THE ARRAY (WITH DATA) IN IT.
var figures = google.visualization.arrayToDataTable(arrValues)
// THE TYPE OF CHART (PieChart IN THIS EXAMPLE).
var chart = new google.visualization.PieChart(document.getElementById('b_sale'));
chart.draw(figures, options); // DRAW GRAPH WITH THE DATA AND OPTIONS.
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Got an Error');
}
});
}
</script>
</html>
----------------------------------------------------------------------------------------
WebService.vb
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()>
Public Class WebService
Inherits System.Web.Services.WebService
Public Class cl_table
Public SexID As String
Public Cnt As Integer
End Class
<WebMethod()>
Public Function GetData() As List(Of cl_table)
Dim lstSales As New List(Of cl_table)()
Dim sConnString As String = "Data Source=SQLServer;Persist Security Info=False;Initial Catalog=Database;User Id=sa;Password=password;Connect Timeout=30;"
Dim myConn As New SqlConnection(sConnString)
Dim objComm As New SqlCommand("select Sex_ID,count(emp_id) as cnt from tbl_employee group by Sex_ID ", myConn)
myConn.Open()
Dim sdr As SqlDataReader = objComm.ExecuteReader()
While sdr.Read
Dim objValues As New cl_table()
objValues.SexID = sdr("Sex_ID").ToString()
objValues.Cnt = sdr("cnt")
lstSales.Add(objValues)
End While
myConn.Close() : sdr.Close() : Return lstSales
End Function
End Class
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jsapi.js"></script>
</head>
<body>
<div id="b_sale" style="width:500px; height:300px;"></div>
</body>
<script>
// VISUALIZATION API AND THE PIE CHART PACKAGE.
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(createPIE);
function createPIE() {
// SET CHART OPTIONS.
var options = {
title: 'Sex of Employee',
colors: ['#888', 'orange'],
is3D: true
};
$.ajax({
url: "WebService.asmx/GetData",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var arrValues = [['SexID', 'Cnt']]; // DEFINE AN ARRAY.
var iCnt = 0;
$.each(data.d, function () {
// POPULATE ARRAY WITH THE EXTRACTED DATA.
arrValues.push([data.d[iCnt].SexID, data.d[iCnt].Cnt]);
iCnt += 1;
});
// CREATE A DataTable AND ADD THE ARRAY (WITH DATA) IN IT.
var figures = google.visualization.arrayToDataTable(arrValues)
// THE TYPE OF CHART (PieChart IN THIS EXAMPLE).
var chart = new google.visualization.PieChart(document.getElementById('b_sale'));
chart.draw(figures, options); // DRAW GRAPH WITH THE DATA AND OPTIONS.
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Got an Error');
}
});
}
</script>
</html>
----------------------------------------------------------------------------------------
WebService.vb
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()>
Public Class WebService
Inherits System.Web.Services.WebService
Public Class cl_table
Public SexID As String
Public Cnt As Integer
End Class
<WebMethod()>
Public Function GetData() As List(Of cl_table)
Dim lstSales As New List(Of cl_table)()
Dim sConnString As String = "Data Source=SQLServer;Persist Security Info=False;Initial Catalog=Database;User Id=sa;Password=password;Connect Timeout=30;"
Dim myConn As New SqlConnection(sConnString)
Dim objComm As New SqlCommand("select Sex_ID,count(emp_id) as cnt from tbl_employee group by Sex_ID ", myConn)
myConn.Open()
Dim sdr As SqlDataReader = objComm.ExecuteReader()
While sdr.Read
Dim objValues As New cl_table()
objValues.SexID = sdr("Sex_ID").ToString()
objValues.Cnt = sdr("cnt")
lstSales.Add(objValues)
End While
myConn.Close() : sdr.Close() : Return lstSales
End Function
End Class
Comments
Post a Comment