Interactive Legends and Axes

September 7, 2007

I was reading this post by Kyle Quevillon on Interactive Legend and it is one of the most useful features when there are multiple series in your chart. We have added a similar functionality in Flex 3 Multiple Axis, where in if the user hovers around the axis, then the corresponding series will get highlighted. This is controlled by the highlightElements flag in the AxisRenderer class, if you have tried out this then do comment on how useful such interactions will be, especially in cases, where there are multiple axes and series on your chart.

Well, this has been a long pending item for me to post, I have been telling my colleague Raghu that I will post it, but delayed it for sometime. This example queries the amazon store by calling their web services and display the search results in a Datagrid, thanks to Raghu , who had shared the datagrid piece of code.

The code also plays around with the resultset and displays the customer reviews and ratings as a column chart, just like how amazon does in its reviews page.

 This should help anybody, who want to get data from Amazon.

Here is a screenshot of the application.

amazonws.jpg 

Here is the source Amazon.mxml 

Note: For showing all datatips in Flex 3, the showAllDataTips property could be set to true, the following method could be used if you are using Flex 2.0.1.

This is a sample to show all datatips in a column chart and to print the same. Flex Charting APIs do provide some methods, which could be overridden to accomplish this.

I have overriden findDataPoints in ColumnChart, and extended ColumnSeries, to use certain protected properties like renderData. However, there are some hacks in the MyColumnSeries code to get some things like dataTipFunction, which will be used to display the text. Also, on mouseout the datatips vanish, but one could add an event listener to this and avoid this.

The print functionaility uses the PrintJob class and avoids using FlexPrintJob. FlexPrintJob uses an object which has to be of type UIComponent, but the datatips are children of the systemManager and hence will not work if FlexPrintJob is used. I have used the defaults for PrintJob, it could be changed to suit your needs.

This sample targets only the column chart, however could be extended to whatever chart or series one wants.

Here is a screenshot of the same.
Screenshot of all datatips

I have put the following files in a pdf (don’t know how to circumvent these extensions for uploading)

Here is the pdf, Code for column.mxml, MyColumnChart.mxml, MyColumnSeries.mxml

Do leave back a comment, if you find this useful.