Reputation: 11
I have a Line Series Chart in Flex with values from 0 to 90. I would like to set the background of the chart in such a way that, 0 - 30 is in green, 31 - 60 is in red and 61 - 90 is in blue.
I am new to Flex. Can someone tell me how this can be done?
Upvotes: 1
Views: 1863
Reputation: 111
This is super old, but I stumbled upon it while Googling and for posterity sake, wanted to add this.
The best and preferred way is to set the backgroundElements property of the chart. Here's an example:
<fx:Array id="backgroundChartElements">
<mx:GridLines>
<mx:horizontalFill>
<s:SolidColor color="0x000000" alpha="1" />
</mx:horizontalFill>
<mx:horizontalAlternateFill>
<s:SolidColor color="0x000000" alpha=".5" />
</mx:horizontalAlternateFill>
</mx:GridLines>
</fx:Array>
<mx:LineChart backgroundElements="{backgroundChartElements}" ... />
See this document for more information on messing with the background and grid lines
Upvotes: 2
Reputation: 116
There is a class called CartesianDataCanvas
that is designed for this kind of thing.
You add an instance to the chart's backgroundElements
and use a drawing API to draw on it. What is handy is that the drawing API on these objects works in terms of data coordinates, not screen coordinates saving you a lot of converstion work and making scaling and resizing much easier.
More here
Upvotes: 1
Reputation: 12085
the easiest way to do this would be to set the graphs maximum and minimum to fixed values(so that it doesn't auto re-size) and draw the color bars behind it using the normal drawing api.
Upvotes: 0