1 Reply Latest reply on Jun 20, 2008 10:18 PM by matthew horn

    Flex chart - Need Help !

    Flex-urgent Level 1
      I have written flex code to generate stacked column chart. by default the value in data tip is a lot of information. I would like to reduce it and show as just the value with % eg: 5% etc.. Now i am having problem in writing the dataTipFunction. i am posting a sample code of chart. on the top of code i am setting values for chart ( kind of by default) then later on it take dynamic values based on some selections..

      chart-
      --------
      [Bindable] // default chart value
      public var fund:ArrayCollection = new ArrayCollection([
      {TaxBond:"Taxable Bond Fund", yield:xvalue, loss:yvalue, tax:0},
      {TaxBond:"Tax-Free Bond Fund", yield:0, loss:0, tax:xvalue}

      ]);


      public function messageReceiveHandler(taxableYield:String, taxRate:String):void {
      xvalue = taxableYield;
      yvalue = taxRate;


      // assign new values to chart
      fund.removeAll();
      fund.addItem({TaxBond:"Taxable Bond Fund", yield:xvalue, loss:yvalue, tax:0});
      fund.addItem({TaxBond:"Tax-Free Bond Fund", yield:0, loss:0, tax:xvalue});

      }


      // Not sure how to write this function
      public function myDataTipFunction(e:HitData):String {
      var s:String;
      s = ColumnSeries(e.element).displayName + "\n";
      // s += (ColumnSeries(e.element.chartDataProvider))+"%";
      return s;
      }

      ]]>
      </mx:Script>

      <mx:NumberFormatter id="numForm" />

      <mx:VBox verticalAlign="middle"
      horizontalAlign="left"
      x="0" y="0" >


      <mx:ColumnChart id="myChart" columnWidthRatio=".5"
      dataProvider="{fund}"
      showDataTips="true" dataTipFunction="myDataTipFunction"
      width="350" height="185">

      <mx:horizontalAxisRenderer>
      <mx:AxisRenderer canDropLabels="true" tickPlacement="none">
      <mx:axisStroke>
      <mx:Stroke color="#999999" weight="1"/>
      </mx:axisStroke>
      </mx:AxisRenderer>
      </mx:horizontalAxisRenderer>

      <mx:verticalAxisRenderer>
      <mx:AxisRenderer canDropLabels="true" tickPlacement="none">
      <mx:axisStroke>
      <mx:Stroke color="#999999" weight="1"/>
      </mx:axisStroke>
      <mx:minorTickStroke>
      <mx:Stroke color="#999999" weight="1"/>
      </mx:minorTickStroke>
      </mx:AxisRenderer>
      </mx:verticalAxisRenderer>


      <mx:horizontalAxis>
      <mx:CategoryAxis categoryField="TaxBond" />
      </mx:horizontalAxis>

      <mx:verticalAxis>
      <mx:LinearAxis minimum="0" maximum="12" interval="2" labelFunction="defineVerticalLabel"/>
      </mx:verticalAxis>

      <mx:series>
      <mx:ColumnSet type="stacked" >
      <mx:series>
      <mx:ColumnSeries
      dataProvider="{fund}"
      xField="TaxBond"
      yField="yield"
      displayName="yield">
      </mx:ColumnSeries>

      <mx:ColumnSeries
      dataProvider="{fund}"
      xField="TaxBond"
      yField="loss"
      displayName="loss" >
      </mx:ColumnSeries>

      <mx:ColumnSeries
      dataProvider="{fund}"
      xField="TaxBond"
      yField="tax"
      displayName="after yield" >
      </mx:ColumnSeries>
      </mx:series>
      </mx:ColumnSet>
      </mx:series>
      </mx:ColumnChart>
      </mx:VBox>
      </mx:Application>