Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Fundamentals
   [Expand]Providing Data
   [Expand]Appearance Customization
   [Expand]End-User Features
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Collapse]Examples
    [Expand]General
    [Expand]Creating Charts
    [Expand]Chart Elements
    [Collapse]End-User Interaction
      How to: Implement a Custom Series Animation
      How to: Implement a Custom Pie Animation
      How to: Implement a Custom Bar Animation
      How to: Implement a Custom Marker Animation
      How to: Implement a Custom Funnel Animation
      How to: Determine which Chart Element Is Hovered by the Mouse Pointer
      How to: Determine which Series Point Is Located Under the Test Point
      How to: Use Chart Tooltips
      How to: Show Custom Information in a Crosshair Cursor Tooltip
      How to: Show Series Labels Only for Hot-tracked Points
      How to: Implement Custom Hot-Tracking and Selection
      How to: Provide a Custom Cursor for a Chart
      How to: Provide Interactive Editing for Series Points
      How to: Provide Interactive Editing for a Constant Line
      How to: Create a Drill-Down Chart
      How to: Perform an Action When Series Points are Selected
      How to: Format Values in a Crosshair Cursor via a Label's Patterns
      How to: Make a Diagram Scrollable and Limit the Visual and Whole Range of Its Axis
      How to: Individually Adjust Axes Scrolling (Runtime Sample)
      How to: Individually Adjust Axes Zooming (Runtime Sample)
      How to: Customize the Secondary Axis Range When Chart Zooming is Performed
      How to: Customize Grid Lines, Grid Snapping of the Chart Range Control Client
      How to: Invoke the Chart Wizard at Runtime
      How to: Change the Page Order in a Wizard
      How to: Add a New Page to a Wizard
      How to: Hide Certain Tabs on a Wizard's Page
      How to: Invoke the Chart Designer at Runtime
    [Expand]Producing Output
   [Expand]Additional Resources
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

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

    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.

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

Expanded Handle Its MouseClick event

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

Expanded Get the Result

The result is shown in the following image.

Expanded See Also

How would you rate this topic?​​​​​​​