Posts

Showing posts with the label linechart

Flex line charts: baseAtZero

baseAtZero... this little property helped save me a lot of code. The client didn't like that the charts were sometimes so squished because the charts always started at 0 but none of the data was close to the zero range. I was going to loop through the data in each chart and set the min and max... but then I discovered this property. <mx:verticalAxis> <mx:LinearAxis id="vaxis" baseAtZero="false"/> </mx:verticalAxis> All it does basically is stop the chart from forcing the vertical axis start at 0, and therefore starts it based on the data.

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; }

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...

a chart gutter

Note to self... you've seen this before, stop forgetting it... The area around a Flex chart where the axis lives is called the "gutter". There are 4 properties that control this: gutterLeft gutterRight gutterTop gutterBottom https://www.adobe.com/livedocs/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=charts_formatting_110_11.html Here is an example using chart gutters.