Display Canvasjs Line Chart using Data from Database

-

Aspx Page:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <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: "canvasjs.aspx/GETDT",
                data: {},
                success: function (data) {
                    var len = data.d.length;
                    for (var i = 0; i < len; i++) {
                         dataPts.push({
                            x: parseFloat(data.d[i].xval),
                            y: parseFloat(data.d[i].yval)
                        });
                    }

                    var chart = new CanvasJS.Chart("divchart",
                              {
                                  title: {
                                      text: "Canvas js"
                                  },
                                  data: [
                                     {
                                         type: "line",
                                         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:


        public class Det
        {
            public decimal xval;
            public decimal yval;
        }

        [WebMethod]
        public static object GETDT()
        {

            SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["blogger"].ToString());
            List<Det> obj = new List<Det>();
            cn.Open();

            DataTable dt = new DataTable();

            SqlCommand cmd = new SqlCommand();
            SqlDataAdapter da = new SqlDataAdapter("select * from tbl_canvasjs", cn);
            da.Fill(dt);
            cn.Close();

            foreach (DataRow dr in dt.Rows)
            {
                Det def = new Det();

                def.xval = Convert.ToDecimal(dr[1].ToString());
                def.yval = Convert.ToDecimal(dr[2].ToString());
                obj.Add(def);
            }
            return obj.ToArray();
        }

Database:

I am using Sql Server database.

Charts:
















Comments

  1. Shoyeb25 February 2016 at 10:50

    Dear Sir, This is really great example. I am searching this help from a long time. I will be glad if you send me full VS Project to my email. abumshoyeb@gmail.com

    ReplyDelete
    Replies
    1. Unknown26 February 2016 at 23:05

      Hi Shoyeb....Download Option Provided On this CanvasJs Ex Document.

      Delete

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