Chart for Web Forms - How to Implement a Multi-Dimensional Drill-Down Feature

This example demonstrates how you can implement a multi-dimensional Drill-Down in the WebChartControl with callbacks only. The WebChartControl is dynamically updated without reposting the whole page to the server. The WebChartControl.EnableViewState property is set to false, since the WebChartControl is updated manually.

The ASPxClientWebChartControl.ObjectSelected client-side event handler initiates a callback to the server with the ASPxClientWebChartControl.PerformCallback() method.
All necessary data for this sample is contained in the DrillDownDataSet. The Page.Filter and Page.Show methods are used to filter the data and bind it to the WebChartControl correspondingly.
The Drill-Down functionality is implemented in the WebChartControl.CustomCallback event handler.

Example Code

WebSite/Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.XtraCharts.v13.1.Web, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.XtraCharts.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <dxchartsui:WebChartControl ID="WebChartControl1" runat="server"  Width="700px" Height="300px"
            EnableViewState="False"
            EnableClientSideAPI="True" 
            ClientInstanceName="chart" OnCustomCallback="WebChartControl1_CustomCallback" >

            <ClientSideEvents ObjectSelected="function(s, e) {
    var parameter = (e.additionalHitObject!=null?e.additionalHitObject.argument:&quot;&quot;);

    chart.PerformCallback(parameter);
    e.processOnServer = false;
}" ObjectHotTracked="function(s, e) {
    s.SetCursor((e.additionalHitObject != null) ? 'pointer' : 'default');    
}" />

        </dxchartsui:WebChartControl>
        <br />
    </form>
</body>
</html>

WebSite/Default.aspx.cs(vb)

C#
VB.NET

C#
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DevExpress.XtraCharts;
using DrillDownDataSetTableAdapters;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        if(!IsPostBack) {
            DrillDownDataSet ddds = new DrillDownDataSet();
            CategoriesTableAdapter cta = new CategoriesTableAdapter();

            cta.Fill(ddds.Categories);
            Session["DrillDownDataSet"] = ddds;
            Session["detailsLevel"] = 0;
            ShowCategories();
        }
    }

    private void ShowCategories() {
        // Create series
        Series categoriesSeries = new Series("Categories", ViewType.Bar);

        // Cpecify ScaleTypes
        categoriesSeries.ArgumentScaleType = ScaleType.Qualitative;
        categoriesSeries.ValueScaleType = ScaleType.Numerical;

        // Bound series to data
        categoriesSeries.DataSource = (Session["DrillDownDataSet"] as DrillDownDataSet).Categories;
        categoriesSeries.ArgumentDataMember = "CategoryName";
        categoriesSeries.ValueDataMembers.AddRange(new string[] { "CategoryID" });

        WebChartControl1.Series.Clear();
        WebChartControl1.Series.Add(categoriesSeries);
        WebChartControl1.DataBind();
    }

    private void ShowProducts() {
        // Create series
        Series productsSeries = new Series("Products", ViewType.Bar);

        // Cpecify ScaleTypes
        productsSeries.ArgumentScaleType = ScaleType.Qualitative;
        productsSeries.ValueScaleType = ScaleType.Numerical;

        // Bound series to data
        productsSeries.DataSource = (Session["DrillDownDataSet"] as DrillDownDataSet).Products;
        productsSeries.ArgumentDataMember = "ProductName";
        productsSeries.ValueDataMembers.AddRange(new string[] { "UnitPrice" });

        WebChartControl1.Series.Clear();
        WebChartControl1.Series.Add(productsSeries);
        WebChartControl1.DataBind();
    }

    private void ShowOrderDetails() {
        // Create series
        Series orderDetailsSeries = new Series("OrderDetails", ViewType.Bar);

        // Cpecify ScaleTypes
        orderDetailsSeries.ArgumentScaleType = ScaleType.Qualitative;
        orderDetailsSeries.ValueScaleType = ScaleType.Numerical;

        // Bound series to data
        orderDetailsSeries.DataSource = (Session["DrillDownDataSet"] as DrillDownDataSet).Order_Details;
        orderDetailsSeries.ArgumentDataMember = "OrderID";
        orderDetailsSeries.ValueDataMembers.AddRange(new string[] { "UnitPrice" });

        WebChartControl1.Series.Clear();
        WebChartControl1.Series.Add(orderDetailsSeries);
        WebChartControl1.DataBind();
    }

    private void FilterProducts(string categoryName) {
        DrillDownDataSet ddds = (Session["DrillDownDataSet"] as DrillDownDataSet);
        ProductsTableAdapter pta = new ProductsTableAdapter();

        ddds.Products.Clear();
        pta.FillBy(ddds.Products, categoryName);
    }

    private void FilterOrderDetails(string productName) {
        DrillDownDataSet ddds = (Session["DrillDownDataSet"] as DrillDownDataSet);
        Order_DetailsTableAdapter oda = new Order_DetailsTableAdapter();

        ddds.Order_Details.Clear();
        oda.FillBy(ddds.Order_Details, productName);
    }

    // Drill implementation
    protected void WebChartControl1_CustomCallback(object sender, DevExpress.XtraCharts.Web.CustomCallbackEventArgs e) {
        int detailsLevel = Convert.ToInt32(Session["detailsLevel"]);
        string argument = e.Parameter;

        if(argument != "") {
            // DrillDown
            if(detailsLevel == 0) {
                FilterProducts(argument);
                ShowProducts();
            }
            else  {
                if(detailsLevel == 1)
                    FilterOrderDetails(argument);
                ShowOrderDetails();
            }

            if(detailsLevel < 2)
                detailsLevel++;
        }
        else {
            // DrillUp
            if(detailsLevel > 0)
                detailsLevel--;

            if(detailsLevel == 0)
                ShowCategories();
            else if(detailsLevel == 1)
                ShowProducts();
        }

        Session["detailsLevel"] = detailsLevel;
    }
}

