Chart Control sorting

The end user should be able to sort chart data by EmployeeName and Salary in ascending and descending order. To support this we want 2 DropDownLists on the WebForm1.aspx
One DropDownList will contain the fields to sort the data by i.e
StudentName
TotalMarks
The other DropDownList will contain the sort direction i.e
Ascending
Descending

Step 1: Add Employee.xml to project

<?xml version="1.0" encoding="utf-8" ?>

<Employees>

  <Employee>

    <ID>1</ID>

    <EmployeeName>Srinath</EmployeeName>

    <Salary>50000</Salary>

  </Employee>

  <Employee>

    <ID>2</ID>

    <EmployeeName>Naveen</EmployeeName>

    <Salary>60000</Salary>

  </Employee>

  <Employee>

    <ID>3</ID>

    <EmployeeName>Krishna</EmployeeName>

    <Salary>70000</Salary>

  </Employee>

 

</Employees>

Step 2:Here is the HTML code in Webform1.aspx

<table style="font-family: Arial; border: 1px solid black">

            <tr>

                <td>

                    Sort By :

                    <asp:DropDownList ID="ddlSortBy" AutoPostBack="true" runat="server"

                        onselectedindexchanged="ddlSortBy_SelectedIndexChanged">

                        <asp:ListItem Text="Employee Name" Value="EmployeeName"></asp:ListItem>

                        <asp:ListItem Text="Salary" Value="Salary"></asp:ListItem>

                    </asp:DropDownList>

                </td>

                <td>

                    Sort Direction :

                    <asp:DropDownList ID="ddlSortDirection" AutoPostBack="true" runat="server"

                        onselectedindexchanged="ddlSortDirection_SelectedIndexChanged">

                        <asp:ListItem Text="Ascending" Value="ASC"></asp:ListItem>

                        <asp:ListItem Text="Descending" Value="DESC"></asp:ListItem>

                    </asp:DropDownList>

                </td>

            </tr>

            <tr>

                <asp:Chart ID="Chart1" runat="server">

                    <Series>

                        <asp:Series Name="Series1">

                        </asp:Series>

                    </Series>

                    <ChartAreas>

                        <asp:ChartArea Name="ChartArea1">

                        </asp:ChartArea>

                    </ChartAreas>

                </asp:Chart>

                </td>

            </tr>

        </table>

Step 3: Write the code in Webform1.aspx.cs file

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

namespace Binding_XML_file_to_ASP.NET_Chart_Control

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                // Use the default sort - Sort by TotalMarks in Ascending order

                GetChartData(null);

            }

           

        }

        private void GetChartData(string sort)

        {

            DataSet ds = new DataSet();

            ds.ReadXml(Server.MapPath("~/Employee.xml"));

            Chart1.Series["Series1"].XValueMember = "EmployeeName";

            Chart1.Series["Series1"].YValueMembers = "Salary";

            DataView dataview = ds.Tables[0].DefaultView;

            dataview.Sort = string.IsNullOrEmpty(sort) ? "Salary ASC" : sort;

            Chart1.DataSource = dataview;

            Chart1.DataBind();

        }

        protected void ddlSortBy_SelectedIndexChanged(object sender, EventArgs e)

        {

            GetChartData(ddlSortBy.SelectedValue + " " + ddlSortDirection.SelectedValue);

        }

        protected void ddlSortDirection_SelectedIndexChanged(object sender, EventArgs e)

        {

            GetChartData(ddlSortBy.SelectedValue + " " + ddlSortDirection.SelectedValue);

        }

    }

}

Run the Application