ASP.net C#

How to use Google Chart API Using ASP.net with Example!!!

 

Here in this Concept I use google chart like(barchart,piechart etc)
for full fill this I use asp.net where I include one index.htm page,webservices.asmx and jquery 1.9.1 for js render.

step 1. in index.htm

• I use script with ajax method for retrieving data  from webservices
• here is the code:-
• <script type="text/javascript">
  var marksss =[];
  var namesss =[];
  var lengthis;
  alert("ajax checking");
  $.ajax({
  type: "POST",
  url: "WebService.asmx/GetDataForChart",
  data: "{}",
  dataType: "json",
  async:false,
  contentType: "application/json; charset=utf-8",
  success: function (res) {
  var jsn = res.d;
  lengthis = jsn.length;
  for (i = 0; i < jsn.length; i++) {
  marksss[i] = jsn[i].marksis;// retrieve only name and marks of students
  namesss[i] = jsn[i].nameis;
  }
  },
  error: function (err) { alert("error:-" + err); }
  }); //ajax end block
  //---------------------------------------------------------------------------------------------
  google.setOnLoadCallback(drawChart);
  google.load("visualization", "1", { packages: ["corechart"] });
  function drawChart() {
  alert("Chart Is Loading..." + marksss[0] + namesss[0]);
  var dataTable = new google.visualization.DataTable();
  
  dataTable.addColumn('string', 'Marks');
  dataTable.addColumn('number', 'Marks');
  for (var i = 0; i <= lengthis; i++)
  dataTable.addRows([[namesss[i],marksss[i]]]);
  var options =
  {
  title: 'SmartData Student Marks'
  };
  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(dataTable, options);
  }
  </script>
• create a div with id of "chart_div"

step 2:- now write query in webservices for retrieving data from database and then pass them to the client page(.HTML)

• [WebMethod]
  public List<studentmarksis> GetDataForChart()
  {
  // JavaScriptSerializer serializer;
  SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString);
  string query = "Select name,marks from StudentMarks";
  SqlCommand cmd = new SqlCommand(query, con);
  DataTable ds = new DataTable();
  SqlDataAdapter adp = new SqlDataAdapter(cmd);
  con.Open();
  adp.Fill(ds);
  int i = ds.Rows.Count;
  List<studentmarksis> sm;
  List<studentmarksis> sm1 = new List<studentmarksis>();
  //SqlDataReader dr = cmd.ExecuteReader();
  if(i>0)
  {
  sm = new List<studentmarksis>();
  studentmarksis objsm;
  // serializer = new JavaScriptSerializer();
  for (int j = 0; j < i; j++)
  {
  objsm = new studentmarksis();
  objsm.marksis = Convert.ToInt32(ds.Rows[j]["marks"]);
  objsm.nameis = ds.Rows[j]["name"].ToString();
  sm.Add(objsm);
  }
  sm1 = sm;
  //jsonstring = serializer.Serialize(sm);
  }
  return sm1;
  // return jsonstring;
  }
  public class studentmarksis
  {
  public int marksis;
  public string nameis;
  }

Step: This is my table script

• USE [Your database name ]
  GO
  /****** Object: Table [dbo].[StudentMarks(TABLENAME)] Script Date: 05/17/2013 18:02:09 ******/
  SET ANSI_NULLS ON
  GO
  SET QUOTED_IDENTIFIER ON
  GO
  SET ANSI_PADDING ON
  GO
  CREATE TABLE [dbo].[StudentMarks](
  [studentid] [int] IDENTITY(1,1) NOT NULL,
  [name] [varchar](50) NULL,
  [rollno] [int] NULL,
  [marks] [int] NULL,
  CONSTRAINT [PK_StudentMarks] PRIMARY KEY CLUSTERED
  (
  [studentid] ASC
  )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  ) ON [PRIMARY]
  GO
  SET ANSI_PADDING OFF
  GO

Good Look!!! and If you need any help then mail me on my id vijay.sahu12@gmail.com

JSON Syntex for inserting data!!!

Exmple:

i want to send data to my web services so for that i have to add

step 1: add new website

step 2: add one Content Page(Default.aspx)

step 3: add webServices(WebServices.asmx)

step 4: disable this comment in top of webservices.cs

                                   [System.Web.Script.Services.ScriptService]

step 5: Create a simple method

                                   

[WebMethod]// never forget to wrtie this line,above of each method that you want to access in client side

    public void insertStudentInfomration(string name, string address)

    {        }

step 6: now move to the Default.aspx design code and write code by using above ajax syntax

$("#Button_Insert").click(function () { //Button_Insert is a ID of simple input button so never forget to write //this.

                alert("vijay");

                                

                                var nameis= $("#TextBox_name").val();// name textbox id

                                var addresis = $("#TextBox_address").val();

              alert("vijay");

                                $.ajax({

                                    type: "post",

                                    url: "studentinformation.asmx/insertstudentinfomration",

                             //   remember  "name" should be similar to the webservices variable parameter and /    //number of  parameter also should same

                             //and does not mater value variable like "nameis"

                             in webservice

                                    data: "{'name':'" + nameis + "','address':'" + addresis + "'}",

                                    contenttype: "application/json",

                                    datatype: "json",

                                    success: function (data) {

                                        var studentinsertinformation = data.d

                                    },

                                    failure: function (data) {

                                        alert(data);

                                    }

                                });