ورود / ثبت نام
0
0

نمایش نمودار در ASP.Net به همراه دیتابیس SQL

653 بازدید
نمایش نمودار در ASP.Net

نمایش نمودار در ASP.Net

در این مقاله با آموزش نمایش نمودار در ASP.Net به همراه دیتابیس SQL آشنا میشود، سعی کردم در این مقاله بخش به بخش آموزش را به همراه سورس و تصویر براتون آماده کنم تا بهتر بتونید آموزش را درک کنید .مراحل این آموزش نمایش یک نمودار توسط یک جدول در دیتابیس SQL است که در ادامه کامل با آن آشنا خواهید شد.فایل نمونه نیز براتون ضمیمه کردم که امید وارم استفاده کنید.

خوب اول به جدول در SQL  سر میزنیم خوب جدول رو در دو شکل data  و design  نشان میدهم و اسکریپت آن را نیز براتون میزارم:

نمایش نمودار در ASP.Net

حالت design :

نمایش نمودار در ASP.Net

و اسکریپت جدول :


CREATE TABLE [dbo].[Employee](
[CompanyName] [varchar](50) NULL,
[EmployeeCode] [int] NOT NULL,
[EmployeeSupervisorCode] [int] NULL,
[EmployeeName] [varchar](50) NULL,
[ProjectName] [varchar](50) NULL,
[JoiningDate] [datetime] NULL,
[Experience] [varchar](50) NULL,
[Mobile] [varchar](15) NULL,
[Address] [varchar](50) NULL,
[CreatedDate] [datetime] NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
[EmployeeCode] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

خوب حالا برمیگردیم به vs  و در جعبه ابزار خود به دنبال کنترل Chart بگردید و انرا بر روی صفحه خود بندازید:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartControlDemo.aspx.cs" Inherits="ChartControlApplication.ChartControlDemo" %>
<%@ 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>Showing Employee Information in Chart</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="EmployeeChartInfo" runat="server" Height="450px" Width="550px">
<Titles>
<asp:Title ShadowOffset="3" Name="Items" />
</Titles>
<Legends>
<asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />
</Legends>
<Series>
<asp:Series Name="Default" />
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderWidth="1" />
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>

حالا نوبت به تنظیمات فایل WebConfig میرسد آنرا به شکل زیر تنظیم کنید:


<?xml version="1.0"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<appSettings>
<add key="ChartImageHandler" value="storage=file; timeout=20;" />
</appSettings>
<system.web>
<compilation debug="true" targetFramework="4.5">
<assemblies>
<add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</assemblies>
</compilation>
<httpRuntime targetFramework="4.5"/>
</system.web>

<system.webServer>
<handlers>
<remove name="ChartImageHandler" />
<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
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>

</configuration>

حالا در قسمت کد صفحه کد زیر را وارد کنید :

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.DataVisualization.Charting; 

namespace ChartControlApplication
{
 public partial class ChartControlDemo : System.Web.UI.Page
 {
 protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 GetEmployeeChartInfo();
 }
 } 

 private void GetEmployeeChartInfo()
 {
 DataTable dt = new DataTable();
 using (SqlConnection con = new SqlConnection(@"Data Source=MyPC\SqlServer2k8;Integrated Security=true;Initial Catalog=Test"))
 {
 con.Open();
 SqlCommand cmd = new SqlCommand("SELECT Address as Name, COUNT(EMPLOYEECODE) AS Total FROM Employee GROUP BY Address", con);
 SqlDataAdapter da = new SqlDataAdapter(cmd);
 da.Fill(dt);
 con.Close();
 }
 string[] x = new string[dt.Rows.Count];
 int[] y = new int[dt.Rows.Count];
 for (int i = 0; i < dt.Rows.Count; i++)
 {
 x[i] = dt.Rows[i][0].ToString();
 y[i] = Convert.ToInt32(dt.Rows[i][1]);
 } 

 EmployeeChartInfo.Series[0].Points.DataBindXY(x, y);
 EmployeeChartInfo.Series[0].ChartType = SeriesChartType.Pie;
 EmployeeChartInfo.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
 EmployeeChartInfo.Legends[0].Enabled = true;
 }
 }
}

کار تمام است اکنون می توانید برنامه خود را اجرا کنید.

 

نمایش نمودار در ASP.Net

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=11138
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
پاکان رحمانی
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد نمایش نمودار در ASP.Net به همراه دیتابیس SQL

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.