How to: Create a Drill-Down Chart

  • 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

  1. Start MS Visual Studio (2008 or 2010), 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.

    CreateUnboundChart01.png

    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 SeriesBase.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 SeriesBase.SummaryFunction - to SUM([Extended Price]).

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

Customize the Chart

  1. 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.

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

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

  3. 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.


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";
    }
}

Get the Result

The result is shown in the following image.

DrillDownChart_Result

See Also