Drawing on Flex Chart

Question

I've created a line chart in flex and it works like expected. Now, I would like to add shading to the background for specific information. For example, this chart - http://research.stlouisfed.org/fred2/graph/?id=TOTALSL,TOTALNS, - shows a shaded background for recessions. How would I mimic this shading in a Flex linechart?

Thanks

asawilliams asawilliams · Accepted Answer · 2011-08-04T17:24:45

You could draw it in the background of the chart using the drawing api.

edit:

I dont know of any code examples on the web, I've only done it in production code (aka I cant share it, sorry :( ) you will want to create a container and put it into the charts

<mx:backgroundElements>

You should pass into this container the min and max for the x-axis probably as separate properties and a dataprovider that describes when to show a highlighted section. You might have to compute the min and max based on the dataprovider you pass into the chart.

If you just want to show the highlighted area you will just use the drawing api and compute where to put on the x-axis based on your min, max, width of container, and data point (start and end values) from your dataprovider. It will look something like this in your updateDisplayList:

// code is not tested but a good start

var shadeStartX:Number = (max-min)/startPoint; 
var shadeEndX:Number = (max-min)/endPoint;
var shadeWidth:Number = shadeEndX - shadeStartX;

...

this.graphics.drawRect(shadeStartX, 0, shadeWidth, unscaledHeight);

but if you want to have things like hover states and all that goodness I would suggest creating a display object that you pass the width in and adding that to the container at the computed x-axis to set it at.

Drawing on Flex Chart

2 Answers