Simple Graph Chart Required For Asp.net c# MS SQL

RAVI 896

Hello

This is my table data

 
/****** Object:  Table [dbo].[Table_2]    Script Date: 03/28/2024 11:06:28 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Table_2](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[JAN] [float] NULL,
	[FEB] [float] NULL,
	[MAR] [float] NULL,
	[APR] [float] NULL,
 CONSTRAINT [PK_Table1] 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 IDENTITY_INSERT [dbo].[Table_2] ON
INSERT [dbo].[Table_2] ([ID], [JAN], [FEB], [MAR], [APR]) VALUES (1, 10000, 5000, 15000, 30000)
SET IDENTITY_INSERT [dbo].[Table_2] OFF

I need to show simple graph like this below that will be free and easy to use in c# our aspx page is in old asp.net version

12345

Thanking you

Lan Huang-MSFT 25,556 Microsoft Vendor

Hi @RAVI,

You can use the ASP.Net Chart control, you need to configure it first.

Make sure to add the reference (System.Web.DataVisualization.dll): (right click on the project->Add->Reference->Assemblies->Check System.Web.DataVisualization.dll)

Web.Config

<appSettings>
  <add key="ChartImageHandler" value="storage=file;timeout=20;" />
</appSettings>


<compilation targetFramework="4.0">
 <assemblies>
  <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
 </assemblies>
</compilation>

<system.webServer>

<handlers>
      <add name="ChartImg" verb="*" path="ChartImg.axd"  type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  />
    </handlers>
</system.webServer>

Add this at the top of your aspx page:

<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

All code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
       <asp:Chart ID="Chart1" runat="server" Width="488px">  
        <series>  
            <asp:Series Name="Series1" IsValueShownAsLabel="true">  
            </asp:Series>  
        </series>  
        <chartareas>  
            <asp:ChartArea Name="ChartArea1">  
                 <AxisY>
                      <MajorGrid Enabled="true" LineColor="Gray"   />
                 </AxisY>
                <AxisX>
                     <MajorGrid Enabled="true" LineColor="Gray"   />
                </AxisX>
            </asp:ChartArea>  
        </chartareas>  
</asp:Chart>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
{
   
    SqlConnection hcon1 = new SqlConnection(ConfigurationManager.ConnectionStrings["ConString"].ConnectionString);
    hcon1.Open();
    DataSet ds = new DataSet();
    SqlDataAdapter da = new SqlDataAdapter("select * from Table2", hcon1);
    da.Fill(ds);
    DataTable ChartData = ds.Tables[0];
    //storing total rows count to loop on each Record    
    string[] XPointMember = new string[ChartData.Rows.Count];
    int[] YPointMember = new int[ChartData.Rows.Count];
    for (int count = 0; count < ChartData.Rows.Count; count++)
    {
        //storing Values for X axis    
        XPointMember[count] = ChartData.Rows[count]["Month"].ToString();
        //storing values for Y Axis    
        YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Quantity"]);
    }
    //binding chart control    
    Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);  
 
    //setting Chart type     
    Chart1.Series[0].ChartType = SeriesChartType.Column;
    //Chart1.Series[0].ChartType = SeriesChartType.StackedColumn;    
  
 
    Chart1.ChartAreas["ChartArea1"].AxisY.Interval = 2500;
    //Enabled 3D    
    //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;    
    hcon1.Close();
}

User's image

In addition, there is something wrong with your table design. Please refer to the table below.

CREATE TABLE [dbo].[Table2] (
    [Id]       INT           NOT NULL,
    [Month]    NVARCHAR (50) NULL,
    [Quantity] FLOAT (53)    NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

Best regards,
Lan Huang

RAVI 896 Reputation points

2024-03-30T11:54:32.9366667+00:00

Hello

we need for our old asp.net version so we want to use any free simple chart so any other best free google or any other chart we can use for my requriment instead of asp chart

thanks

Lan Huang-MSFT 25,556 Microsoft Vendor

Hi @RAVI,

You can create charts using the Google Charts API.

<!DOCTYPE html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            title: 'Test',
            width: 600,
            height: 400,
            bar: { groupWidth: "70%" },
            legend: { position: "none" },
            isStacked: true,            
        };
        $.ajax({
            type: "POST",
            url: "WebForm4.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.ColumnChart($("#chart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>
<div id="chart" style="width: 900px; height: 500px;">
</div>

 [WebMethod]
 public static List<object> GetChartData()
 {
     string query = "SELECT * from Table2";
   
     string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
     List<object> chartData = new List<object>();
     chartData.Add(new object[]
     {
 "Month", "Quantity"
     });
     using (SqlConnection con = new SqlConnection(constr))
     {
         using (SqlCommand cmd = new SqlCommand(query))
         {
             cmd.CommandType = CommandType.Text;
             cmd.Connection = con;
             con.Open();
             using (SqlDataReader sdr = cmd.ExecuteReader())
             {
                 while (sdr.Read())
                 {
                     chartData.Add(new object[]
                     {
                 sdr["Month"], sdr["Quantity"]
                     });
                 }
             }
             con.Close();
             return chartData;
         }
     }
 }

CREATE TABLE [dbo].[Table2] (
    [Id]       INT           NOT NULL,
    [Month]    NVARCHAR (50) NULL,
    [Quantity] FLOAT (53)    NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

RAVI 896

Hello

Im getting this error

jsapi_compiled_default_module.js:300 Uncaught Error: Data for arrayToDataTable is not an array.

at Object.gvjs_Mk [as arrayToDataTable] (jsapi_compiled_default_module.js:300:50)

at Object.success (Default3.aspx:44:49)

at l (jquery.min.js:2:16996)

at Object.fireWith [as resolveWith] (jquery.min.js:2:17783)

at T (jquery.min.js:2:80993)

at XMLHttpRequest.r (jquery.min.js:2:86563)

Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor

2024-04-01T08:41:23.9966667+00:00

Hi @RAVI,

There is a problem with the data you returned. Is it json? You can modify the arrayToDataTable line like this:

var Data = google.visualization.arrayToDataTable($.parseJSON(chartData));

If it still doesn't work, you'd better provide your code so that we can locate your problem.

RAVI 896

Hello

This is my aspx page

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

<!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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            title: 'Test',
            width: 600,
            height: 400,
            bar: { groupWidth: "70%" },
            legend: { position: "none" },
            isStacked: true,            
        };
        $.ajax({
            type: "POST",
            url: "Default3.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable($.parseJSON(chartData));
                var chart = new google.visualization.ColumnChart($("#chart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
  
<div id="chart" style="width: 900px; height: 500px;">
</div>
    </div>
    </form>
</body>
</html>

This is my c# code behind

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

public partial class Default3 : System.Web.UI.Page
{
    [WebMethod]
    public static List<object> GetChartData()
    {
        string query = "SELECT * from Table2_Month_Qty";

        string constr = ConfigurationManager.ConnectionStrings["CHEMIMSConnectionString"].ConnectionString;
        List<object> chartData = new List<object>();
        chartData.Add(new object[]
     {
 "Month", "Quantity"
     });
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        chartData.Add(new object[]
                     {
                 sdr["Month"], sdr["Quantity"]
                     });
                    }
                }
                con.Close();
                return chartData;
            }
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Page load empty

RAVI 896

after changing the error code as below

:58384/favicon.ico:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

Default3.aspx:30 Uncaught ReferenceError: chartData is not defined

at Object.success (Default3.aspx:30:78)

at l (jquery.min.js:2:16996)

at Object.fireWith [as resolveWith] (jquery.min.js:2:17783)

at T (jquery.min.js:2:80993)

at XMLHttpRequest.r (jquery.min.js:2:86563)

Accepted answer

Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor

2024-04-02T06:55:28.61+00:00
Hi @RAVI,

You are using the code I provided and I tested it to work. I guess this might be a version issue. What version are you currently using?

I retested a method, you can try it.

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var chartData = <%= GetChartDataJson() %>; google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { var options = { title: 'Test', width: 600, height: 400, bar: { groupWidth: "70%" }, legend: { position: "none" }, isStacked: true, }; var data = google.visualization.arrayToDataTable(chartData); var chart = new google.visualization.ColumnChart($("#chart")[0]); chart.draw(data, options); } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="chart" style="width: 900px; height: 500px;"> </div> </div> </form> </body> </html>

using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; namespace WebApplication4 { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected string GetChartDataJson() { List<object> chartData = GetChartData(); return JsonConvert.SerializeObject(chartData); } public static List<object> GetChartData() { string query = "SELECT * from Table2_Month_Qty"; string constr = ConfigurationManager.ConnectionStrings["CHEMIMSConnectionString"].ConnectionString; List<object> chartData = new List<object>(); chartData.Add(new object[] { "Month", "Quantity" }); using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand(query)) { cmd.CommandType = CommandType.Text; cmd.Connection = con; con.Open(); using (SqlDataReader sdr = cmd.ExecuteReader()) { while (sdr.Read()) { chartData.Add(new object[] { sdr["Month"], sdr["Quantity"] }); } } con.Close(); return chartData; } } } } }

Best regards,
Lan Huang

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.
Please sign in to rate this answer.
RAVI 896 Reputation points

2024-04-04T15:13:10.6066667+00:00

I'm using older asp.net version framework i tried above code for my old solutions its not worked

anything which works in asp.net older versions

Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor

2024-04-05T01:13:01.7566667+00:00

Hi @RAVI,

Which old version are you using? I tested it in .net framework 2.0 and it works.

What is the error message?

RAVI 896 Reputation points

2024-04-05T05:22:51.7533333+00:00

I got this error
if anything without json direct using jquery

Compilation Error

__Description:__An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. __Compiler Error Message:__CS0103: The name 'JsonConvert' does not exist in the current context Source Error:

Line 11: { Line 12: List<object> chartData = GetChartData(); Line 13: return JsonConvert.SerializeObject(chartData); Line 14: } Line 15: public static List<object> GetChartData()

Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor

2024-04-05T05:49:25.1666667+00:00

Hi @RAVI,

You can see that my code above has a reference to using Newtonsoft.Json; you'll need to download that.

In VS

Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor

2024-04-08T06:39:29.91+00:00

Hi @RAVI,

May I know if you have got any chance to check my reply?

I am glad to help if you have any other questions.

Thanks for your cooperation.

RAVI 896 Reputation points

2024-04-10T07:35:30.8333333+00:00

i need any other method istead of newtonsoft.json

it would be helpful if you make any simple using jquery or javascript and simple chart using without any nugut

thanking you

thanks alot

Lan Huang-MSFT 25,556 Reputation points Microsoft Vendor

2024-04-10T09:24:39.5966667+00:00

Hi @RAVI,Unfortunately, as far as I know there is no other way. I offer three methods. The second method I provided is implemented with jquery, but you need to use the [WebMethod] method, but your version is too old to use it. (I'm guessing your version is .net Framework 2.0, which is no longer supported).

If you don't want to use the newtonsoft.json package, please upgrade your .NET version first.

https://learn.microsoft.com/en-us/dotnet/framework/migration-guide/how-to-configure-an-app-to-support-net-framework-4-or-4-5
Sign in to comment



`Line 11: { Line 12: List<object> chartData = GetChartData(); Line 13: return JsonConvert.SerializeObject(chartData); Line 14: } Line 15: public static List<object> GetChartData()`

Simple Graph Chart Required For Asp.net c# MS SQL

0 additional answers