وارد کردن نمودار در کنترل Pie Chart از پایگاه داده SQL Server در Asp.net
با سلام در این مقاله با مثال توضیح خواهیم داد که چطور می توان نمودار ها را در ASP.Net با استفاده از کنترل نمودار جدید در ASP.Net 4.0 نمایش داد.
بانک اطلاعاتی
در اینجا از پایگاه Northwind استفاده می کنیم. شما می توانید آن را از اینجا دانلود کنید. دانلود Northwind پایگاه داده
کد HTML
در زیر کد HTML از صفحه است. این یک DropDownList و کنترل نمودار است. DropDownList متناسب با کشورهای مختلف جمعیت می گیرد و زمانی که یک کشور انتخاب می شود، نمودار با آمار شهرهای مختلف در کشور انتخاب شده است.
<asp:DropDownList ID="ddlCountries" runat="server" OnSelectedIndexChanged="ddlCountries_SelectedIndexChanged"
AutoPostBack = "true">
</asp:DropDownList><hr />
<asp:Chart ID="Chart1" runat="server" Height="300px" Width="400px" Visible = "false">
<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="0" />
</ChartAreas>
</asp:Chart>
فضاهای نام
شما باید نام فضاهای زیر را وارد کنید.
C #
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.UI.DataVisualization.Charting
جمع آوری DropDownList و نمودار
در رویداد بارگذاری صفحه، DropDownList کشورها از جدول سفارشات پایگاه داده Northwind پر شده است.
هنگامی که یک کشور در لیست DropDownList انتخاب شده است، سوابق آماری شهرهای فرستاده شده و کل سفارشات آنها از جدول سفارشات آورده شده است.
مقادیرفرستاده شده شهر به مقادیر نقطه X نمودار تعلق دارند، در حالی که ارزش کل سفارشات برای شهرهای فرستاده شده به مقادیر Y نمودار تعلق می گیرد.
در نهایت با استفاده از این مقادیر نمودار چیدمان و نمایش داده می شود.
C #
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string query = "select distinct shipcountry from orders";
DataTable dt = GetData(query);
ddlCountries.DataSource = dt;
ddlCountries.DataTextField = "shipcountry";
ddlCountries.DataValueField = "shipcountry";
ddlCountries.DataBind();
ddlCountries.Items.Insert(0, new ListItem("Select", ""));
}
}
protected void ddlCountries_SelectedIndexChanged(object sender, EventArgs e)
{
Chart1.Visible = ddlCountries.SelectedValue != "";
string query = string.Format("select shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", ddlCountries.SelectedValue);
DataTable dt = GetData(query);
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]);
}
Chart1.Series[0].Points.DataBindXY(x, y);
Chart1.Series[0].ChartType = SeriesChartType.Pie;
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Chart1.Legends[0].Enabled = true;
}
private static DataTable GetData(string query)
{
DataTable dt = new DataTable();
SqlCommand cmd = new SqlCommand(query);
String constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
SqlDataAdapter sda = new SqlDataAdapter();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
return dt;
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim query As String = "select distinct shipcountry from orders"
Dim dt As DataTable = GetData(query)
ddlCountries.DataSource = dt
ddlCountries.DataTextField = "shipcountry"
ddlCountries.DataValueField = "shipcountry"
ddlCountries.DataBind()
ddlCountries.Items.Insert(0, New ListItem("Select", ""))
End If
End Sub
Protected Sub ddlCountries_SelectedIndexChanged(sender As Object, e As EventArgs)
Chart1.Visible = ddlCountries.SelectedValue <> ""
Dim query As String = String.Format("select shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", ddlCountries.SelectedValue)
Dim dt As DataTable = GetData(query)
Dim x As String() = New String(dt.Rows.Count - 1) {}
Dim y As Integer() = New Integer(dt.Rows.Count - 1) {}
For i As Integer = 0 To dt.Rows.Count - 1
x(i) = dt.Rows(i)(0).ToString()
y(i) = Convert.ToInt32(dt.Rows(i)(1))
Next
Chart1.Series(0).Points.DataBindXY(x, y)
Chart1.Series(0).ChartType = SeriesChartType.Pie
Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
Chart1.Legends(0).Enabled = True
End Sub
Private Shared Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim cmd As New SqlCommand(query)
Dim constr As [String] = ConfigurationManager.ConnectionStrings("ConString").ConnectionString
Dim con As New SqlConnection(constr)
Dim sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
Return dt
End Function
تغییرات Web.Config
برای استفاده از کنترل ASP.Net 4.0 Chart، باید فایل Web.Config را به صورت زیر در قسمت زرد رنگ نشان دهید.
<configuration>
<appSettings>
<add key="ChartImageHandler" value="storage=file;timeout=20;" />
</appSettings>
<connectionStrings>
<add name="conString"
connectionString="Data Source=.\SQL2005;database=Northwind;Integrated Security=true"/>
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</assemblies>
</compilation>
<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>
</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>
عکس روی صفحه
