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:

Comments

Post a Comment

Thank You for your Comment

Popular posts from this blog

Insecure cookie setting: missing Secure flag

-
  Issue Description: Insecure Cookie Setting - Missing Secure Flag Explanation: The "Secure" flag is an attribute that can be set for cookies in web applications. When the Secure flag is enabled for a cookie, the cookie is only transmitted over HTTPS connections, ensuring that it is sent securely over an encrypted channel. This is crucial for security because it helps prevent the exposure of sensitive information contained in cookies, such as session tokens or authentication credentials, to potential attackers. When the Secure flag is missing from a cookie, it means that the cookie can be sent over both secure (HTTPS) and non-secure (HTTP) connections. This can pose a significant security risk, as sensitive information could be exposed if the cookie is transmitted over an insecure connection. Impact: The impact of missing the Secure flag on a cookie depends on the context in which the cookie is used. Here are some potential risks: Session Hijacking: If an attacker can inter
Read more

Maximum Stored Procedure Function Trigger or View Nesting Level Exceeded (limit 32) in SQL Server

-
Image
                  In SQL Server I am facing some error on when it Runs Procedure. That as Maximum Stored Procedure Function Trigger or View Nesting Level Exceeded (limit 32) in SQL Server. Reason:                       user-defined function begins execution and decreases by one when the called stored procedure, managed code reference, or user-defined function completes execution. Attempting to exceed the maximum of 32 levels of nesting causes the whole calling chain to fail and for this error message to be raised.   Solution: To Run this code in Your SQL SERVER Avoid In this Error. SP_CONFIGURE 'nested_triggers' ,0 GO RECONFIGURE GO
Read more

Display Line Chart Using Chart.js MVC C#

-
Image
          In this Section We See about How to Display Line Chart Using Chart.js in MVC C# Jquery , Ajax Services. Already we seens  Chart.js PieCharts  and Doughnut Chart . In this section I am Using Sql Server Databse and Create One Ajax Services For Data Get. and Using  Chart.js  Tool. View Page:-          @{     Layout = null ; } < !DOCTYPE html > < html > < head >     < meta name ="viewport" content ="width=device-width" />     < title > DisplayLineChart </ title >     < script src ="https://code.jquery.com/jquery-1.12.4.js"></ script >     < script src ="~/Scripts/ChartJs/charts/Chart.bundle.min.js"></ script >     < script type ="text/javascript">         $(document).ready( function () {             Disp();         });         function Disp() {             var dataPts = [];             var xPts = [];
Read more