0 Replies Latest reply on Jul 1, 2011 9:06 AM by peeps147

    Draw Line Across Width of Column Chart

    peeps147 Level 1

      Hi all,

       

      I need to draw a line that goes across the entire width of a column chart, from the vertical axis all the way to the other edge.  I have been trying to accomplish this with CartesianDataAxis but can only get the line to start in the middle of my first column and extend to the middle of my last column.  Here's my current code below.  I would really appreciate any help! Thanks!

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:ilog="http://www.ilog.com/2007/ilog/flex" >
           
           <mx:ColumnChart width="600" height="600" dataProvider="{medalsAC}" creationComplete="drawNormalLine()">
                <mx:annotationElements>
                     <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
                </mx:annotationElements>
                <mx:horizontalAxis>
                     <mx:CategoryAxis id="catAxis" 
                          categoryField="Country" displayName="Name"
                          />
                </mx:horizontalAxis>
                <mx:series>
                     <mx:ColumnSeries 
                          xField="Country" 
                          yField="Gold" 
                          displayName="Medals"
                          />
                </mx:series>
           </mx:ColumnChart>
           
           <mx:Script>
                <![CDATA[
                     
                     import mx.collections.ArrayCollection;
                     
                     [Bindable]
                     private var medalsAC:ArrayCollection = new ArrayCollection( [
                          { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                          { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
      
                
                     private function drawNormalLine(e:Event=null):void {
                          canvas.clear();
                          canvas.lineStyle(4, 
                               0xCCCCCC, 
                               .75, 
                               true, 
                               LineScaleMode.NORMAL, 
                               CapsStyle.ROUND, 
                               JointStyle.MITER, 
                               2
                          );
                          
                          for (var i:int = 0; i<medalsAC.length-1; i++) {
                               canvas.moveTo(medalsAC.getItemAt(i).Country, 20);
                               canvas.lineTo(medalsAC.getItemAt(i+1).Country, 20);
                          }
                               
                     }
                ]]>
           </mx:Script>