Drilling down into data

One common use of charts is to allow the user to drill
down into the data. This usually occurs when the user performs some
sort of event on the chart such as clicking on a wedge in a PieChart
control or clicking on a column in a ColumnChart control. Clicking
on a data item reveals a new chart that describes the make-up of
that data item.

For example, you might have a ColumnChart control that shows
the month-by-month production of widgets. To initially populate
this chart, you might make a database call (through a service or
some other adapter). If the user then clicks on the January column,
the application could display the number of widgets of each color
that were produced that month. To get the individual month’s widget
data, you typically make another database call and pass a parameter
to the listening service that describes the specific data you want.
You can then use the resulting data provider to render the new view.

Typically, when you drill down into chart data, you create new
charts in your application with ActionScript. When creating new
charts in ActionScript, you must be sure to create a series, add
it to the new chart’s series Array, and then call the addElement() method
(on Spark containers) or addChild() method (on
MX containers) to add the new chart to the display list. For more
information, see Creating charts in ActionScript.

One way to provide drill-down functionality is to make calls
that are external to the application to get the drill-down data.
You typically do this by using the chart’s itemClick event
listener, which gives you access to the HitData object. The HitData object
lets you examine what data was underneath the mouse when the event
was triggered. This capability lets you perform actions on specific
chart data. For more information, see Using the HitData object.

You can also use a simple Event object to get a reference to
the series that was clicked. The following example shows the net
worth of a fictional person. When you click on a column in the initial
view, the example drills down into a second view that shows the
change in value of a particular asset class over time.

The following example uses the Event object to get a reference
to the clicked ColumnSeries. It then drills down into the single
ColumnSeries by replacing the chart’s series Array with the single
ColumnSeries in the chart. When you click a column again, the chart
returns to its original configuration with all ColumnSeries.

Another approach to drilling down into chart data is to use unused
data within the existing data provider. You can do this by changing
the properties of the series and axes when the chart is clicked.

The following example is similar to the previous example in that
it drills down into the assets of a fictional person’s net worth.
In this case, though, it shows the value of the asset classes for
the clicked-on month in the drill-down view rather than the change
over time of a particular asset class.

This example uses the HitData object’s item property
to access the values of the current data provider. By building an
Array of objects with the newly-discovered data, the chart is able
to drill down into the series without making calls to any external
services.

Drilling down into data is an ideal time to use effects such
as SeriesSlide. This example also defines seriesIn and seriesOut effects
to slide the columns in and out when the drilling down (and the
return from drilling down) occurs.