How do I set background color of Line Series chart in Flex

1
votes

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?

3
apache-flex
This image should give a better idea of what I am trying to acheive: e-ness.fr/images_html/pikonet_test4.png - Rohit

3 Answers

2
votes

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

1
votes

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

0
votes

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.