Chart data drill down examples

One thing the chart documentation lacks is examples of drilling down into data. This is critical for making charts that are interesting and fun to interact with. This blog entry includes two examples of drilling down into data.


Example #1

Here’s an example that 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.


Example #2

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.


More Info

You can download the documentation
and the source code for these examples.

Of course, these examples are nearly as exciting as what is going on over at Quietly Scheming, but hopefully they will get you started.

8 Responses to Chart data drill down examples

  1. Karl says:

    what if you have a variable number of column series? say you might have some project managers looking at 2 projects and some others looking at 10 projects.

  2. Matthew Horn says:

    If you have a variable number of series, you create the series with ActionScript rather than MXML. This is described here:http://livedocs.adobe.com/flex/201/html/charts_intro_108_06.htmlIs that what you mean?

  3. Charles Owen says:

    I am quite impressed by FLEX’s charting and drill-down capabilities.Is it possible to include this type of chart within other architectures, namely Java Server Pages?

  4. Matthew Horn says:

    Sure, the Flex charts can integrate with JSPs, just as they can with PHP pages, ASP.NET, etc. What you want to do is communicate with the wrapper — call methods in the JSP from the Flex app, and vice versa. To do this, you use the ExternalInterface API. Here are some links to get you started:http://learn.adobe.com/wiki/display/Flex/External+Interface (Getting Started)http://livedocs.adobe.com/flex/3/html/19_External_Interface_04.html (ActionScript usage)http://livedocs.adobe.com/flex/3/html/help.html?content=passingarguments_2.html (wrapper communication in Flex)

  5. Chris Pryor says:

    Is there ANY way to do this (Charting) with a 100% free solution Flex SDK ?? etc…?

  6. Edgar says:

    I came across the esria Dashboard for Flex 3.I am completly new to flex and pretty much to programming for that matter. I figure out that is I point the xml to url that points to an xml file I can get data. The problem that I have is with the drill down. Do you know or could you point me in the right direcction, I am trying to change the esria dashboard drill down to point to my xml file. any help at all is inmensly appreciatedThank you in advance

  7. rlull says:

    I notice that if you don’t move your mouse, the datatip from the previous chart is still visible after the drill down. Any ideas how to immediately hide the datatip when the transition occurs?

  8. shashank says:

    I need a drill down code in jsp