How to: Create a Drill-Down Chart

• Dec 17, 2023
• 5 minutes to read

Important

The approach demonstrated in this topic is outdated. Refer to the Drill Down document for instructions on how to create a drill-down chart.

This tutorial demonstrates how to create a drill-down chart, to display master-detail data in the same chart. Two series are used to achieve this. By clicking a point of the first series, another series is shown, which represents detailed data related to the selected point.

Note

The complete sample project is available in the DevExpress Code Central database at How to create a drill-down chart (for WinForms) and How to implement a multi-dimensional DrillDown feature (for ASP.NET). There, you can either run this example online or download an auto-executable sample.

To create a drill-down chart, do the following.

• Create a Chart and Bind it to Data
• Customize the Chart
• Handle Its MouseClick event
• Get the Result

Create a Chart and Bind it to Data

1. Start Microsoft Visual Studio, and create a new Windows Forms Application, or open an existing one.
2. Add a chart to the form.
3. Bind the chart to the “SalesPerson” view of the sample nwind.mdb file. For step-by-step guidance on this, perform steps 1-7 of the following tutorial (How to: Bind Individual Chart Series to Data).

4. To create series, click the chart’s smart tag, and choose Series… in its actions list. Then, the Series Collection Editor will be invoked.

   

   In this dialog, click Add…, to create the first series of the Pie view type.

   Switch to the dialog’s Properties tab, and for this series, set the Series.DataSource property to salesPersonBindingSource, SeriesBase.ArgumentDataMember property to SalesPerson, and the SummaryFunction to SUM([Extended Price]).

5. Now, add the second series - of the Bar view type. You’ll see the red notification informing you that this view is incompatible with the first visible series in the collection. So, leave the SeriesBase.Visible property of this series disabled - we’ll replace both series later in code.

   The same as for the first series, set its Series.DataSource property to salesPersonBindingSource, SeriesBase.ArgumentDataMember property to CategoryName, and SummaryFunction - to SUM([Extended Price]).

   In addition, via the SeriesBase.FilterString property of the Bar series, specify a data filter, whose DataFilter.ColumnName property is set to SalesPerson.

Customize the Chart

6. To add chart titles, select the chart, and click the ellipsis button for its ChartControl.Titles property.

   In the invoked Chart Title Collection Editor, click Add, to create a title. Set its Title.Text property to “Back to the main view…”, and the TitleBase.Visible property to false.

   Add another chart title ( with the “Sales by Person” text), and leave it visible.

7. For the first (Pie) series, set its PointOptions.ValueNumericOptions property to Percent.

   And in its SeriesBase.LegendTextPattern property, disable the PercentOptions.ValueAsPercent property, and set the PointOptions.PointView property to Argument.

8. To enable a Hit-testing functionality at runtime, set the ChartControl.RuntimeHitTesting property value to true.

Handle Its MouseClick event

Now, it’s only left to handle the chartControl1.MouseClick event. Write the following code.

C#

using System;
using System.Drawing;
using System.Windows.Forms;
using DevExpress.XtraCharts;
// ...

private void chartControl1_MouseClick(object sender, MouseEventArgs e) {
    // Obtain the object being clicked.
    ChartHitInfo hi = chartControl1.CalcHitInfo(e.X, e.Y);

    // Check whether it was a series point, and if so - 
    // obtain its argument, and pass it to the detail series.
    SeriesPoint point = hi.SeriesPoint;

    if (point != null) {
        string argument = point.Argument.ToString();

        // Flip the series.
        if (chartControl1.Series[0].Visible == true) {
            chartControl1.Series[0].Visible = false;

            chartControl1.Series[1].Name = argument;
            chartControl1.Series[1].Visible = true;

            // Since the new series determines another diagram's type,
            // you should re-define the axes properties.
            XYDiagram diagram = (XYDiagram)chartControl1.Diagram;
            diagram.AxisX.Label.Angle = -25;
            diagram.AxisY.NumericOptions.Format = NumericFormat.Currency;
            diagram.AxisY.NumericOptions.Precision = 0;

            chartControl1.Series[1].DataFilters[0].Value = argument;

            chartControl1.Titles[0].Visible = true;
            chartControl1.Titles[1].Text = "Personal Sales by Categories";
        }
    }

    // Obtain the title under the test point.
    ChartTitle link = hi.ChartTitle;

    // Check whether the link was clicked, and if so - 
    // restore the main series.
    if (link != null && link.Text.StartsWith("Back")) {
        chartControl1.Series[0].Visible = true;
        chartControl1.Series[1].Visible = false;

        link.Visible = false;
        chartControl1.Titles[1].Text = "Sales by Person";
    }
}

VB.NET

Imports System
Imports System.Drawing
Imports System.Windows.Forms
Imports DevExpress.XtraCharts
' ...

Private Sub chartControl1_MouseClick(ByVal sender As Object, _ 
ByVal e As MouseEventArgs) Handles chartControl1.MouseClick
    ' Obtain the object being clicked.
    Dim hi As ChartHitInfo = chartControl1.CalcHitInfo(e.X, e.Y)

    ' Check whether it was a series point, and if so - 
    ' obtain its argument, and pass it to the detail series.
    Dim point As SeriesPoint = hi.SeriesPoint

    If point IsNot Nothing Then
        Dim argument As String = point.Argument.ToString()

        ' Flip the series.
        If chartControl1.Series(0).Visible = True Then
            chartControl1.Series(0).Visible = False

            chartControl1.Series(1).Name = argument
            chartControl1.Series(1).Visible = True

            ' Since the new series determines another diagram's type,
            ' you should re-define axes properties.
            Dim diagram As XYDiagram = CType(chartControl1.Diagram, XYDiagram)
            diagram.AxisX.Label.Angle = -25
            diagram.AxisY.NumericOptions.Format = NumericFormat.Currency
            diagram.AxisY.NumericOptions.Precision = 0

            chartControl1.Series(1).DataFilters(0).Value = argument

            chartControl1.Titles(0).Visible = True
            chartControl1.Titles(1).Text = "Personal Sales by Categories"
        End If
    End If

    ' Obtain the title under the test point.
    Dim link As ChartTitle = hi.ChartTitle

    ' Check whether the link was clicked, and if so - 
    ' restore the main series.
    If link IsNot Nothing AndAlso link.Text.StartsWith("Back") Then
        chartControl1.Series(0).Visible = True
        chartControl1.Series(1).Visible = False

        link.Visible = False
        chartControl1.Titles(1).Text = "Sales by Person"
    End If
End Sub

Get the Result

The result is shown in the following image.