Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Sorting ASP.NET Chart Control using Sort method

Suggested Videos
Part 7 - 3D Charts in ASP.NET
Part 8 Binding XML file to ASP.NET Chart Control
Part 9 - ASP.NET Chart Control sorting



In this video we will discuss sorting ASP.NET chart control using Sort() method. This is continuation to Part 9. Please watch Part 9 before proceeding.



To use Sort() method

Step 1 : Modify the HTML in WebForm1.aspx as shown below. Notice the sections highlighted in yellow. When "Student Name" is selected from the DropDownList we want to sort by AxisLabel and when "Total Marks" is selected we want to sort by Y values.
<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="Student Name" Value="AxisLabel"></asp:ListItem>
                <asp:ListItem Text="Total Marks" Value="Y"></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>
        <td colspan="2">
            <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 2 : Modify the code in the code-behind file as shown below.
using System;
using System.Data;
using System.Web.UI.DataVisualization.Charting;

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

        private void GetChartData()
        {
            DataSet ds = new DataSet();
            ds.ReadXml(Server.MapPath("~/Students.xml"));
            Chart1.Series["Series1"].XValueMember = "StudentName";
            Chart1.Series["Series1"].YValueMembers = "TotalMarks";
            Chart1.DataSource = ds;
            Chart1.DataBind();

            // Sorting
            if (ddlSortDirection.SelectedValue == "ASC")
            {
                Chart1.Series["Series1"].Sort(PointSortOrder.Ascending,
                    ddlSortBy.SelectedValue);
                // OR
                // Chart1.DataManipulator.Sort(PointSortOrder.Ascending,
                // ddlSortBy.SelectedValue, "Series1");
            }
            else
            {
                Chart1.Series["Series1"].Sort(PointSortOrder.Descending,
                    ddlSortBy.SelectedValue);
                // OR
                // Chart1.DataManipulator.Sort(PointSortOrder.Descending,
                // ddlSortBy.SelectedValue, "Series1");
            }
        }

        protected void ddlSortBy_SelectedIndexChanged(object sender, EventArgs e)
        {
            GetChartData();
        }

        protected void ddlSortDirection_SelectedIndexChanged(object sender, EventArgs e)
        {
            GetChartData();
        }
    }
}

References :
http://msdn.microsoft.com/en-us/library/vstudio/dd456762(v=vs.100).aspx

asp.net chart tutorial

1 comment:

  1. Dear Sir ,
    Thank u very much for your all videos .
    Please post some videos on mvc for login and session

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.