locked
barchart for asp.net using jquery RRS feed

  • Question

  • User-807418713 posted

    Hello

    My SQl Table Result set shows like this

    Mar-19 2000
    Apr-19 13,450
    May-19 8000

    I want to show this in bar chart with value like this below how to do using jquery or html or javascript

    Thank You

    Sunday, July 7, 2019 2:10 PM

Answers

  • User665608656 posted

    Hi Gopi.MCA,

    According to your code, I found that your .cs page is _Default, but when you call URL from the front desk, you refer to "Default.aspx/GetBarData".

    I suggest you use F12 to check the error reminder. 

    In short, you need to ensure that the url in ajax points to the correct page and returns the corresponding method's data.

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 12, 2019 6:31 AM

All replies

  • User665608656 posted

    Hi Gopi.MCA,

    According to your description,you have many choices to implement this function.

    For example, Chart.js, Morris.js, Canvas.js and so on,you may refer to: 20 best JavaScript charting libraries

    I used Chart.js to do an example, you can refer to the following code:

    First, you can use ajax with webmethod to get data from database and return them to from-desk.

    Then put these data into different array ,then use Chart.js to formate this bar.

    You also could refer to the official cases: char.js_bar

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
        <script>
            window.onload = function () {
                var dateArra = [];
                var countArra = [];
                var bgClorArra = ["Red", "Green", "Blue"];
                $.ajax({
                    type: "POST",
                    url: "WebForm_0708_2157482.aspx/GetBarData",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        $(result.d).find("Bar").each(function () {
                            var date = $(this).find('Date').text();
                            var count = parseInt($(this).find('Count').text());
                            dateArra.push(date);
                            countArra.push(count);
                        });
                        var ctx = document.getElementById("myChart");
                        var myChart = new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: dateArra,//x
                                datasets: [
                                    {
                                        label: 'DateCount',
                                        backgroundColor: bgClorArra,
                                        hoverBackgroundColor: bgClorArra,
                                        data: countArra,//y
                                    }
                                ]
                            },
                            options: {
                                legend: {
                                    display: true,
                                },
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true,
                                        },
                                    }]
                                },
                            }
                        });
                    },
                });
    
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="width: 800px; height: 500px">
                <canvas id="myChart"></canvas>
            </div>
        </form>
    </body>
    </html>
    

    code behind:

     public static DataTable BindData()
            {
                DataTable dt = new DataTable();
                SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
                conn.Open();
                SqlCommand cmd = new SqlCommand("select * from Result", conn);
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                DataSet ds = new DataSet();
                da.Fill(ds);
                dt = ds.Tables[0];
                conn.Close();
                return dt;
            }
            [WebMethod]
            public static string GetBarData()
            {
                DataTable dt = BindData();
                dt.TableName = "Bar";
                string result;
                using (StringWriter sw = new StringWriter())
                {
                    dt.WriteXml(sw);
                    result = sw.ToString();
                }
                return result;
            }

    The result of work demo:

    Best Regards,

    YongQing.

    Monday, July 8, 2019 7:06 AM
  • User-807418713 posted

    Hi Yongqing Yu

    Thanks For Your Reply

    This is my sql query

     
     
    SET ANSI_NULLS ON
    GO
    SET QUOTED_IDENTIFIER ON
    GO
    SET ANSI_PADDING ON
    GO
    CREATE TABLE [dbo].[Results](
    	[Date] [varchar](50) NULL,
    	[Count] [int] NULL
    ) ON [PRIMARY]
    GO
    SET ANSI_PADDING OFF
    GO
    INSERT [dbo].[Results] ([Date], [Count]) VALUES (N'Mar-19', 1400)
    INSERT [dbo].[Results] ([Date], [Count]) VALUES (N'Apr-19', 1200)
    INSERT [dbo].[Results] ([Date], [Count]) VALUES (N'May-19', 1400)
    

    I tried but not working why

    Thank You

    Thursday, July 11, 2019 7:32 PM
  • User665608656 posted

    Hi Gopi.MCA,

    According to your sql, I found that your table name is 'Results' not 'Result'.

    I suggest you that you should confirm that the name of the table in your code is the same as the name of the table created in sql.

    The name of the table in my last reply to you is 'Result'. If your code is the same as mine, you need to change it to 'Results' like below:

    If you also have any other issue,I hope you can provide your code and detailed information for me,which will help us sove your issue more easily.

     public static DataTable BindData()
            {
                DataTable dt = new DataTable();
                SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
                conn.Open();
                SqlCommand cmd = new SqlCommand("select * from Results", conn);
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                DataSet ds = new DataSet();
                da.Fill(ds);
                dt = ds.Tables[0];
                conn.Close();
                return dt;
            }

    Best Regards,

    YongQing.

    Friday, July 12, 2019 1:53 AM
  • User-807418713 posted

    Hello 

    This is my complete code i change Results to Result here is my below complete code not working 

    ASPX Page

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!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 runat="server">
        <title>Untitled Page</title>
        
         <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
       <script>
            window.onload = function () {
                var dateArra = [];
                var countArra = [];
                var bgClorArra = ["Red", "Green", "Blue"];
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetBarData",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        $(result.d).find("Bar").each(function () {
                            var date = $(this).find('Date').text();
                            var count = parseInt($(this).find('Count').text());
                            dateArra.push(date);
                            countArra.push(count);
                        });
                        var ctx = document.getElementById("myChart");
                        var myChart = new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: dateArra,//x
                                datasets: [
                                    {
                                        label: 'DateCount',
                                        backgroundColor: bgClorArra,
                                        hoverBackgroundColor: bgClorArra,
                                        data: countArra,//y
                                    }
                                ]
                            },
                            options: {
                                legend: {
                                    display: true,
                                },
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true,
                                        },
                                    }]
                                },
                            }
                        });
                    },
                });
    
            }
        </script>  
        
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
         <div style="width: 800px; height: 500px">
                <canvas id="myChart"></canvas>
            </div>
        </div>
        </form>
    </body>
    </html>
    

    CS Page

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;
    using System.Collections.Specialized;
    using System.Text;
    using System.Drawing;
    using System.IO;
    using System.Net;
    using System.Net.Mail;
    using System.Net.Configuration;
    using System.Web.Services;
    
    public partial class _Default : System.Web.UI.Page
    {
    
        public static DataTable BindData()
        {
            DataTable dt = new DataTable();
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["CHEMIMSConnectionString"].ConnectionString);
            conn.Open();
            SqlCommand cmd = new SqlCommand("select * from Result", conn);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);
            dt = ds.Tables[0];
            conn.Close();
            return dt;
        }
    
        [WebMethod]
        public static string GetBarData()
        {
            DataTable dt = BindData();
            dt.TableName = "Bar";
            string result;
            using (StringWriter sw = new StringWriter())
            {
                dt.WriteXml(sw);
                result = sw.ToString();
            }
            return result;
        }
    
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    }
    

    Im getting this resultset plain 

    Friday, July 12, 2019 3:31 AM
  • User665608656 posted

    Hi Gopi.MCA,

    According to your code, I found that your .cs page is _Default, but when you call URL from the front desk, you refer to "Default.aspx/GetBarData".

    I suggest you use F12 to check the error reminder. 

    In short, you need to ensure that the url in ajax points to the correct page and returns the corresponding method's data.

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 12, 2019 6:31 AM