آموزش ساخت نمودار خطی با استفاده از Ajax در ASP.NET

در این مقاله نشان می دهیم که چگونه یک نمودار خطی Ajax Control Toolkit  را پیاده سازی کرده و به صورت داینامیک از SQL Server Database پر کنیم. این آموزش در زبان های C# و VB.NET آموزش داده شده است.

دیتابیس

در این مقاله از دیتابیس Northwind مایکروسافت استفاده کردیم که می توانید آن را از لینک زیر دانلود نمایید.

لینک دیتابیس

استفاده از کنترل ASP.Net AJAX Line Chart

1. کنترل ToolScriptManager را انتخاب کرده و روی صفحه می اندازیم.
2. بعد از اضافه کردن رفرنس کتابخانه AJAX Control Toolkit، آن را به صورت زیر Register می کنیم.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

کد HTML:

ای کد بسیار ساده است و شامل یک DropDownList و یک Control Toolkit Line Chart می باشد.

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</cc1:ToolkitScriptManager>

<asp:DropDownList ID="ddlCountries" runat="server" OnSelectedIndexChanged="ddlCountries_SelectedIndexChanged"

AutoPostBack="true">

</asp:DropDownList>

<hr />

<cc1:LineChart ID="LineChart1" runat="server" ChartHeight="300" ChartWidth = "450"

ChartType="Basic" ChartTitleColor="#0E426C" Visible = "false"

CategoryAxisLineColor="#D08AD9" ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

</cc1:LineChart>

بر اساس انتخاب DropDownList نمودار خطی به صورت داینامیک از دیتابیس پر می شود.

فضاهای نام:

فضای نام های زیر باید به برنامه اضافه شود:

C#:

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

VB.Net:

Imports System.Data

Imports System.Data.SqlClient

Imports System.Configuration

پرکردن DropDownList و نمودار  خطی

در رویداد Page Load، DropDownList را از دیتابیس Northwind با لیستی از کشورها پر کردیم که سفارشات به آن ها ارسال می شود.

سپس در رویداد SelectedIndexChanged مربوط به DropDownList داده های آماری وارد کردیم که به طور مثال در کدام شهر از کشور انتخاب شده، سفارشات توزیع می شوند.

این اطلاعات آماری به عنوان نمودار خطی نمایش داده می شوند که محور نمودار شهرهای کشور انتخاب شده می باشند که مقدار سفارشات هر شهر را نشان می دهند.

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)

{

string query = string.Format("select shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", ddlCountries.SelectedItem.Value);

DataTable dt = GetData(query);

 

string[] x = new string[dt.Rows.Count];

decimal[] y = new decimal[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]);

}

LineChart1.Series.Add(new AjaxControlToolkit.LineChartSeries { Data = y });

LineChart1.CategoriesAxis = string.Join(",", x);

LineChart1.ChartTitle = string.Format("{0} Order Distribution", ddlCountries.SelectedItem.Value);

if (x.Length > 3)

{

LineChart1.ChartWidth = (x.Length * 75).ToString();

}

LineChart1.Visible = true;

}

&nbsp;

private static DataTable GetData(string query)

{

DataTable dt = new DataTable();

string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

using (SqlConnection con = new SqlConnection(constr))

{

using (SqlCommand cmd = new SqlCommand(query))

{

using (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)

Dim query As String = String.Format("select shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", ddlCountries.SelectedItem.Value)

Dim dt As DataTable = GetData(query)

 

Dim x As String() = New String(dt.Rows.Count - 1) {}

Dim y As Decimal() = New Decimal(dt.Rows.Count - 1) {}

For i As Integer = ۰ To dt.Rows.Count - 1

x(i) = dt.Rows(i)(0).ToString()

y(i) = Convert.ToInt32(dt.Rows(i)(1))

Next

LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With { _

.Data = y _

})

LineChart1.CategoriesAxis = String.Join(",", x)

LineChart1.ChartTitle = String.Format("{0} Order Distribution", ddlCountries.SelectedItem.Value)

If x.Length > 3 Then

LineChart1.ChartWidth = (x.Length * 75).ToString()

End If

LineChart1.Visible = True

End Sub

 

Private Shared Function GetData(query As String) As DataTable

Dim dt As New DataTable()

Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString

Using con As New SqlConnection(constr)

Using cmd As New SqlCommand(query)

Using sda As New SqlDataAdapter()

cmd.CommandType = CommandType.Text

cmd.Connection = con

sda.SelectCommand = cmd

sda.Fill(dt)

End Using

End Using

Return dt

End Using

End Function