Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Google Chart (Pie) Example in Asp.net with Database using C#, VB.NET

Jun 19, 2014
Introduction:

Here I will explain how to create jQuery google chart (pie) example in
asp.net with database using c#, vb.net or create dynamic google pie chart in asp.net with database example in  c#, vb.net.

Description:

In previous articles I explained Ajax Pie chart example in asp.net with database, jQuery change image on mouse over, jQuery show alert message before leaving from webpage, jQuery drag and drop gridview rows in asp.net
and many articles related to jQuery, Ajax and asp.net. Now I explain how to create dynamic jQuery google chart (pie) example in asp.net with database using c#, vb.net.

First design table one table countrydetails in your database like as shown below

Column Name
Data Type
Allow Nulls
ID
Int(set identity property=true)
No
name
Varchar(50)
no
value
Int
no
Once we create table we need to enter some dummy data for our application purpose.

To implement jQuery google chart (pie) example in asp.net write the code like as shown below in your aspx page like this


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery Google Pie Chart Example in asp.net</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
// Global variable to hold data
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'GoogleChart.aspx/GetChartData',
data: '{}',
success:
function (response) {
drawchart(response.d);
},

error: function () {
alert("Error loading data! Please try again.");
}
});
})
function drawchart(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Column Value');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].Countryname, dataValues[i].Total]);
}
new google.visualization.PieChart(document.getElementById('chartdiv')).
draw(data, { title: "Show Google Chart in Asp.net" });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="chartdiv" style="width: 600px; height: 350px;">
</div>
</form>
</body>
</html>
C# Code

In code behind add the following namespaces


using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
After adding namespaces and write the following code in page load


public partial class GoogleChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<countrydetails> GetChartData()
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
{
con.Open();
SqlCommand cmd = new SqlCommand("select name,total=value from countrydetails order by total desc", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
con.Close();
}
List<countrydetails> dataList = new List<countrydetails>();
foreach (DataRow dtrow in dt.Rows)
{
countrydetails details = new countrydetails();
details.Countryname = dtrow[0].ToString();
details.Total = Convert.ToInt32(dtrow[1]);
dataList.Add(details);
}
return dataList;
}
}
public class countrydetails
{
public string Countryname { get; set; }
public int Total { get; set; }
}
VB.NET Code


Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services

Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs)

End Sub
<WebMethod> _
Public Shared Function GetChartData() As List(Of countrydetails)
Dim dt As New DataTable()
Using con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
con.Open()
Dim cmd As New SqlCommand("select name,total=value from countrydetails order by total desc", con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
con.Close()
End Using
Dim dataList As New List(Of countrydetails)()
For Each dtrow As DataRow In dt.Rows
Dim details As New countrydetails()
details.Countryname = dtrow(0).ToString()
details.Total = Convert.ToInt32(dtrow(1))
dataList.Add(details)
Next
Return dataList
End Function
End Class
Public Class countrydetails
Public Property Countryname() As String
Get
Return m_Countryname
End Get
Set
m_Countryname = Value
End Set
End Property
Private m_Countryname As String
Public Property Total() As Integer
Get
Return m_Total
End Get
Set
m_Total = Value
End Set
End Property
Private m_Total As Integer
End Class
Demo


Download Sample Code Attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

12 comments :

Anonymous said...

This is very valuable website for me..

Unknown said...

Thank you so much, It would looks much better if you would have demonstrate using master page, because most of the intermediate developer face problem during working with master page with the apps. Thank you.

prasad said...

its fine but its not working with joins and all. will you please suggest.

emond said...

very nice,,

Anil Kumar Singh said...

It give me Error loading data! Please try again error. Please tell me why this error arise.

Unknown said...


Its nice,
But I have a option to select the date range, after selecting when will click on button, according to the range value the pie chart will be shown in postback event. What to do in this case. ? I have gone through google, but not found any solution for this. Plz help. Thanks.

Anonymous said...


Its nice,
But I have a option to select the date range, after selecting when will click on button, according to the range value the pie chart will be shown in postback event. What to do in this case. ? I have gone through google, but not found any solution for this. Plz help. Thanks.

Unknown said...

not working

Unknown said...

Really great work ....

Unknown said...

not working error loading data

Unknown said...

Error loading data! Please try again error. Can you please help to know the problem.

Debasish said...

Is there any other Chart Type like Line or Doughnut

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.