Visual Basic
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports DevExpress.XtraCharts
Imports DrillDownDataSetTableAdapters

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
            Dim ddds As New DrillDownDataSet()
            Dim cta As New CategoriesTableAdapter()

            cta.Fill(ddds.Categories)
            Session("DrillDownDataSet") = ddds
            Session("detailsLevel") = 0
            ShowCategories()
        End If
    End Sub

    Private Sub ShowCategories()
        ' Create series
        Dim categoriesSeries As New Series("Categories", ViewType.Bar)

        ' Cpecify ScaleTypes
        categoriesSeries.ArgumentScaleType = ScaleType.Qualitative
        categoriesSeries.ValueScaleType = ScaleType.Numerical

        ' Bound series to data
        categoriesSeries.DataSource = (TryCast(Session("DrillDownDataSet"), DrillDownDataSet)).Categories
        categoriesSeries.ArgumentDataMember = "CategoryName"
        categoriesSeries.ValueDataMembers.AddRange(New String() { "CategoryID" })

        WebChartControl1.Series.Clear()
        WebChartControl1.Series.Add(categoriesSeries)
        WebChartControl1.DataBind()
    End Sub

    Private Sub ShowProducts()
        ' Create series
        Dim productsSeries As New Series("Products", ViewType.Bar)

        ' Cpecify ScaleTypes
        productsSeries.ArgumentScaleType = ScaleType.Qualitative
        productsSeries.ValueScaleType = ScaleType.Numerical

        ' Bound series to data
        productsSeries.DataSource = (TryCast(Session("DrillDownDataSet"), DrillDownDataSet)).Products
        productsSeries.ArgumentDataMember = "ProductName"
        productsSeries.ValueDataMembers.AddRange(New String() { "UnitPrice" })

        WebChartControl1.Series.Clear()
        WebChartControl1.Series.Add(productsSeries)
        WebChartControl1.DataBind()
    End Sub

    Private Sub ShowOrderDetails()
        ' Create series
        Dim orderDetailsSeries As New Series("OrderDetails", ViewType.Bar)

        ' Cpecify ScaleTypes
        orderDetailsSeries.ArgumentScaleType = ScaleType.Qualitative
        orderDetailsSeries.ValueScaleType = ScaleType.Numerical

        ' Bound series to data
        orderDetailsSeries.DataSource = (TryCast(Session("DrillDownDataSet"), DrillDownDataSet)).Order_Details
        orderDetailsSeries.ArgumentDataMember = "OrderID"
        orderDetailsSeries.ValueDataMembers.AddRange(New String() { "UnitPrice" })

        WebChartControl1.Series.Clear()
        WebChartControl1.Series.Add(orderDetailsSeries)
        WebChartControl1.DataBind()
    End Sub

    Private Sub FilterProducts(ByVal categoryName As String)
        Dim ddds As DrillDownDataSet = (TryCast(Session("DrillDownDataSet"), DrillDownDataSet))
        Dim pta As New ProductsTableAdapter()

        ddds.Products.Clear()
        pta.FillBy(ddds.Products, categoryName)
    End Sub

    Private Sub FilterOrderDetails(ByVal productName As String)
        Dim ddds As DrillDownDataSet = (TryCast(Session("DrillDownDataSet"), DrillDownDataSet))
        Dim oda As New Order_DetailsTableAdapter()

        ddds.Order_Details.Clear()
        oda.FillBy(ddds.Order_Details, productName)
    End Sub

    ' Drill implementation
    Protected Sub WebChartControl1_CustomCallback(ByVal sender As Object, ByVal e As DevExpress.XtraCharts.Web.CustomCallbackEventArgs)
        Dim detailsLevel As Integer = Convert.ToInt32(Session("detailsLevel"))
        Dim argument As String = e.Parameter

        If argument <> "" Then
            ' DrillDown
            If detailsLevel = 0 Then
                FilterProducts(argument)
                ShowProducts()
            Else
                If detailsLevel = 1 Then
                    FilterOrderDetails(argument)
                End If
                ShowOrderDetails()
            End If

            If detailsLevel < 2 Then
                detailsLevel += 1
            End If
        Else
            ' DrillUp
            If detailsLevel > 0 Then
                detailsLevel -= 1
            End If

            If detailsLevel = 0 Then
                ShowCategories()
            ElseIf detailsLevel = 1 Then
                ShowProducts()
            End If
        End If

        Session("detailsLevel") = detailsLevel
    End Sub
End Class

Alessandro (DevExpress Support)

last modified a year ago

Modified: December 14, 2023 5:53 AM

Platform: ASP.NET Web Forms

Product: XtraCharts Suite

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Chart for Web Forms - How to Implement a Multi-Dimensional Drill-Down Feature

Files to Review

Example Code

Recently viewed tickets