Display CanvasJs Pie Charts using SQL Server

Header File

      <script src="jquery-1.7.1.js" type="text/javascript"></script>

      <script src="canvasjs.min.js" type="text/javascript"></script>

Aspx Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CanvasjsChart.aspx.cs" Inherits="BloggerCont.CanvasjsChart" %>

<!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></title>

      <script src="jquery-1.7.1.js" type="text/javascript"></script>

      <script src="canvasjs.min.js" type="text/javascript"></script>

      <script type="text/javascript">

          $(document).ready(function () {

              Disp();

          });

          function Disp() {

              var dataPts = [];

              var var1;

              var var2;

              $.ajax({

                  cache: false,

                  async: false,

                  type: "POST",

                  dataType: "Json",

                  contentType: "application/json; charset=utf-8",

                  url: "CanvasjsChart.aspx/GetAgeCharts",

                  data: {},

                  success: function (data) {

                      var len = data.d.length;

                      for (var i = 0; i < len; i++) {

                          dataPts.push({

                              label: data.d[i].Name,

                              y: parseFloat(data.d[i].Age)

                          });

                      }

                      var chart = new CanvasJS.Chart("divchart",

                   {

                       title: {

                           text: "Canvas js pie chart"

                       },

                       data: [

                    {

                        type: "pie",

                        dataPoints: dataPts

                    }]

                   });

                      chart.render();

                  },

                  error: function (result) {

                      alert(result);

                  }

              });

          }

      </script>

   </head>

   <body>

      <form id="form1" runat="server">

         <div id="divchart"></div>

      </form>

   </body>

</html>

CS Page

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Services;

using System.Data.SqlClient;

using System.Configuration;

using System.Data;

namespace BloggerCont

{

    public partial class CanvasjsChart : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        public class StdAge

        {

            public string Name;

            public int Age;

        }

        [WebMethod]

        public static object GetAgeCharts()

        {

            SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["blogger"].ToString());

            List<StdAge> obj = new List<StdAge>();

            cn.Open();

            DataTable dt = new DataTable();

            SqlCommand cmd = new SqlCommand();

            SqlDataAdapter da = new SqlDataAdapter("select * from tbl_CanvasAge", cn);

            da.Fill(dt);

            cn.Close();

            foreach (DataRow dr in dt.Rows)

            {

                StdAge Std = new StdAge();

                Std.Name = Convert.ToString(dr[1].ToString());

                Std.Age = Convert.ToInt32(dr[2].ToString());

                obj.Add(Std);

            }

            return obj.ToArray();

        }

    }

}

DataBase:

Charts: