why chart not showing in my old asp.net application

Question

why chart not showing in my old asp.net application

RAVI 1,076

Hello

This is my aspx old page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<title>jQuery Google Pie Chart Example in asp.net</title>

// Global variable to hold data

google.load('visualization', '1', { packages: ['corechart'] });

</script>

$(function () {

$.ajax({

type: 'POST',

dataType: 'json',

contentType: 'application/json',

url: 'Default2.aspx/GetChartData',

data: '{}',

success:

function (response) {

drawchart(response.d);

},

error: function () {

alert("Error loading data! Please try again.");

}

});

})

function drawchart(dataValues) {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Column Name');

data.addColumn('number', 'Column Value');

for (var i = 0; i < dataValues.length; i++) {

data.addRow([dataValues[i].Countryname, dataValues[i].Total]);

}

new google.visualization.PieChart(document.getElementById('chartdiv')).

draw(data, { title: "Show Google Chart in Asp.net" });

}

</script>

</head>

<body>

</div>

</form>

</body>

</html>

This is my c# code

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.IO;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

public partial class Default2 : System.Web.UI.Page
{


    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static List<countrydetails> GetChartData()
    {
        DataTable dt = new DataTable();
         SqlConnection con1 = new SqlConnection(ConfigurationManager.ConnectionStrings["CHEMIMSConnectionString"].ConnectionString);
         con1.Open();
         SqlCommand cmd = new SqlCommand("select distinct name as name,value from Table_1", con1);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            con1.Close();
        
            List<countrydetails> dataList = new List<countrydetails>();
            foreach (DataRow dtrow in dt.Rows)
            {
                countrydetails details = new countrydetails();
                details.countryname = dtrow[0].ToString();
                details.total = Convert.ToInt32(dtrow[1]);
                dataList.Add(details);
            }
            return dataList;

        }

    public class countrydetails
    {
        private string Countryname;
        private int Total;

        public string countryname
        {
            get
            {
                return Countryname;
            }
            set
            {
                Countryname = value;
            }
        }

        public int total
        {
            get
            {
                return Total;
            }
            set
            {
                Total = value;
            }
        }

    }

}

This is my datbase table

 
/****** Object:  Table [dbo].[Table_1]    Script Date: 10/26/2023 18:18:22 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Table_1](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[name] [varchar](50) NULL,
	[value] [int] NULL,
 CONSTRAINT [PK_Table_1] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[Table_1] ON
INSERT [dbo].[Table_1] ([ID], [name], [value]) VALUES (1, N'aa', 10)
INSERT [dbo].[Table_1] ([ID], [name], [value]) VALUES (2, N'bb', 20)
INSERT [dbo].[Table_1] ([ID], [name], [value]) VALUES (3, N'cc', 30)
INSERT [dbo].[Table_1] ([ID], [name], [value]) VALUES (4, N'dd', 40)
SET IDENTITY_INSERT [dbo].[Table_1] OFF

on loading its not showing chart but no error

QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2023-10-27T08:46:30.0066667+00:00

Hi @RAVI

At first, I tested that your code didn't respond, so you need to reference the jQuery version.

<script src="Scripts/jquery-3.4.1.min.js"></script>

This version is based on the files inside your Scripts.

Here is my test result:

I suggest that you should return JSON data instead of list data in the backend. There may also be problems with external APIs

Best regards,

Qi You
RAVI 1,076 Reputation points

2023-10-27T11:18:28.4633333+00:00

can you give me one simple example that load data from database and shown in graph and pie chart and dougnut chart

Accepted answer

3 additional answers

Your answer

QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2023-10-27T08:46:30.0066667+00:00

Hi @RAVI

At first, I tested that your code didn't respond, so you need to reference the jQuery version.

<script src="Scripts/jquery-3.4.1.min.js"></script>

This version is based on the files inside your Scripts.

Here is my test result:

I suggest that you should return JSON data instead of list data in the backend. There may also be problems with external APIs

Best regards,

Qi You
RAVI 1,076 Reputation points

2023-10-27T11:18:28.4633333+00:00

can you give me one simple example that load data from database and shown in graph and pie chart and dougnut chart

Answer 1

Hi @RAVI

After my modifications to your code, I implemented your needs. This is full of complex data type conversions.

1.Open RouteConfig.cs

Modify the code:

public static class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        var settings = new FriendlyUrlSettings();
        settings.AutoRedirectMode = RedirectMode.Off;
        routes.EnableFriendlyUrls(settings);
    }
}

2.Modify the front-end code

<html>
 <head>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript" src="Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);
    $(function () {



        $.ajax({
            type: "Post",
            url: "Default2.aspx.aspx/GetChartData",
          
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success:
                function (response) {
                   
                    drawChart(response.d);
                    
                },
        });
    })
    function drawChart(dataValues) {
       
        var data = new google.visualization.DataTable();
        var list = [];
        data.addColumn('string', 'Column Name');

        data.addColumn('number', 'Column Value');
        dataValues.forEach((item) => {
            var value = [item.countryname, item.total];
            list.push(value);
        });
        data.addRows(list);
        var options = {
            'title': 'Show Google Chart in Asp.net',
            'width': 400,
            'height': 300
        };    
        var chart = new google.visualization.PieChart(document.getElementById('chartdiv'));
        chart.draw(data, options);
    }
</script>
</head>

<body>

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

<div id="chartdiv" style="width: 600px; height: 350px;">

</div>

</form>

</body>
</html>

Output:

Main problem: The parameter of data.addrows is list[list].

Best regards,

Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

RAVI 1,076

@QiYou-MSFT

Can you please give me chart example for older version of asp.net using my html c# and sql table data please

Thanking You

Answer 3

QiYou-MSFT 4,326 Microsoft External Staff

Hi @RAVI

Modify the code in RouteConfig .cs

 settings.AutoRedirectMode = RedirectMode.Off;

Add a jquery file:

<script src="Scripts/jquery-3.4.1.min.js"></script>

You can bring the back-end data to the front-end through AJAX.

As For the Google API, I'm not very familiar with it, I'm very sorry.

Best regards,
Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

QiYou-MSFT 4,326 Microsoft External Staff

Hi @RAVI

I made the changes based on your code (the parts I mentioned above and the project name).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication9.WebForm3" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery Google Pie Chart Example in asp.net</title>
<script type="text/javascript" src="Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="chartdiv" style="width: 600px; height: 350px;">
    <script type="text/javascript">

        $(function () {

          

            $.ajax({
                type: "POST",
                url: "WebForm3.aspx/GetChartData",
                //data: "{}",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (response) {
                
                    console.log(response.d);
                }
            });
        })
    </script>

</div>

</form>

</body>

</html>

namespace WebApplication9
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }

        [WebMethod]
        
        public static List<countrydetails> GetChartData()
        {
            DataTable dt = new DataTable();
            SqlConnection con1 = new SqlConnection("Data Source = LocalHost; Integrated Security = SSPI; Initial Catalog = Test;");
            con1.Open();
            SqlCommand cmd = new SqlCommand("select distinct  name,value from Table_1", con1);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            con1.Close();

            List<countrydetails> dataList = new List<countrydetails>();
            foreach (DataRow dtrow in dt.Rows)
            {
                countrydetails details = new countrydetails();
                details.countryname = dtrow[0].ToString();
                details.total = Convert.ToInt32(dtrow[1]);
                dataList.Add(details);
            }
            return dataList;
        }


        public class countrydetails
        {
            private string Countryname;
            private int Total;

            public string countryname
            {
                get
                {
                    return Countryname;
                }
                set
                {
                    Countryname = value;
                }
            }

            public int total
            {
                get
                {
                    return Total;
                }
                set
                {
                    Total = value;
                }
            }

        }
    }
}

Best Regards

Qi You

Answer 4

RAVI 1,076

Can you please help me with one things

copy my database table i want to show that table data in chart using simple solution using asp.net c#

please make one simple example

thanks

Share via

why chart not showing in my old asp.net application

3 additional answers

Your answer