[flexcoders] Drawing on Charts - pixel perfection?

[jamiebadman]

Hi,

I'm having some trouble drawing exactly how I'd like to on a chart.
I'll post the example code below - but basically the problem appears
to be this:

I'm trying to draw a rectangle on the background to cover *exactly*
half of the background area on the chart. So I have a
CartesianDataCanvas and then using the height and half the width of
this Canvas, I call localToData to convert the co-ordinates needed for
drawRect. The problem appears to be that doing this ties the converted
co-ordinates to the nearest underlying axis point. But of course, this
then may not correspond to the exact half-way point.

My question is, how can I draw such a rectangle if not via this method
- or if this method is the correct approach, how can I obtain the
accurate co-ordinates with which to call the drawRect function?

Example Code found below...

Thanks,

Jamie.


<?xml version="1.0"?>
<!-- charts/AddLabelsWithOffsetLines.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>
  <mx:Script><![CDATA[
        import mx.containers.HBox;
        import mx.charts.LinearAxis;
        import mx.containers.Box;
    import mx.collections.ArrayCollection;
    import mx.charts.series.items.ColumnSeriesItem;
    import mx.charts.ChartItem;
    import mx.charts.chartClasses.CartesianCanvasValue;
    import mx.charts.chartClasses.CartesianTransform;

     [Bindable]
     public var profits:ArrayCollection = new ArrayCollection([
        {Month:1, Profit:1300},
        {Month:2, Profit:750},
        {Month:3, Profit:1100},
        {Month:4, Profit:1000},
        {Month:5, Profit:980},
        {Month:6, Profit:1500},
        {Month:7, Profit:2060},
        {Month:8, Profit:1700},
        {Month:9, Profit:1690},
        {Month:10, Profit:2200},
        {Month:11, Profit:2550},
        {Month:12, Profit:3000}
     ]);

     private function draw():void {
        canvas.clear();

        canvas.beginFill(0x62dce1);
        
        var canvasWidth:int = canvas.width;
        var canvasHeight:int = canvas.height;
        
        var minPt:Array = canvas.localToData(new Point(0, 0));
        var maxPt:Array = canvas.localToData(new
Point(canvasWidth/2,canvasHeight));

        canvas.drawRect(minPt[0]-1, maxPt[1], maxPt[0]-1, minPt[1]);
        canvas.endFill();
     }

  ]]></mx:Script>
  <mx:Panel>
     <mx:AreaChart id="myChart" 
        dataProvider="{profits}" 
        selectionMode="single" 
     >
        <mx:annotationElements>
            <mx:CartesianDataCanvas id="canvas" alpha="0.2"
includeInRanges="true"/>
        </mx:annotationElements>

        <mx:horizontalAxis>
           <mx:CategoryAxis  
                dataProvider="{profits}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>

        <mx:series>
           <mx:AreaSeries
                id="series1"
                xField="Month" 
                yField="Profit" 
                displayName="Profit"
                selectable="true" 
           />
        </mx:series>
     </mx:AreaChart>
     <mx:Legend dataProvider="{myChart}"/>
     
     <mx:Button id="b1" 
        label="draw" 
        click="draw();"
     />
  </mx:Panel>
</mx:Application>