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

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

487 بازدید
نمودار دایره ای

نمودار دایره ای

در این مقاله نشان می دهیم که چگونه یک نمودار دایره ای Ajax Control Toolkit  را پیاده سازی کرده و به صورت داینامیک از SQL Server Database پر کنیم.

نمودار دایره ای

دیتابیس

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

لینک دیتابیس

نمودار دایره ای

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

  1. کنترل ToolScriptManager را انتخاب کرده و روی صفحه می اندازیم.
  2. بعد از اضافه کردن رفرنس کتابخانه AJAX Control Toolkit، آن را به صورت زیر Register می کنیم.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

کد HTML:

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

 

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

</cc1:ToolkitScriptManager>

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

    AutoPostBack="true">

</asp:DropDownList>

<hr />

<cc1:PieChart ID="PieChart1" runat="server" ChartHeight="300" ChartWidth = "۳۰۰"

    ChartType="Column" ChartTitleColor="#0E426C" Visible = "false">

</cc1:PieChart>

 

بر اساس انتخاب 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 داده های آماری وارد کردیم که به طور مثال در کدام شهر از کشور انتخاب شده، سفارشات توزیع می شوند.

[divider style=”normal” top=”20″ bottom=”20″] [box type=”shadow” align=”” class=”” width=””]

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

[/box] [divider style=”normal” top=”20″ bottom=”20″]

 

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

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) TotalOrders from orders where shipcountry = '{0}' group by shipcity", ddlCountries.SelectedItem.Value);

    DataTable dt = GetData(query);



    //Loop and add each datatable row to the Pie Chart Values

    foreach (DataRow row in dt.Rows)

    {

        PieChart1.PieChartValues.Add(new AjaxControlToolkit.PieChartValue

        {

            Category = row["ShipCity"].ToString(),

            Data = Convert.ToDecimal(row["TotalOrders"])

        });

    }

    PieChart1.Visible = ddlCountries.SelectedItem.Value != "";

}



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) TotalOrders from orders where shipcountry = '{0}' group by shipcity", ddlCountries.SelectedItem.Value)

    Dim dt As DataTable = GetData(query)



    'Loop and add each datatable row to the Pie Chart Values

    For Each row As DataRow In dt.Rows

        PieChart1.PieChartValues.Add(New AjaxControlToolkit.PieChartValue() With { _

         .Category = row("ShipCity").ToString(), _

         .Data = Convert.ToDecimal(row("TotalOrders")) _

        })

    Next

    PieChart1.Visible = ddlCountries.SelectedItem.Value <> ""

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)

            Usingspan> 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


نمودار دایره ای

 

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18586
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد نمودار دایره ای با استفاده از Ajax در ASP.NET

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

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

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