0 Replies Latest reply on Oct 26, 2010 6:57 AM by SiHoop

    Calculating the width of a chart column

    SiHoop Level 1

      I'm trying to add some graphics to a column chart. I want to draw a vertical line after a column has been added (whenever the value of Break in the arrayCollection is 1), but I don't know how to calculate the horizontal value of each column. Is there a way to calculate the x value for where each column is placed?

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  xmlns:local="*" creationComplete="init()">
          <mx:Script>
              <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.events.FlexEvent;
      private var chart:ColChart;
      [Bindable] private var chartDataAC:ArrayCollection = new ArrayCollection( [
          { TestNumber: "1", Correct: 1, Wrong:1 , Break:1 },
          { TestNumber: "2", Correct: 2, Wrong:2 , Break:0},
          { TestNumber: "3", Correct: 3, Wrong:3 , Break:0},
          { TestNumber: "4", Correct: 4, Wrong:3 , Break:1},
          { TestNumber: "5", Correct: 5, Wrong:4 , Break:0},
          { TestNumber: "6", Correct: 6, Wrong:1 , Break:0},
          { TestNumber: "7", Correct: 7, Wrong:2 , Break:0},
          { TestNumber: "8", Correct: 8, Wrong:4 , Break:1} ]);
      private var partialAC:ArrayCollection;
      private var num:Number=0;

       

      private function init():void{   
          trace(2)
          chart=new ColChart;
          chart.addEventListener(FlexEvent.CREATION_COMPLETE, addColumn)
          hbox.addChild(chart)
      }
      private    function addColumn(e:FlexEvent):void{
          for (var i:int=0;i<chartDataAC.length;i++){
              if(chartDataAC[i].Break==1){
                  chart.draw(num)   
              }
              chart.testDataAC.addItemAt(chartDataAC[i],num)
              num++
          }
      }
              ]]>
          </mx:Script>
          <mx:HBox  id="hbox" width="100%" height="100%"/>
      </mx:Application>

       

      ColChart.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"  height="100%" width="100%"  >
          <mx:Script>
              <![CDATA[         
                  import mx.collections.ArrayCollection;
                  [Bindable]
                  public var testDataAC:ArrayCollection = new ArrayCollection;
                  public function draw(_num:Number):void{
                      this.graphics.beginFill(0xff0000)
                      this.graphics.drawRect((50*_num),columnChart.height,2,-columnChart.height)
                  }
              ]]>
          </mx:Script>
          <mx:SolidColor id="color1" color="0xffff00" />
          <mx:SolidColor id="color2" color="0x00ffff" />
              <mx:ColumnChart id="columnChart"   columnWidthRatio="1" 
                               dataProvider="{testDataAC}"    >               
                  <mx:horizontalAxis  >
                      <mx:CategoryAxis categoryField="TestNumber"   ticksBetweenLabels="true"   />
                  </mx:horizontalAxis>
                  <mx:series>
                     
                      <mx:ColumnSeries  xField="TestNumber" yField="Correct" maxColumnWidth="5"  fill="{color1}"/>
                      <mx:ColumnSeries xField="TestNumber" yField="Wrong" maxColumnWidth="5" fill="{color2}"/>
                  </mx:series>
              </mx:ColumnChart>
         
      </mx:Canvas>