Display CanvasJs Column 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 Column chart"
                       },
                       data: [
                    {
                        type: "column",
                        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

Unable to perform operation on the item is locked in workspace

-
Image
Hi,  I am getting this issue last week. so I Fixed. I Will share the Solution. Some files struggle with another person's systems workspace. then you can't able to check-in in your TFS. The particular file was blocked or Locked in another person system so easily remove that person Workspace issue will be solved you can check-in your file into the TFS. tf workspace /delete /server:http://192.168.1.50:8080/tfs/projectname NCS-P01-001_2;R****h
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

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