Please note: In an effort to better serve you, we are in the process of restructuring DevCenter.
In the process, we have moved many items that you may be used to finding in DevCenter over to the
Main Site. If you are having trouble locating something,
please try looking at the following places:
Chart drilling is the concept of allowing end users to interact with chart data elements so that the details that compose that data can be shown in a child chart. Chart drilling usually is implemented in such a way so that the end users can click on a chart data element and that will cause the details that compose that element to be fetched and then populated into the same chart. This article will discuss one way of achieving this functionality with the Infragistics WinChart
Before we begin, there are several rules that we will establish for this particular use case. After laying down these rules, we will be able to design and code the application to fit our requirements. Discrete Drill Levels We will know for sure that there are a total of three (3) levels of drilling. The Root will be known as “Level 1”, then we can drill into “Level 2” and then afterward, into “Level 3”. Each Drill level represents a distinct entity. “Level 1” represents the Customer entity, “Level 2” represents the Order entity and “Level 3” represents the Order Detail entity. The data will be retrieved from various tables from the Northwind Database located on an instance of SQL Server. Drill PathWhen drilling down into the levels, we are limited to drilling in sequence. What this means is that if I am in “Level 1” I cannot drill directly to “Level 3”. I can only drill to “Level 2”. Once I am in “Level 2” I can then drill into “Level 3”. When drilling back, we can skip levels and go to any previous level. For example, if I am on “Level 3”, I can jump directly to “Level 1” or “Level 2”. The reason behind this logic is a result of the need to start from the beginning and select a Customer from “Level 1”. This Customer’s ID is used to fetch the data that is used in “Level 2” and subsequently selecting a single order from “Level 2” allows us to expose the Order Details when we drill into “Level 3”. Due to this design, we really cannot just skip any levels when drilling down. When drilling up, it is possible because we already know what was selected previously.
Now that we have established the rules and requirements, let us take a look at how the application is built: User Interface Elements This form consists of one single WinChart which will have its DataSource as well as other properties (chart type, format labels, etc) changed whenever we move from level to level. Navigation elements to allow us to drill back will be represented by Link Labels. The Link Labels will have their text property changed each time we move from level to level with the value of the parameter that was used to get that level’s data. For example, if we click on a “Level 1” chart data element that represents the customer “Alfred Futterkist”, the Link Label for “Level 2” will have its text property changed to the parameter that was used to get the Orders for “Level 2” that belong to CustomerID “ALFKI”. Since we know there will only be three levels of drilling, we will have only three Link Labels. These will be arranged in such a way that reproduces the look and feel of a web site’s “bread crumb trail”. An additional UI feature that is implemented in this application is the use of three Label controls that show which current level we are in as well as the actual entity type that we are looking at. Whenever we move to a level, the Label control for that level is colored differently so that we know that the current data on the chart represents that particular entity.Some additional information on how the Link Labels as well as the standard Labels are placed on the Form is by first docking one standard Panel control against the top of the Form and docking another separate Panel against the bottom of the Form. Within each Panel, we place the three Link Labels (top panel) and the three Labels (bottom panel) and each label has its AutoSize property set to true. This is needed so that when we adjust the text string in each label, the control is resized accordingly. Each label is then docked against the left hand side. This causes the three labels to always be close and snug together in a dynamic fashion even when the text strings change. This results in a good looking breadcrumb style navigation element...Continued..