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

ASP.NET Chart Control sorting

Suggested Videos
Part 6 - Chart.DataBindTable Example
Part 7 - 3D Charts in ASP.NET
Part 8 Binding XML file to ASP.NET Chart Control

In this video we will discuss ASP.NET Chart Control sorting. This is continuation to Part 8. Please watch Part 8 before proceeding.

The end user should be able to sort chart data by StudentName and TotalMarks 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

The other DropDownList will contain the sort direction i.e

With the 2 DropDownLists and the chart control, the design of WebForm1.aspx should be as shown below. chart sorting

Here is the HTML used in the demo
<table style="font-family: Arial; border: 1px solid black">
        Sort By :
        <asp:DropDownList ID="ddlSortBy" AutoPostBack="true" runat="server"
            <asp:ListItem Text="Student Name" Value="StudentName"></asp:ListItem>
            <asp:ListItem Text="Total Marks" Value="TotalMarks"></asp:ListItem>
        Sort Direction :
        <asp:DropDownList ID="ddlSortDirection" AutoPostBack="true" runat="server"
            <asp:ListItem Text="Ascending" Value="ASC"></asp:ListItem>
            <asp:ListItem Text="Descending" Value="DESC"></asp:ListItem>
    <td colspan="2">
        <asp:Chart ID="Chart1" runat="server">
                <asp:Series Name="Series1">
                <asp:ChartArea Name="ChartArea1">

and the code for the code-behind file

using System;
using System.Data;

namespace ChartsDemo
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

    private void GetChartData(string sortExpression)
        DataSet ds = new DataSet();
        // Read the data from XML file into DataSet
        // Specify the column that contains values for X-AXIS
        Chart1.Series["Series1"].XValueMember = "StudentName";
        // Specify the column that contains values for Y-AXIS
        Chart1.Series["Series1"].YValueMembers = "TotalMarks";
        // Create the DataView
        DataView dataView = ds.Tables[0].DefaultView;
        // Specify how the data should be sorted
        dataView.Sort = string.IsNullOrEmpty(sortExpression) ?
            "TotalMarks ASC" : sortExpression;
        // Set sorted DataView as the DataSource for the Chart control
        Chart1.DataSource = dataView;
        // Finally call DataBind

    protected void ddlSortBy_SelectedIndexChanged(object sender, EventArgs e)
        // Sort the data based on the selections in the DropDownLists
        GetChartData(ddlSortBy.SelectedValue + " " + ddlSortDirection.SelectedValue);

    protected void ddlSortDirection_SelectedIndexChanged(object sender, EventArgs e)
        GetChartData(ddlSortBy.SelectedValue + " " + ddlSortDirection.SelectedValue);
} chart tutorial

1 comment:

  1. print special characters from entered string?

    reverse a string without using c# function like reverse?


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.