Showing all datatips and Printing – Flex Column Chart

May 29, 2007

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.


8 Responses to “Showing all datatips and Printing – Flex Column Chart”

  1. sunban Says:

    There were some requests to show the datatips without initially hovering the mouse and to add code for stopping them from vanishing. So here is the code for that.

    you can do the following on creationcomplete

    private function init():void
    myChart.showDataTips = false;
    myChart.showDataTips = true;

    to force a call to show the datatips, without hovering the mouse on it.

    Also, you can add the following in your custom chart to avoid mouseevents from going to the chart, which would disrupt your datatips.

    public function MyColumnChart()
    //TODO: implement function

    private function onMouseOut(event:MouseEvent):void

  2. Hi,
    Nice one. manage to get it run.
    But it would be nicer if I can get rid of the “print” button there.. Appreciate any feed!

  3. Emerson Cardoso Says:

    Hi, I need to show all data tips but I’m using Flex 2, and I’ve tried to use your code but it simply didn’t make any difference in the application… I copied your code and changed the ChartContainer that was another variable in my code, but didn’t changed anything…

    What should I do ?


  4. Shameer Says:

    really cooooollll

  5. Subrata Says:

    How to add header and footer along with this for printing with out adding any label (i mean through action script)

    i have one header and one footer file which need to added dynamically while printing.

  6. Eduardo Says:


    You save my life!


  7. sagarika Says:

    to get all data tips you can just add this piece of code

    instead of setting to false and then true as given by sunban

  8. none Says:

    I love u. Thanks. This worked on Flex 3.4. I made some small tweets but your code was flawless. I want to be at Flex 4.6 or Flex 4.12 but cant get the time in my sprint to upgrade.

    rgds Volovski

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: