datatipfunction in a linechart

-
To customize the datatip in a linechart in flex you need to use the datatipfunction property that refers to a function. This function must return a string and take a parameter of type HitData. To get the current VALUE of the line point you're mousing over you need to use LineSeriesItem(hitData.chartItem).yValue - I found this difficult to find out at first.

Here's an example:

private function lcDataTipFunction(hitData:HitData):String
{
   var s:String;
   s = LineSeries(hitData.element).displayName + "\n";
   s += LineSeriesItem(hitData.chartItem).yValue + "\n";
   s += hitData.item.Day + " at " + hitData.item.Time;
   return s;
}

Comments

tomgutz said…
I was looking for some answers on the net for some flex challenges and stumbled on your page. In which I found out something else....You are the first girl i have seen using flex, very interesting indeed.

nice portfolio site as well.
April 9, 2009 at 4:52 PM
Mohito said…
you are my Man Friday.. thanks for the tip.. i have been struggling long on the dataTipFunction.

Thanks
September 1, 2009 at 1:17 AM
Anonymous said…
Dear Angel

Thank you for your very nice code about datatipfunction in linechart and friendly you are very cute.

BR
Farid Valipour
February 16, 2010 at 6:55 PM
ltlombardi said…
Thank you very much.
Canadians rule!
August 24, 2010 at 10:56 AM
Anonymous said…
Very helpful post, thank you.

Just to add, following imports are needed

import mx.charts.HitData;
import mx.charts.series.items.LineSeriesItem;

Also to note, dataTipFunction is declared under the Chart, not the line series.

- James S
March 16, 2011 at 12:34 PM
Post a Comment

Popular posts from this blog

Flex Advanced Data Grid collapses on refresh

-
I was having this problem with my Advanced Data Grid. Every time the data refreshed the whole thing collapsed, which isn't a good thing when users have drilled down 3 levels. I know this is probably a bad way of doing this, but it is the only way I could get to work. All the examples I've seen of this say to just assign the saved openNodes Object to the openNodes property, like this... myOpenNodes = new Object(); myOpenNodes = IHierarchicalCollectionView(myADG.dataProvider).openNodes //refresh here IHierarchicalCollectionView(myADG.dataProvider).openNodes = myOpenNodes; but that doesn't work!! Here is what I did: On the refresh method set the following variables (these variables need to be accessible from all methods inside the component, so put them in your model or make them global, whatever). These variables hold the state of the ADG before the refresh. //Object holding all currently open nodes myOpenNodes = new Object(); myOpenNodes = IHierarchicalCollectionView(myADG.d
Read more

Add and remove lineseries - Flex LineChart

-
This took me some time to figure out so I thought I would post about it. Main objective is to toggle on and off lineseries based on user input. Usually this would mean editing the dataprovider, tricky thing here is that I need the color of each line to always be the same based on data, so instead I leave the dataprovider alone and actually add and remove LineSeries to/from the LineChart. This probably isn't the best way to do this, but hey, it works, and it may help someone else out. Here we go... First lets start with the MXML: Here I have a Panel with a LineChart and a Legend inside it, as well as 3 Toggle Buttons. You will notice that there are no series inside the LineChart. <mx:Panel title="LineChart Example" height="500" width="100%" layout="vertical"> <mx:HBox id="choices" horizontalGap="0"> <mx:Button id="Profit" label="Profit" toggle="true" click="upda
Read more

Flex TabNavigator - tab click event?

-
So there doesn't seem to be any item click or tab click event on the tab navigator in Flex. I find this sort of annoying, I mean surely this would be useful and should be included? When searching all I could find was people saying to either use the change event on the tab navigator, (which didn't help me because I wanted my method to run even if you clicked on the currently selected tab) or to use a tab bar instead (which also didn't help me because I am using the SuperTabNavigator from flexlib). What I am doing is basically maximizing the tab when it is clicked, and minimizing it if it is clicked again. I found a solution. http://www.actionscript.org/forums/showthread.php3?t=135539 (post by stburns). You basically get the tab's button. It sounds weird, here's the code to how it works. private function creationComplete():void { for (var i:int=0; i<myTabNav.getChildren().length; i++) { var tab:Button = myTabNav.getTabAt(i); tab.ad
Read more